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 |
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.