Color contrast is one of the most commonly failed accessibility checks — and one of the easiest to fix once you know the numbers. Here's the complete developer reference.
The Numbers You Need to Know
WCAG 2.1 defines minimum contrast ratios between text and its background:
| Use Case | Level AA | Level AAA |
|---|---|---|
| Normal text (under 18pt / 14pt bold) | 4.5:1 | 7:1 |
| Large text (18pt+ / 14pt+ bold) | 3:1 | 4.5:1 |
| UI components (borders, icons, focus rings) | 3:1 | — |
| Decorative elements, disabled states | Exempt | Exempt |
Level AA is what most accessibility laws require. AAA is best practice — try for it on body text, but it's not legally mandated in most jurisdictions.
What "Large Text" Means
18pt = 24px at 96 DPI. 14pt bold = ~18.67px bold.
In practice:
- H1, H2 headings: usually large text (if 24px+)
- Body text, labels, captions: normal text
- Placeholder text: normal text (and often fails contrast in default browser styling)
Understanding the Contrast Ratio Scale
- 21:1 — Black on white (maximum possible)
- 7:1 — AAA for normal text
- 4.5:1 — AA for normal text (minimum for body text compliance)
- 3:1 — AA for large text and UI components
- 2.5:1 — Common mistake: light grey (#999) on white (#fff) ≈ 2.85:1. Fails.
- 1:1 — Same colour on itself (invisible)
Common Failures and How to Fix Them
Light grey text on white background:
#999999 on #ffffff = 2.85:1 — fails AA for all text.
Fix: darken to #767676 (4.54:1) or #595959 (7:1 for AAA).
Blue links on white:
#0000ff on #ffffff = 8.59:1 — passes AAA.
But #1a73e8 (Google blue) on #ffffff = 4.66:1 — passes AA, barely.
White text on medium blue:
#ffffff on #4285f4 = 3.07:1 — fails AA for body text (needs 4.5:1).
Fix: use #ffffff on #1558d6 instead (5.37:1).
Dark mode gotcha:
A colour combination that passes in light mode may fail in dark mode. Always test both.
How the Contrast Ratio is Calculated
The formula uses relative luminance (W3C spec):
- Normalise each RGB channel (0–255) to 0–1
- Apply gamma correction: values ≤ 0.04045 → divide by 12.92; else →
((val + 0.055) / 1.055) ^ 2.4 - Compute luminance:
L = 0.2126 × R + 0.7152 × G + 0.0722 × B - Contrast ratio =
(L1 + 0.05) / (L2 + 0.05)where L1 is the lighter colour
This is why contrast ratio is perceptual — luminance weights green higher than red, which is higher than blue, matching how human eyes perceive brightness.
Quick Checks in Design Tools
Figma: Select a text layer → the right panel shows a contrast indicator. Click it for the WCAG verdict.
Chrome DevTools: Open Accessibility panel, click any element, see contrast ratio.
Browser extension: axe DevTools or WAVE browser extensions flag contrast issues across an entire page.
For a Specific Combination
To check any hex or RGB pair against WCAG standards, a free color contrast checker gives the exact ratio and AA/AAA pass/fail verdict in real time. No signup, runs in browser.
The Legal Landscape
- USA: ADA (Americans with Disabilities Act) — WCAG 2.1 AA is the federal standard for government and large commercial sites
- EU: EN 301 549 standard — WCAG 2.1 AA
- UK: Equality Act 2010 — WCAG 2.1 AA
- Australia: WCAG 2.1 AA for government sites
The safest approach for any public-facing website: design to WCAG 2.1 AA for all text and UI components, aim for AAA on body text.
Top comments (0)