How WCAG Contrast Ratios Are Actually Calculated

Web accessibility guidelines require a minimum contrast ratio between text and its background — but that ratio isn't calculated from how "bright" a color looks to the eye; it's calculated from a specific, weighted formula.

Relative luminance: not a simple RGB average

Each color's relative luminance is calculated using a formula that weights the red, green, and blue channels unequally, because human eyes are more sensitive to green light than red, and more sensitive to red than blue. The WCAG formula linearizes each channel (correcting for how monitors display color) before applying weights of roughly 0.2126 for red, 0.7152 for green, and 0.0722 for blue — green contributes more than 3x as much to perceived brightness as red does, at equal intensity.

The contrast ratio formula

Contrast Ratio = (L1 + 0.05) / (L2 + 0.05)

where L1 is the relative luminance of the lighter color and L2 is the darker color's luminance (the +0.05 in both prevents division issues when either color is pure black). The result ranges from 1:1 (identical colors, zero contrast) up to 21:1 (pure black on pure white, maximum possible contrast).

Worked example

Dark gray text (#111111) on a white background (#FFFFFF): the white background's luminance is very close to the maximum (1.0), while the near-black text's luminance is very close to the minimum (near 0). This produces a contrast ratio close to the theoretical maximum of 21:1 — comfortably passing every WCAG threshold, since it's one of the highest-contrast combinations possible.

The actual thresholds

• WCAG AA (minimum legal/practical standard in most contexts): 4.5:1 for normal text, 3:1 for large text (18pt+ or 14pt+ bold)
• WCAG AAA (enhanced standard): 7:1 for normal text, 4.5:1 for large text

A contrast ratio of exactly 4.5:1 passes AA but fails AAA — accessibility compliance is a spectrum, not a single pass/fail line, and different contexts (government sites, healthcare, general commercial) often target different tiers.

Why two colors that "look" similarly bright can still fail

Because green is weighted so much more heavily than blue in the luminance formula, a saturated blue and a saturated green of similar perceived "brightness" to a quick glance can have meaningfully different calculated luminance values — which is exactly why a rigorous contrast calculation is necessary, rather than relying on how a color combination looks on a quick visual check.

Common mistakes to avoid

• Judging contrast by eye rather than calculating it — human perception of contrast is influenced by surrounding colors and screen brightness in ways the formula deliberately controls for
• Forgetting that contrast requirements apply to text-on-background, not decorative elements or logos, which typically have separate (or no) contrast requirements
• Assuming a color pair that passes AA automatically passes AAA — always check against the specific standard your project targets

Check any color pair with the color contrast checker, and explore related conversions with the HEX to RGB converter.