If you've ever run an accessibility audit and seen "contrast ratio fails WCAG AA" — this post explains what that actually means, how the math works, and when each threshold applies.

What is color contrast ratio?

Contrast ratio is a number between 1:1 and 21:1 that describes how different two colors appear to a human eye.

1:1 = identical colors (white on white, invisible)

21:1 = maximum contrast (black on white)

The ratio is calculated from the relative luminance of both colors — a measure of how bright a color appears to human perception, weighted for how our eyes respond to different wavelengths (we're more sensitive to green than blue, for example).

The WCAG standards

The Web Content Accessibility Guidelines (WCAG) define two levels:

AA (the baseline — required for most sites)

Element Minimum ratio

Normal text (< 18pt or < 14pt bold) 4.5:1

Large text (≥ 18pt or ≥ 14pt bold) 3:1

UI components and graphics 3:1

AAA (enhanced — harder to achieve)

Element Minimum ratio

Normal text 7:1

Large text…