Skip to main content

Contrast ratio audit is performed

ab-000133 · accessibility-wcag.robust.contrast-audit
Severity: infoactive

Why it matters

Color contrast requirements cover not just body text but icons, data visualization labels, chart lines, and UI component boundaries. A single automated contrast check on the homepage misses theme-specific issues in dark mode, dynamic states like hover and focus, and SVG-based content. WCAG 2.2 SC 1.4.3 (Contrast Minimum) applies to all text in all states; SC 1.4.11 (Non-text Contrast) applies to UI components and graphical objects. Without a documented audit, both can fail silently in edge cases the main audit path never exercises.

Severity rationale

Info because contrast issues in edge-case states (dark mode, hover, data viz) are unlikely to appear in automated scans — the gap is an audit process weakness, not a confirmed WCAG 2.2 SC 1.4.3 violation in the main path.

Remediation

Conduct a structured contrast audit covering text in all states, non-text UI components, and data visualizations. Document results and track remediation.

Review color definitions in src/app/globals.css and tailwind.config.ts. For each color pair:

  1. Measure the ratio using the WebAIM Contrast Checker or npx contrast-ratio "#707070" "#ffffff"
  2. Test in light mode, dark mode, and high-contrast mode
  3. Check hover, focus, disabled, and error states separately
  4. Verify chart line colors, legend labels, and axis tick text in Recharts or similar

Log each failing pair with the component name, the colors, and the target ratio in a docs/contrast-audit.md tracking file.

Detection

  • ID: accessibility-wcag.robust.contrast-audit

  • Severity: info

  • What to look for: Check whether contrast ratios have been audited across text, icons, and data visualizations. Look for accessibility reports or audit trails.

  • Pass criteria: At least 1 of the following conditions is met. Contrast has been tested on all text, icons, and non-text UI elements. Issues have been remediated.

  • Fail criteria: No evidence of contrast testing.

  • Skip (N/A) when: Never — contrast testing is recommended for all visual content.

  • Detail on fail: Example: "No contrast audit performed. Potential issues in color palette not identified"

  • Remediation: Conduct a contrast audit. Review color definitions in your src/app/globals.css or Tailwind config:

    1. Use WebAIM Contrast Checker or axe DevTools
    2. Test all text, icons, and UI elements
    3. Test in light and dark modes if applicable
    4. Log issues and track remediation

External references

Taxons

accessibility

History