WCAG Color Contrast Explained Simply

WCAG contrast requirements are often cited but rarely explained in terms that make intuitive sense. A "4.5:1 contrast ratio" sounds precise, but what does it actually mean for your design choices? This guide explains the numbers in practical terms.

What Is a Contrast Ratio?

A contrast ratio compares the relative luminance of two colors, luminance being how much light a color appears to emit when displayed on screen. White has the highest luminance (1.0) and black has the lowest (0.05). The ratio is calculated as (lighter + 0.05) / (darker + 0.05).

White text on a black background achieves the maximum possible ratio: 21:1. Black text on a white background achieves the same. At the other extreme, two colors of the same luminance have a ratio of 1:1, completely invisible against each other.

What 4.5:1 Looks Like in Practice

The WCAG AA standard (4.5:1 for normal text) represents the minimum difference in luminance at which most people with low vision can still reliably distinguish text from its background under normal conditions. It is not a generous standard, text at exactly 4.5:1 is readable but not comfortable for extended reading.

For comparison: black on white is 21:1. Dark navy on white (e.g., #1E3A5F on #FFFFFF) is about 11:1. A medium blue (#3B82F6) on white is about 3.5:1, it fails WCAG AA for normal-size body text. Lowering the blue value to #1D4ED8 brings it to 5.9:1, passing AA.

When to Target AAA Instead of AA

WCAG AAA (7:1 for normal text) is worth targeting in contexts where users will read for extended periods: long-form articles, documentation, news sites, educational content. For UI chrome (labels, metadata, navigation items), AA is sufficient.

The practical difference: black text (#0F172A) on warm off-white (#FFFDF7) achieves about 16:1, well above AAA. Standard body text in this combination is highly comfortable for long reading sessions.