WCAG Contrast Ratios Without the Guesswork

A contrast ratio compares the relative luminance of a foreground and background. The scale runs from 1:1 for identical luminance to 21:1 for black against white. The calculation uses linearized sRGB values, so it is not a simple comparison of HEX numbers.

The ratio is independent of font family and color name. The same pair of colors produces the same numerical result, while the required threshold depends on the size and weight of the text.

For normal text, WCAG level AA requires at least 4.5:1 and AAA requires 7:1. Large text requires 3:1 for AA and 4.5:1 for AAA. Under WCAG, large text generally means at least 18 point regular or 14 point bold; CSS pixels and points are not interchangeable, so avoid treating 18 px as automatically large.

Text over photography is harder to assess because the background changes from pixel to pixel. Sample the lightest and darkest relevant areas behind the lettering, not only a convenient pixel. A solid scrim, outline or text container often produces a more robust result than choosing a narrowly passing color.

Contrast does not guarantee readability. Very small type, thin strokes, motion, glare, compression and decorative fonts can still create difficulty. Color contrast also does not test whether information relies on color alone. Combine the numerical check with zoomed-out visual inspection and a color-vision review.