Color contrast is one of the most commonly overlooked accessibility requirements in web development — and one of the easiest to fail accidentally. You pick a beautiful grey text on a white background, it looks fine on your calibrated monitor, and then someone with low vision or a washed-out phone screen can't read it at all.

This post covers how contrast ratios work, what WCAG requires, and how to check your colors before they ship.

What Is a Contrast Ratio?

The contrast ratio between two colors is a number from 1:1 (no contrast — same color) to 21:1 (maximum contrast — black on white). It is calculated from the relative luminance of each color, which is a perceptual measure of how bright a color appears to the human eye.

The formula is:

contrast ratio = (L1 + 0.05) / (L2 + 0.05)

Enter fullscreen mode

Exit fullscreen mode

where L1 is the luminance of the lighter color and L2 is the luminance of the darker one.…