Contrast is one of the most common accessibility failures on the web. Not because designers don’t care — but because it’s hard to judge by eye. WCAG defines exact contrast ratios. Here’s what you need to know.
What Is Contrast Ratio?
Contrast ratio is the luminance difference between foreground text and its background. It ranges from 1:1 (no contrast) to 21:1 (pure white on pure black).
WCAG (Web Content Accessibility Guidelines) sets minimum contrast requirements for readable text.
WCAG Contrast Requirements
Level AA (Minimum — most sites should meet this)
| Text Type | Minimum Ratio |
|---|---|
| Normal text (< 18pt / < 14pt bold) | 4.5:1 |
| Large text (≥ 18pt / ≥ 14pt bold) | 3:1 |
| UI components and graphical objects | 3:1 |
Level AAA (Enhanced — strictest)
| Text Type | Minimum Ratio |
|---|---|
| Normal text (< 18pt / < 14pt bold) | 7:1 |
| Large text (≥ 18pt / ≥ 14pt bold) | 4.5:1 |
How to Calculate Contrast Ratio
The WCAG contrast formula uses relative luminance:
Contrast Ratio = (L1 + 0.05) / (L2 + 0.05)Where L1 is the lighter color’s luminance and L2 is the darker.
You don’t need to do this by hand — the Color Accessibility Checker calculates it instantly.
Quick Reference: Common Ratios
| Colors | Ratio | Passes |
|---|---|---|
| White (#FFFFFF) on Black (#000000) | 21:1 | AAA |
| Black (#000000) on White (#FFFFFF) | 21:1 | AAA |
| #767676 on White | 4.54:1 | AA ✓ |
| #767676 on #FFFFFF (body text) | 4.54:1 | AA ✓ |
| #767676 on #FFF (light gray on white) | 4.54:1 | AA ✓ |
| #707070 on White | 3.12:1 | Large text only |
| #949494 on White | 2.44:1 | Fails |
| Dark Gray (#333) on Light Gray (#CCC) | 6.64:1 | AA ✓ |
Most Common Contrast Failures
Gray Text on White
Light gray text (like #999 or #AAAAAA) on a white background often fails. These ratios hover around 2–3:1, far below the 4.5:1 minimum.
Placeholder Text
Form placeholders (#767676 on white) barely pass at 4.54:1. That’s technically compliant — but leaves no margin for antialiasing or low-quality displays. Use a darker color or real labels instead.
Icons on Colored Backgrounds
Icon-only buttons with no text need 3:1 contrast. This is often missed.
Text Over Images
Text on a photo or gradient background needs the contrast check against all parts of the image. Use an overlay or shadow to guarantee the ratio.
What Counts as “Large Text”?
WCAG defines large text as:
- 18pt+ regular text (or 14pt+ bold)
- 18pt+ at normal weight on screen (translates to roughly 24px+ CSS pixels for body text)
Practical Tips for Passing Contrast
- Test before designing — use the contrast checker before committing to a palette
- Avoid light grays for body text —
#767676is the darkest safe gray for AA on white; for better margins use#5C5C5Cor darker - Dark text on dark backgrounds — also fails; check both directions
- Don’t rely on transparency — rgba(0,0,0,0.6) on white behaves differently than a solid hex code; test it
Summary
WCAG AA requires at least 4.5:1 for normal text and 3:1 for large text. AAA requires 7:1 and 4.5:1 respectively. Test every color combination — especially gray text on white, placeholder text, and text over images. The contrast checker catches failures before they ship.
Test your color combinations with the Color Accessibility Checker — enter your foreground and background colors to get the ratio and pass/fail result instantly.