The WCAG Contrast Ratio Formula, Explained Step by Step
WCAG contrast ratios aren't a percentage or a simple color difference — they come from a specific formula involving each color's relative luminance. Here's exactly how the number your checker shows you gets calculated, so you understand what's happening behind the ratio.
1The contrast ratio formula
The WCAG 2.x contrast ratio formula, defined in the spec, is:
L1 is the relative luminance of the lighter color, L2 is the relative luminance of the darker color, and 0.05 is a fixed offset the spec adds to both to avoid dividing by numbers close to zero. The result ranges from 1:1 (identical colors, no contrast) to 21:1 (pure black on pure white, maximum contrast).
2What "relative luminance" actually means
Relative luminance is a measure of how bright a color appears to the human eye — and critically, it's not a simple average of the RGB values. The eye is far more sensitive to green than to red, and more sensitive to red than to blue, so the formula weights each channel differently:
Before that weighting is applied, each channel (R, G, B) is first converted from its 0–255 value into a "linearized" 0–1 value, correcting for how monitors display gamma-encoded color. That linearization step is why you can't just eyeball luminance from a hex code — two colors that look similarly bright can have meaningfully different relative luminance once gamma-corrected.
3A worked example
Take white text (#FFFFFF) on a blue button (#3B82F6):
| 1. Linearize each channel | White → R,G,B = 1.0, 1.0, 1.0 · Blue → R,G,B ≈ 0.02, 0.20, 0.90 |
| 2. Apply luminance weights | L(white) = 1.0 · L(blue) ≈ 0.21 |
| 3. Plug into the ratio formula | (1.0 + 0.05) / (0.21 + 0.05) ≈ 4.03:1 |
This is a good example of why the formula matters in practice: the ratio lands right at the edge between "fine for a large heading" and "fails for body text" — a difference you can't reliably judge by eye.
4The thresholds this ratio gets compared against
| Level | Normal text | Large text (18pt+/14pt+ bold) |
|---|---|---|
| AA | 4.5:1 | 3:1 |
| AAA | 7:1 | 4.5:1 |
You don't need to run this formula by hand — paste any two colors into our Contrast Checker and it calculates the ratio and pass/fail status against both levels instantly.
Skip the math — calculate any ratio instantly.
Enter two colors and get the exact ratio plus AA/AAA pass status, right in your browser.