Contrast Ratios Explained: The Technical Foundations of Accessible Color

The WCAG contrast ratio formula computes the ratio between the relative luminance values of two colors. Relative luminance is a perceptually weighted measure of how much light a color reflects, scaled so that pure white has luminance 1.0 and pure black has luminance 0.0. The weighting reflects the different sensitivities of the human visual system to red, green, and blue light: green contributes approximately 72% of perceived luminance, red approximately 21%, and blue approximately 7%. This is why a vivid green and a vivid blue of identical raw brightness look dramatically different in luminance — the green appears much lighter because the visual system is most sensitive to green wavelengths. The contrast ratio formula is (L1 + 0.05) / (L2 + 0.05) where L1 is the lighter color's luminance and L2 is the darker. The 0.05 offset prevents division by zero at pure black and slightly models ambient light conditions. The resulting ratio ranges from 1:1 (identical colors) to 21:1 (pure black on pure white). WCAG AA requires 4.5:1 for normal text and 3:1 for large text (18pt or 14pt bold). WCAG AAA requires 7:1 for normal text and 4.5:1 for large text. The most important practical implication of the luminance model is that saturation and hue have indirect effects on contrast — they matter only insofar as they affect luminance. A highly saturated cobalt blue has a luminance of approximately 0.07, close to dark gray. Placing white text on vivid blue easily passes 4.5:1. The same cobalt blue placed against a very dark navy at luminance 0.02 produces a contrast of roughly 4.4:1 — technically failing AA for normal text even though both colors appear dark to casual inspection. The math catches cases that informal visual judgment misses. Calibrating color adjustments to hit contrast targets requires understanding which knob to turn. In HSL terms, lightness is the most direct control: increasing the lightness of a dark background increases its luminance and reduces contrast with a dark text color, while increasing the lightness of a dark text color increases its luminance and increases contrast with a light background. Hue adjustments can shift luminance significantly — rotating from blue toward yellow increases luminance because yellow has much higher weighted luminance than blue. Saturation adjustments in the mid-range have minimal luminance effect; saturation at the extremes (very low or very high) affects luminance more significantly. The emerging APCA (Advanced Perceptual Contrast Algorithm) standard addresses several known limitations of the WCAG formula. WCAG computes a single ratio that treats text-on-background and background-on-text identically, but human perception is not symmetric — dark text on a light background is more legible than light text on a dark background at equivalent contrast ratios. APCA produces separate scores for the two directions and adjusts for context factors like font size and weight with more precision. While APCA is not yet required by WCAG 3.0 (still in development), designers working on precision accessibility work should understand both systems.