Free tool

Contrast Checker

Type a text and a background colour in any form — hex, rgb(), hsl() or a colour name — and I'll tell you whether the pair clears WCAG AA / AAA.

—
Large heading sample Body text — the quick brown fox jumps over the lazy dog. Small print at 13 pixels.
AA4.5:1
Normal text
AA3:1
Large text
AAA7:1
Normal text
AAA4.5:1
Large text
UI3:1
Icons & borders

How is it calculated?

The contrast ratio is the ratio of two colours' brightness — more precisely, their relative luminance. It runs from 1:1 to 21:1, and the WCAG 2.x spec defines exactly how to work it out.

1

Relative luminance

First each colour channel is converted back out of the sRGB gamma (linearised), then the three channels are added up with weights. Green carries the largest weight because the human eye is most sensitive to it — which is why a bright yellow looks far lighter than a blue of a similar value.

L = 0.2126·R + 0.7152·G + 0.0722·B
2

The contrast ratio

Divide the lighter colour's luminance by the darker one's. The 0.05 in the formula approximates ambient light and screen imperfections, which caps the maximum ratio at 21:1.

ratio = (Llight + 0.05) / (Ldark + 0.05)
3

Why is yellow a problem?

Yellow is an especially tricky colour. White text on a bright yellow background (#f5a524) gives only ~2:1 — failing accessibility requirements. The same yellow with dark text reaches ~9:1. Yellow is already a light colour, so light text has little headroom left to stand out.