WCAG Color Contrast Explained: What 4.5:1 Actually Means
Grey text on a white card looks sleek in a mockup and unreadable on a sunlit phone. Contrast rules exist because designers systematically overestimate how legible low-contrast text is. Here's how the WCAG numbers work — without the spec-speak.
The ratio, in plain terms
Every color has a relative luminance — roughly, how much light it emits, weighted for the fact that human eyes are most sensitive to green. A contrast ratio compares the luminance of your text color against your background: pure black on pure white scores the maximum 21:1; identical colors score 1:1. The formula lives in the WCAG standard, but the intuition is simple: bigger number, easier to read.
The thresholds: 4.5:1 and 3:1
WCAG Level AA — the standard most laws and audits reference — requires 4.5:1 for normal body text and 3:1 for large text (18pt and up, or 14pt bold), since bigger letterforms are legible at lower contrast. Level AAA raises the bar to 7:1 and 4.5:1 respectively. UI components like input borders and icons need 3:1 against their surroundings.
Real-world translation: mid-grey (#767676) on white is almost exactly 4.5:1 — anything lighter fails AA for body text. That trendy #999999 placeholder text? 2.85:1. Fails.
Common traps
White text on brand colors fails more often than teams expect — white on a bright orange like #FE7825 is only about 2.5:1. Flipping to near-black text usually fixes it. Text over photos and gradients must clear the ratio at the worst point, not the average. And thin font weights effectively lower contrast even when the math passes, so treat 4.5:1 as a floor, not a target.
Check in two seconds
Our Contrast Checker takes any two colors — hex, rgb(), or hsl() — and shows the exact ratio with AA/AAA pass-fail badges for normal and large text, plus a live preview rendered in your actual colors. If a pair fails, the Color Shades tool makes it easy to find a darker or lighter step of the same hue that passes.