Color Contrast and Accessibility
About 8% of men and 0.5% of women have some form of color vision deficiency. Add in people with low vision, aging eyes, or just using their phone in bright sunlight — and suddenly your "beautiful" light gray text on white background is invisible to a significant chunk of your users.
WCAG Contrast Ratios
The Web Content Accessibility Guidelines define minimum contrast ratios:
| Level | Normal text | Large text (18px+ bold or 24px+) |
|---|---|---|
| AA | 4.5:1 | 3:1 |
| AAA | 7:1 | 4.5:1 |
AA is the legal minimum in many jurisdictions. AAA is the gold standard.
How Contrast Ratio Is Calculated
It's not as simple as "how different the hex codes are." The formula uses relative luminance:
ratio = (L1 + 0.05) / (L2 + 0.05)
where L = 0.2126 * R + 0.7152 * G + 0.0722 * B
and R, G, B are linearized:
if sRGB <= 0.03928: linear = sRGB / 12.92
else: linear = ((sRGB + 0.055) / 1.055) ^ 2.4The human eye is most sensitive to green, then red, then blue — hence the weighted formula.
Common Failures
- Light gray on white:
#999on#fff= 2.85:1 (fails AA) - Orange on white:
#ff6600on#fff= 3.14:1 (fails AA for normal text) - Blue on black:
#0066ffon#000= 3.44:1 (fails AA)
Fix: darken the text or lighten the background until you hit 4.5:1.
Tools for Checking
Chrome DevTools has a built-in contrast checker — inspect an element, look at the color swatch in the Styles panel. The Accessibility tab shows the computed ratio.
For design work, check contrast during the design phase, not after development. It's 10x cheaper to fix a color in Figma than in production CSS.
Check your colors now: Color Contrast Checker — enter foreground and background, see instant WCAG AA/AAA results with live preview.