Home · Guides · WCAG Contrast Ratios Explained
WCAG Contrast Ratios Explained: 4.5, 3 and 7 — and Why 4.49 Fails
Three numbers decide most colour arguments on the web. This is where they come from, what they apply to, and the one rule about them that tools keep quietly breaking.
The thresholds: normal text needs 4.5:1 at AA and 7:1 at AAA; large text needs 3:1 at AA and 4.5:1 at AAA; non-text elements need 3:1 against adjacent colours. And a ratio of 4.49 fails the 4.5 test — the comparison uses the unrounded number.
Where the numbers live
The thresholds come from three success criteria in WCAG 2.1: 1.4.3 Contrast (Minimum) sets AA — 4.5:1 for normal text, 3:1 for large text. 1.4.6 Contrast (Enhanced) sets AAA — 7:1 and 4.5:1. 1.4.11 Non-text Contrast sets 3:1 for component boundaries, focus indicators and meaningful graphics against their adjacent colours. WCAG 2.2 kept all of these unchanged. The ratio itself is computed from relative luminance: each channel is linearised, weighted (0.2126 red, 0.7152 green, 0.0722 blue), and the ratio is (lighter + 0.05) ÷ (darker + 0.05) — which is why the scale runs from 1:1 (identical) to 21:1 (black on white).
Large text is a definition, not an impression
Large text is at least 24px (18 point), or at least 18.66px (14 point) at bold weight (700 or heavier). Nothing else counts as large, however big it looks. The near-misses matter: a 20px bold headline qualifies; an 18px bold label — the size half the web's buttons use — does not, and needs the full 4.5:1. When a checker asks you for a font size and weight, it is classifying, and the classification changes the verdict: the worked example below passes as large text and fails as body text, with no change to the colours.
The worked examples (the same numbers the tools are tested against)
| Pair | Exact ratio | Reading |
|---|---|---|
| #767676 on #FFFFFF | 4.542225 | The lightest pure grey that passes AA normal text on white — the canonical boundary colour. |
| #808080 on #FFFFFF | 3.949440 | Mid-grey: fails normal text, passes large text and non-text. The "large-text-only" case. |
| #647A87 on #FFFFFF | 4.491467 | A plausible slate for body text — failed by 0.008533. Displays as 4.49. |
| #767776 on #FFFFFF | 4.496170 | Displays as 4.50 — and still fails. The single most important row on this page. |
Try them yourself in the contrast checker — it opens on the #647A87 failure — or drop all four into the matrix and watch the grades change as you switch the grading mode from AA normal to AA large.
Why the unrounded rule exists
Thresholds are lines, and every line has a colour sitting just under it. If tools round 4.496 up to a pass, the effective standard silently becomes 4.495; round the display and the verdict separately and the two disagree on screen, which is worse. The standard's position is that the computed ratio is compared as computed. A tool may display two decimals — this site does — but the verdict must come from the full number. When you evaluate any contrast tool, the #767776 pair is the five-second test: if it passes AA normal text, the tool is rounding, and every other verdict it gives you is suspect by the same amount.
Ratio questions
Is 4.49 really a fail? It rounds to 4.5.
Yes, it fails. WCAG evaluates the ratio as computed, not as displayed: the success criterion asks for a contrast ratio of at least 4.5:1, and 4.491467 is less than 4.5. The worked example on this page — #647A87 on white at exactly 4.491467 — is a colour real products ship every day, failed by nine thousandths. If a checker passes it, the checker is rounding in your favour, and an auditor will not.
Why is large text allowed 3:1?
Because legibility scales with size and stroke weight: at 24px (or 18.66px bold) letterforms carry enough visual weight to remain readable at lower luminance contrast. The definition is precise and frequently misquoted — 18px bold is not large text, and neither is a 23px regular headline. Tools that classify by eye misclassify exactly the headings designers ask about.
What about AAA — should I design to 7:1?
AAA (7:1 normal, 4.5:1 large) is the enhanced level. It is a reasonable target for body text in reading-heavy products and for audiences with low vision, but many brand hues cannot reach 7:1 on both a light and a dark ground without abandoning the hue — which is information, not failure. AA is the level laws and standards reference; AAA is a design goal to take where it is reachable.