Colour Contrast Checker (WCAG)

A contrast checker measures how distinguishable two colours are, usually text against its background, and tests the result against the Web Content Accessibility Guidelines. Low contrast makes text hard to read for people with low vision or colour deficiencies, and for everyone in sunlight on a phone.

This checker shows the ratio, pass or fail for each WCAG 2.2 level, a live preview with large text, body text and a button outline, and the closest passing alternative when your text colour falls short. Colours are kept in the link so you can send a result to a designer.

Contrast ratio compares the relative luminance of two colours, from 1:1 (identical) to 21:1 (black on white). WCAG 2.2 level AA needs 4.5:1 for normal text and 3:1 for large text (24 px, or 18.66 px bold) and for icons, borders and other UI parts. AAA raises text to 7:1 and 4.5:1.

Ratios are truncated, not rounded, as the guidelines require: 4.499 is a fail even though it rounds to 4.5. Semi-transparent text colours are blended with the background first. The suggestion keeps the hue and saturation and changes only lightness.