Validating a web design
Checking text and background pairs before building avoids reworking the palette when someone spots the problem.
Contrast checker
Check whether two colors meet WCAG contrast.
🔒 This file is processed in your browser. It is never uploaded anywhere.
…
What it is for
The contrast between text and its background determines whether it can be read comfortably. It is measured as a numeric ratio between the luminance of both colours, running from 1:1 when they are identical up to 21:1 for pure black on pure white.
The WCAG guidelines, the international reference for web accessibility, set the thresholds. For normal-sized text, 4.5:1 is the minimum for level AA, which is what is usually required and what accessibility legislation in many countries mandates for public-sector websites. Level AAA, stricter, asks for 7:1.
This is not merely about ticking a box. The light grey on white that looks so elegant on the designer’s screen becomes illegible in sunlight, on a phone with the brightness down, or for anyone with tired eyes, which is a far larger group than people tend to assume.
How it works
- Enter the text color and the background color you want to check.
- The tool instantly calculates the contrast ratio between the two.
- Check whether it meets the WCAG AA and AAA accessibility levels.
When to use it
Meeting regulations
Public-sector sites and many tenders require level AA. The check documents that you comply.
Text over images
A headline over a photo needs checking against the lightest part of that photo, which is where it reads worst.
Practical tips
- Large bold text has a more lenient threshold of 3:1, but it is worth not cutting it fine if you can avoid it.
- Secondary text in grey is the most frequent failure: it usually falls below 4.5:1 without anyone noticing.
- Check link and button states as well, not just body text.
- If a pair falls short, darkening the text is usually enough without changing the background colour.
Frequently asked questions
What ratio do I need for it to be accessible?
For normal text, a minimum of 4.5:1 meets level AA (the usual standard) and 7:1 meets the stricter level AAA.
Why does color contrast matter?
Low contrast makes text hard to read for people with low vision and makes your site less accessible and harder to read for everyone, especially outdoors or on low-quality screens.