WCAG contrast ratios explained
4.5:1, 3:1, 7:1 — what the numbers measure and which one you need.
Updated · 5 min read
A contrast ratio compares the relative luminance of two colors — how much light they emit to the eye — on a scale from 1:1 (identical) to 21:1 (pure black on pure white). WCAG's thresholds — 4.5:1, 3:1, 7:1 — are points on that scale chosen so text stays readable for people with moderately low vision, in bad lighting, on bad screens. Here's what each number governs.
The AA thresholds (the legal-baseline ones)
- 4.5:1 — normal text. Body copy, labels, links, captions: the number people mean by "WCAG compliant contrast".
- 3:1 — large text. From 24px regular or ~18.7px bold upward, the size itself does part of the work, so the bar drops.
- 3:1 — UI components and graphics. Input borders, focus rings, icons, chart lines: anything a user must perceive to operate the page (WCAG 1.4.11).
Two common surprises: placeholder text has no exemption — if users need to read it, it needs 4.5:1, which default gray placeholders routinely fail; and disabled controls are exempt, one of the few legitimate free passes.
AAA, and when to care
AAA raises text to 7:1 (4.5:1 for large). It exists for contexts where reading failure has real cost — government services, healthcare, dense documentation — and as a genuinely comfortable target for long-form reading. Most product teams treat AA as the requirement and AAA as a nice-to-have; what you shouldn't do is ship below AA and call the design "minimal".
Why 4.49:1 actually fails
The ratio comes from a defined luminance formula, so it's binary — 4.5 passes, 4.49 fails. That feels
pedantic until you remember the threshold already is the compromise: it was set at the edge of
readability for 20/40 vision, not the comfortable middle. Grays on white are where designs die by tiny
margins: #767676 on white passes at 4.54:1; the visually identical #777777 fails
at 4.48:1. This is why you check with a tool instead of your eyes — your calibrated designer monitor is the
best-case scenario your users don't have.
Check a pair in seconds
Paste foreground and background into our contrast checker: it computes the exact WCAG ratio live, shows pass/fail for every AA and AAA rule at both text sizes, and suggests the nearest passing shade of your color when you miss — so you keep the palette's intent and gain the ratio.