"4.5:1" shows up in every accessibility checklist and most designers can recite it without knowing where the number comes from. That's fine for passing a checklist, but understanding the ratio makes it much easier to catch a failing color pair before a tool tells you, and to know which color to move — and by how much — when one does fail.
What's actually being measured
A contrast ratio compares the relative luminance of two colors — roughly, how much light each one reflects, on a scale that treats pure black as 0 and pure white as 1. The ratio itself is: take the lighter of the two luminance values, add a small constant, divide by the darker luminance plus the same constant. The result ranges from 1:1 (identical colors, no contrast at all) to 21:1 (pure black against pure white, the maximum possible contrast).
Luminance isn't a simple average of red, green, and blue. Human eyes are far more sensitive to green than to red, and more sensitive to red than to blue, so the formula weights green heavily, red moderately, and blue lightly. That's why two colors that look similarly "bright" to the eye can still produce noticeably different contrast ratios against the same background — the calculation is modeling perception, not just pixel brightness.
Where AA and AAA come from
The Web Content Accessibility Guidelines set two tiers. AA, the baseline most sites aim for, requires at least 4.5:1 for normal text and 3:1 for large text (roughly 18pt+, or 14pt+ bold). AAA, a stricter tier, raises that to 7:1 for normal text and 4.5:1 for large text. Neither number is arbitrary — they're calibrated against research on legibility for people with low vision or common forms of color blindness, where a busy or low-contrast pairing can make text unreadable even though it looks fine to someone with typical color vision.
Large text gets a lower bar because bigger letterforms remain legible at lower contrast — the same reason a highway sign can use thinner strokes than a paperback footnote. This is also why a headline in a lighter shade can pass while body copy in that same shade fails right next to it.
Reading a result correctly
A ratio like 5.2:1 passing AA but failing AAA isn't a bug — it means the pairing is legible for most readers under most conditions, but doesn't clear the stricter bar aimed at readers who need more contrast to read comfortably. AA is the legal and practical baseline for most web content; AAA is worth reaching for in body text on content-heavy sites, but it isn't always achievable without narrowing your palette to near-black and near-white, which has its own design cost.
It's also worth remembering the ratio only measures text against its immediate background. A palette can contain two colors that pass beautifully against white but fail badly against each other — always check the actual pairing that will appear on screen, not just each color in isolation.
Fixing a failing pair
When a pairing fails, the fastest fix is usually to darken the text or lighten the background (or both) rather than swapping either color out entirely — a small luminance shift is often enough to cross the threshold without changing the color's identity. If a brand color simply can't be pushed dark enough to pass on its own, the common workaround is reserving that color for large text, icons, or accents, and using a darker neutral for body copy instead.
Test with the real pairing, not a close approximation — a five-point shift in either color can be the difference between comfortably passing AA and just missing it.