Contrast ratio audit is performed
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:
- Measure the ratio using the WebAIM Contrast Checker or
npx contrast-ratio "#707070" "#ffffff" - Test in light mode, dark mode, and high-contrast mode
- Check hover, focus, disabled, and error states separately
- 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:
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.cssor Tailwind config:- Use WebAIM Contrast Checker or axe DevTools
- Test all text, icons, and UI elements
- Test in light and dark modes if applicable
- Log issues and track remediation
External references
- wcag:2.2 · 1.4.3 — Contrast (Minimum)
- section-508:2018-refresh · 302.5 — Without Visual
Taxons
History
- 2026-04-18·v1.0.0·Initial import from accessibility-wcag·automated