Why WCAG Contrast Ratios Aren't Just About Brightness

It's not a simple lightness comparison

It's tempting to assume contrast is just "how different are these two colors' brightness levels," but the WCAG formula is more specific than that: it's built on relative luminance, a calculation that weights red, green and blue channels differently based on how the human eye actually perceives brightness — green contributes far more to perceived brightness than blue does, for instance.

The formula, in plain terms

Each color channel is first "linearized" (undoing the gamma correction built into how colors are stored digitally), then combined using fixed weights: roughly 21% red, 72% green, and 7% blue. That weighted sum is the relative luminance. The contrast ratio between two colors is then (lighter luminance + 0.05) divided by (darker luminance + 0.05), producing a number from 1 (identical) to 21 (pure black against pure white).

Why the thresholds are 4.5, 3, and 7

WCAG 2.x sets 4.5:1 as the minimum for normal text at level AA, relaxes that to 3:1 for large text (18pt+, or 14pt+ bold) since bigger text is inherently easier to read at lower contrast, and raises both bars for the stricter AAA level (7:1 and 4.5:1 respectively). These specific numbers came from research into readability for people with moderately low vision, and they're now the baseline most accessibility audits and several countries' legal accessibility requirements are built around.

Try it yourself

Our Color Contrast Checker runs this exact WCAG formula on any two colors and shows you pass/fail results for both AA and AAA at a glance.