Contrast ratio is one of the few accessibility metrics that's fully objective — a single number, calculated the same way every time, with clear pass/fail thresholds. That precision is exactly what makes it worth understanding rather than just glancing at a green checkmark.
AA vs. AAA: What the Numbers Mean
WCAG AA is the baseline, legally-referenced accessibility standard most sites aim for: at least 4.5:1 contrast for normal text, and a relaxed 3:1 for large text (18pt and up, or 14pt bold and up). WCAG AAA is a stricter, "enhanced" level aimed at content for users with more significant visual impairments — 7:1 for normal text and 4.5:1 for large text. Most design systems target AA as the practical minimum and treat AAA as a stretch goal for critical text.
How a Contrast Ratio Is Actually Calculated
The ratio comes from each color's relative luminance — a calculated measure of how bright it is, derived from its red, green, and blue channel values using a formula that weights green more heavily than red or blue, matching how human vision actually perceives brightness. The lighter color's luminance is divided by the darker color's luminance (with a small constant added to both), producing a ratio from 1:1 (no contrast at all, identical colors) up to a theoretical maximum of 21:1 (pure black against pure white).
Why Large Text Gets an Easier Bar
Bigger, bolder letterforms are inherently more legible at lower contrast — their strokes are wide enough, and their overall shape distinctive enough, to be recognized even with less color separation from the background. That's why WCAG sets the large-text threshold lower (3:1 for AA) than the standard body-text threshold (4.5:1): the size itself is already doing some of the readability work that contrast would otherwise need to provide.
What Passing a Check Doesn't Guarantee
A passing contrast ratio confirms the color combination clears a specific, research-backed mathematical bar correlated with readability for people with low vision or common color vision deficiencies. It doesn't account for everything that affects real-world legibility, though — thin or unusual fonts, tight letter spacing, and glare on a bright screen can all still make technically-compliant text harder to read in practice.
Check Your Colors
Enter any two colors into the free Color Contrast Checker to see the exact ratio along with live AA and AAA pass/fail results.
FAQ
What's the difference between the AA and AAA thresholds? WCAG AA is the standard accessibility requirement: at least 4.5:1 for normal text and 3:1 for large text (18pt+, or 14pt+ bold). AAA is a stricter, enhanced level requiring at least 7:1 for normal text and 4.5:1 for large text.
How is a contrast ratio actually calculated? It's based on the relative luminance of each color — a measure of how much light it reflects, calculated from its red, green, and blue values with a formula that weights each channel differently, since the human eye is more sensitive to green than to blue or red. The ratio between the lighter color's luminance and the darker color's luminance (plus a small constant) produces a number from 1:1 (identical colors) up to 21:1 (pure black on pure white).
Why does large text get a lower contrast requirement than body text? Larger, bolder text is inherently easier to read at lower contrast because its strokes are wider and its shapes are more distinguishable even with less color separation from the background. WCAG accounts for this by setting a lower bar (3:1 for AA) for text at 18pt or larger, or 14pt and bold, compared to the 4.5:1 required for standard body text.
Does passing a contrast check guarantee text is readable for everyone? It guarantees the color combination meets a specific, well-tested mathematical threshold correlated with readability for people with low vision or color vision deficiencies, but it doesn't account for every factor — font choice, letter spacing, and screen glare can all still affect real-world readability even at a passing contrast ratio.