Contrast Checker

How to use

1. Enter a text colour and a background colour as 3- or 6-digit HEX values, or use the colour pickers.
2. Read the unrounded WCAG 2 contrast ratio and its AA, AAA, and UI-component results.
3. Review the APCA Lc value as additional, polarity-aware guidance.
4. Use the live preview and copy the result summary into a design review or ticket.

WCAG 2.2 contrast thresholds

WCAG 2.2 Success Criterion 1.4.3 requires at least 4.5:1 for normal text at AA and 3:1 for large text. Large text means at least 24 CSS px regular or approximately 18.66 CSS px bold. The enhanced AAA targets are 7:1 for normal text and 4.5:1 for large text.

For meaningful controls, icons, and graphics, Success Criterion 1.4.11 requires at least 3:1 against adjacent colours. Threshold decisions use the full calculated ratio: a value displayed as 4.50:1 can still fail if its unrounded value is below 4.5.

How the ratio is calculated

WCAG contrast uses relative luminance after converting sRGB channels to linear light. The ratio is (L lighter + 0.05) ÷ (L darker + 0.05), so opaque sRGB pairs range from 1:1 to 21:1. The visual preview is useful, but a solid-colour result does not prove that text over a photo, gradient, translucent layer, or changing state meets a requirement. Check the least favourable actual background.

APCA is a second reading, not a conformance result

APCA reports signed lightness contrast (Lc), so dark text on a light background and light text on a dark background can receive different values. This tool uses the APCA 0.1.9 reference constants. The sign indicates polarity; a larger absolute value generally means greater lightness contrast.

APCA has not replaced the WCAG 2 contrast success criteria. Use the WCAG 2 rows for present-day acceptance and compliance work, then use APCA as an additional signal when evaluating text choices.

Frequently asked questions