Color Contrast Check
Measure rendered foreground and background color pairs against applicable WCAG contrast targets.
Check your websiteWhy this check matters
Adequate contrast keeps text readable for people with low vision, color-vision differences, or difficult viewing conditions. Rendered styles matter more than source tokens alone.
Passing evidence
Foreground #1A1A1A on background #FFFFFF → 17.4:1Common failing evidence
Foreground #9A9A9A on background #FFFFFF → 2.8:1Possible false positives
- Large text can use a lower WCAG threshold than normal text.
- Transparency, gradients, images, and state changes require contextual review.
How to fix it safely
- Adjust foreground or background tokens while preserving the design system.
- Check hover, disabled, placeholder, and focus states.
- Avoid relying on color alone to communicate status.
How to verify the fix
- Measure the final rendered color pair at the flagged element.
- Recheck representative states at desktop and mobile widths.
Related Accessibility checks
Run the complete audit
Check this signal together with the related category evidence on the current public page.
Open the accessibility audit tool
