Color Tools

WCAG Color Contrast Checker

Check text and background colours against WCAG 2 AA and AAA contrast requirements, and get a suggested accessible colour when a pair fails.

Runs in your browser. Nothing you enter is uploaded. Last updated October 7, 2026

Text colour

Pick

Background colour

Pick

Large heading text

Normal body text should be easy to read for everyone, including people with low vision.

Small print and captions need the most contrast.

How to use

Enter the text colour and the background colour.
Read the ratio and the pass or fail result for normal text, large text and interface elements.
If it fails, use the suggested colour, which keeps the hue and adjusts lightness.

It uses the WCAG 2 relative-luminance formula to compute a ratio from 1:1 to 21:1. Translucent text colours are blended over the background first.

Sufficient contrast keeps text readable for people with low vision or colour-vision deficiencies, and for everyone reading in bright light.

AA requires 4.5:1 for normal text and 3:1 for large text (24 px, or about 18.66 px bold).
Interface components and meaningful graphics need 3:1 against adjacent colours (WCAG 1.4.11).
Check text on images and gradients at their lightest and darkest points.

What contrast ratio do I need?

For WCAG 2.1/2.2 level AA: at least 4.5:1 for body text and 3:1 for large text and UI components. Level AAA asks for 7:1 and 4.5:1.

What about APCA and WCAG 3?

WCAG 3 is still a draft. Laws and procurement rules currently reference WCAG 2, so this tool uses the WCAG 2 formula.