Contrast checker and fixer
Enter two colours. See the ratio, whether it passes WCAG 2.2, and the nearest colours that do.
Your colours
Hex colours such as #2A3BFF or #fff.
Result
| What it applies to | AA | AAA |
|---|
Nearest passing colours
How the pair looks with colour-vision deficiency
Contrast, explained
Contrast ratio compares the relative luminance of two colours, from 1 to 1 (identical) to 21 to 1 (black on white). WCAG sets minimums so that text and controls can be read by people with low vision, in bright light or on a poor screen.
| Content | AA | AAA |
|---|---|---|
| Normal text | 4.5 to 1 | 7 to 1 |
| Large text (24px, or 18.5px bold) | 3 to 1 | 4.5 to 1 |
| UI components and graphics | 3 to 1 | Not defined |
Logos and purely decorative text are exempt. Text over images and gradients needs a human check, because the contrast changes across the picture.
A11yMate checks every text and background pair on your WordPress site and suggests fixes for each failing one with Colour Studio.
Questions
What contrast ratio do I need?
WCAG 2.2 level AA asks for 4.5 to 1 for normal text and 3 to 1 for large text (24px, or 18.5px if bold) and for user interface components and graphics such as input borders and icons. Level AAA asks for 7 to 1 for normal text and 4.5 to 1 for large text.
How are the suggested colours worked out?
The tool converts your colours to OKLCH, a colour space where lightness behaves the way your eyes do. It keeps the hue and chroma and moves only the lightness until the ratio passes, then trims chroma if the result would fall outside the sRGB range. So a brand blue stays blue and a brand orange stays orange, just darker or lighter.
Is anything sent to a server?
No. The calculation runs in your browser. The colours are only in the page address if you press Copy link, and that is so you can share them.
Does the colour-vision simulation replace testing with people?
No. It is a quick check using standard simulation matrices. It shows how much contrast survives for common types of colour-vision deficiency, which is useful, but it is not a substitute for testing with people who have them.