Colour Contrast Checker

The Colour Contrast Checker measures the contrast ratio between a foreground (text) colour and a background colour, then tells you exactly which WCAG accessibility levels the pair passes.

Pick two colours and you get the ratio on the familiar 1:1 to 21:1 scale, plus a clear pass or fail for each of the four conformance targets: AA for normal text, AA for large text, AAA for normal text and AAA for large text.

The ratio is computed with the WCAG 2.x formula: each colour channel is linearised from sRGB, combined into a relative luminance using the standard 0.2126 / 0.7152 / 0.0722 weights, and the lighter and darker luminances are compared with the (L1 + 0.05) / (L2 + 0.05) ratio.

That means the numbers match what audit tools and screen-reader testers report, so you can trust them in a real accessibility review.

Black on white scores the maximum 21:1; identical colours score 1:1.

Sufficient contrast is one of the most common accessibility failures on the web, and it is also one of the easiest to fix once you can see the number.

Use this when choosing a palette, checking a button against its background, or verifying that placeholder and muted text are still legible.

A live sample renders your text colour on your background so you can judge it by eye as well as by ratio.

Everything runs locally in your browser — your colours are never uploaded.