On this page
The ratio isn't a vibe check — it's a formula
WCAG contrast is a precise calculation, not a subjective judgment. Each color's relative luminance is computed by converting sRGB channels to linear light and weighting them (0.2126 for red, 0.7152 for green, 0.0722 for blue — green contributes far more to perceived brightness than red or blue). The contrast ratio between two colors is then (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color's luminance and L2 the darker one. The result ranges from 1:1 (identical colors) to 21:1 (pure black on pure white).
What AA and AAA actually require
WCAG 2.1's Level AA — the level referenced by most accessibility laws and procurement standards — requires 4.5:1 for normal text and 3:1 for large text (18pt+, or 14pt+ bold). Level AAA is stricter: 7:1 for normal text, 4.5:1 for large text. There's also a separate, less-known requirement (Success Criterion 1.4.11) for non-text elements like icons and UI component borders: a flat 3:1 minimum, with no AA/AAA split.
Why 4.5:1 specifically
The 4.5:1 threshold isn't a round number chosen for convenience — it comes from research on low-vision readers, roughly approximating what's needed to compensate for a person with 20/40 vision (the boundary WCAG's working group used as a benchmark for "low vision but not legally blind"). Large text gets a lower 3:1 threshold because bigger glyphs remain legible at lower contrast — the same reason large text and bold text get grouped together as one WCAG category.
Practical thresholds worth remembering
Pure black on white is 21:1 — the ceiling. Mid-gray text (#767676) on white lands almost exactly at 4.5:1, which is why that specific gray shows up constantly in accessible design systems as a "safe default" body-text color. If you're picking a brand color for body text, checking it against both a white and black background (and comparing which one wins) is the fastest way to know whether it needs a lighter or darker variant for accessible text.