Color contrast is one of the few accessibility requirements you can check with pure math — no screen reader, no user testing, just two colors and a formula. That makes it one of the easiest wins in accessible design, and one of the most commonly failed checks in real audits. Here's what the numbers actually mean and how to use them.
What "contrast ratio" measures
A contrast ratio compares the relative luminance (perceived brightness) of two colors. It's expressed as a ratio from 1:1 (identical colors, no contrast at all) up to 21:1 (pure black on pure white, the maximum possible).
The formula, per the WCAG 2.1 spec: each color's sRGB channels are gamma-corrected into "relative luminance," then the ratio is calculated as (lighter luminance + 0.05) ÷ (darker luminance + 0.05). The +0.05 accounts for ambient light reflecting off a screen even in a "black" area, so the ratio never divides by zero.
You don't need to compute this by hand — but knowing what's happening under the hood explains why two colors that look similarly bright to your eye can still produce very different contrast numbers, since human brightness perception doesn't map linearly onto RGB values.
The thresholds that actually matter
WCAG defines two conformance levels, each with different minimums for normal versus large text:
| Normal text | Large text (18pt+, or 14pt+ bold) | |
|---|---|---|
| AA (baseline) | 4.5:1 | 3:1 |
| AAA (enhanced) | 7:1 | 4.5:1 |
AA is the level referenced by most accessibility laws and standards (WCAG 2.1 AA is the most commonly cited legal baseline internationally). AAA is a stricter, aspirational target — good to hit where you can, but not usually a hard requirement.
Large text gets a lower bar because bigger, bolder strokes stay legible at lower contrast — the letterforms themselves are easier to distinguish regardless of color difference.
Common failure patterns
A few color choices fail contrast checks more often than designers expect:
- Light gray text on white — a popular "subtle" style for captions or secondary text that frequently lands well below 4.5:1.
- Brand colors used as text — a vivid brand blue or purple often looks great as an accent but fails as body text color on a white background, since saturated mid-tone colors tend to have middling luminance.
- White text on a light-colored button — common in flat, minimal UI design, and a frequent AA failure since the button background often isn't dark enough.
- Placeholder text in form fields — browsers default placeholder text to a light gray that regularly fails contrast checks, and it's easy to forget it needs checking at all since it's not "real" content.
Fixing a failure without ruining the design
You don't need to abandon a color to fix its contrast — usually a modest adjustment to lightness is enough:
- Darken text on a light background, or lighten text on a dark background — even a 10–15% shift in lightness can be the difference between failing and passing.
- Reserve your most saturated brand colors for large elements (buttons, headings, icons) where the lower "large text" threshold applies, and use a darker or lighter variant for body copy.
- Increase weight or size if you're right at the boundary — bumping text into "large text" territory relaxes the required ratio.
Check your own colors
Our Color Contrast Checker computes the exact ratio for any two colors, shows pass/fail against all four thresholds at once, and renders a live preview so you can see the actual text alongside the numbers — all client-side, nothing uploaded.