If users struggle to read your text, your site has a problem — even if it looks fine on your screen. Color contrast is one of the most common accessibility failures on the web, and one of the easiest to fix.
What Is Color Contrast?
Color contrast is the difference in brightness between a foreground color (text) and its background. The higher the contrast ratio, the easier the text is to read — especially for users with low vision or color blindness. Contrast is expressed as a ratio like 4.5:1, where 1:1 means identical colors and 21:1 is maximum contrast (black on white).
What Are WCAG Standards?
WCAG (Web Content Accessibility Guidelines) is the international standard for web accessibility published by the W3C. It defines three levels: WCAG A (minimum requirements), WCAG AA (required by most laws including the ADA), and WCAG AAA (enhanced accessibility).
WCAG Contrast Requirements
| Element | WCAG AA | WCAG AAA |
|---|---|---|
| Normal text under 18pt | 4.5:1 | 7:1 |
| Large text 18pt or bold 14pt | 3:1 | 4.5:1 |
| UI components and graphics | 3:1 | — |
Why Contrast Matters
- Around 300 million people worldwide have some form of color blindness
- Low contrast causes eye strain for everyone, not just users with disabilities
- Poor contrast fails accessibility audits and can create legal liability
Common Failing Combinations
| Combination | Ratio | Result |
|---|---|---|
| Light grey text on white | 1.5:1 | Fails AA |
| Yellow on white | 1.07:1 | Fails AA |
| Dark grey on white | 7.0:1 | Passes AAA |
| White on blue #0070f3 | 4.6:1 | Passes AA |
Why Different Color Blindness Types Need Different Fixes
Deuteranopia and protanopia (red-green color blindness, the most common forms) make red and green genuinely hard to distinguish from each other, while tritanopia (much rarer) affects blue-yellow perception instead — a color combination that works fine for one type can still fail for another. This is why contrast ratio alone doesn't guarantee accessibility: two colors can have sufficient luminance contrast while still being indistinguishable hues for someone with a specific type of color blindness, which is exactly why relying on color alone to convey meaning (like a red/green status indicator with no icon or label) fails regardless of contrast ratio.
Accessibility Lawsuits Are a Real, Growing Trend
Website accessibility lawsuits under the ADA have increased substantially in the US over the past several years, with thousands filed annually against businesses whose sites failed basic accessibility checks like contrast. Courts have generally held that the ADA's public accommodation requirements extend to websites, which means color contrast failures aren't just a UX nicety — for many businesses they carry genuine legal exposure, not just a theoretical accessibility concern.
Tips for Better Contrast
- Don't rely on color alone to convey information — add icons or labels too
- Test your design in grayscale mode to reveal contrast issues
- Use darker shades of brand colors for text
- Check both light and dark mode versions of your UI
Use the Anonymiz Color Contrast Checker to audit your site for free — no signup required.
