WCAG Color Contrast Explained: AA/AAA Ratios, Formula, and How to Check

“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 (at least 18pt, equivalent to 24 CSS px, or 14pt bold, equivalent to 18⅔ CSS px) 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'

first normalize each 8-bit sRGB channel: c = channel / 255
then linearize it:
  c <= 0.04045 → c/12.92
  c >  0.04045 → ((c + 0.055)/1.055)^2.4

The three coefficients (0.2126 / 0.7152 / 0.0722) weight green more heavily than blue. Pure blue has low relative luminance: it contrasts strongly with white, but poorly with black. Always evaluate a foreground/background pair.

2. The thresholds (memorize this table)

These are the contrast thresholds, not a complete accessibility or legal compliance checklist. Whether a law or contract requires a particular WCAG version and level depends on its scope. See W3C's explanation of SC 1.4.3 for text-size definitions and exceptions. Compare unrounded ratios against the threshold: 4.499:1 does not pass 4.5:1.

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 grey text can easily fail contrast requirements.

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:

5. Common mistakes

1. Judging by eye — human perception is terrible at this; a pair you think looks fine can fail at 3:1.
2. Forgetting large-text exceptions — a heading qualifies for 3:1 only if it meets the large-text size definition; being a heading alone is not enough.
3. Ignoring opacity — text rendered at 80% opacity blends with the background; test the rendered color, not the declared one.
4. Failing disabled states — disabled buttons/labels are often exempt, but only if genuinely disabled (not just visually grey).
5. 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 APCA and WCAG 3.0? APCA is a different perceptual contrast model under discussion for future accessibility work; it is not the formula used by WCAG 2.2. Do not substitute its scores for WCAG 2.x contrast ratios.

Are logos and decorative content exempt? Yes — text that is part of a logo, brand name, or purely decorative is excluded from contrast requirements.