“Contrast ratio 4.5:1” — you've seen it in Lighthouse reports, accessibility audits, and every WCAG checklist. But what does the number actually mean, how is it computed, and which pairs pass? This guide explains the WCAG contrast formula (WCAG 2.x), the AA/AAA thresholds, and shows you working examples you can verify yourself in thirty seconds.
The one-line rule
Body text needs at least 4.5:1; large text (18px+ or 14px+ bold) needs 3:1 — and AAA raises both to 7:1 and 4.5:1. If you remember nothing else, remember those four numbers.
1. What a contrast ratio actually is
The ratio compares the relative luminance of two colors — how bright they appear to a human eye, not their RGB values. The formula from WCAG 2.x is:
contrast = (L_lightest + 0.05) / (L_darkest + 0.05) where L is relative luminance: L = 0.2126·R' + 0.7152·G' + 0.0722·B' and each channel is linearized first: c <= 0.03928 → c/12.92 c > 0.03928 → ((c + 0.055)/1.055)^2.4
The three coefficients (0.2126 / 0.7152 / 0.0722) mirror human color sensitivity: we are far more sensitive to green than to blue, which is why pure blue is a famously bad text color despite looking “dark.”
2. The thresholds (memorize this table)
| Level | Normal text | Large text (18pt/24px, or 14pt bold) | UI components / graphics |
|---|---|---|---|
| AA (minimum) | 4.5 : 1 | 3 : 1 | 3 : 1 |
| AAA (enhanced) | 7 : 1 | 4.5 : 1 | — |
AA is the legal and practical baseline (Section 508, EN 301 549, ADA case law). AAA is a stretch goal for long-form reading — most sites don't need it for everything.
3. Real examples, verified
- Black on white: 21 : 1 — passes everything (the theoretical maximum).
- Blue #3B82F6 on white: ≈ 3.7 : 1 — passes large text AA only, fails normal text.
- Grey #767676 on white: ≈ 4.5 : 1 — passes AA, fails AAA.
- Light grey #C0C0C0 on white: ≈ 1.8 : 1 — fails everything.
- Pure blue #0000FF on white: ≈ 8.6 : 1 — passes AAA (counterintuitive, but true: low green/red luminance).
The takeaway: avoid “design greys” (any grey text lighter than roughly #767676 on white). Light greys are the #1 contrast failure in real websites.
4. How to check any pair instantly
Instead of doing the math by hand, use our free in-browser contrast checker — pick two colors and see the ratio, the AA/AAA badges, and a live preview in one click. Nothing is uploaded:
Enter a text color and background color — get the WCAG ratio and AA/AAA verdict instantly.
Open Color Contrast Checker5. Common mistakes
- Judging by eye — human perception is terrible at this; a pair you think looks fine can fail at 3:1.
- Forgetting large-text exceptions — headers pass at 3:1, but the same color as body text fails at 4.5:1.
- Ignoring opacity — text rendered at 80% opacity blends with the background; test the rendered color, not the declared one.
- Failing disabled states — disabled buttons/labels are often exempt, but only if genuinely disabled (not just visually grey).
- Assuming black-on-white always works — it does (21:1), but pure white on light UI rarely does.
6. Frequently asked questions
What is the minimum contrast ratio for text? 4.5:1 for normal text and 3:1 for large text under WCAG AA.
How do I compute the ratio? Use the formula above, or any checker — the math is deterministic, so every reliable tool returns identical results for the same two colors.
Does WCAG 2.2 change the ratios? No — 2.2 kept the contrast requirements unchanged; it added new success criteria (e.g., focus appearance) but the 4.5:1 / 3:1 numbers remain.
What about WCAG 3.0 (APCA)? The next generation proposes a different perceptual model (APCA) with non-linear scores. It's still a draft; design for WCAG 2.x AA today.
Are logos and decorative content exempt? Yes — text that is part of a logo, brand name, or purely decorative is excluded from contrast requirements.