WCAG color contrast checker
Choose your text and background colors and instantly get the contrast ratio and whether it meets the AA and AAA levels of the WCAG accessibility guidelines. If it fails, the tool suggests a similar color that passes. It all happens in your browser.
Processed 100% in your browser
–
Large: 24 px or more, or 18.66 px bold.
Sample heading
This is how the text reads with your colours. Good contrast helps everyone, including people reading in sunlight or with tired eyes.
Ctrl + Enter runCtrl + C copy result
How to use
- 1Type or pick the text and background colors (hex, rgb, hsl or name).
- 2Look at the contrast ratio and the AA and AAA results.
- 3Check the preview with your colors.
- 4If it fails, click “Use” on the suggested alternative.
Use cases
- Check that your site’s text is readable for people with low vision.
- Validate a brand palette before handing it over.
- Meet the accessibility requirements set for public and commercial sites.
- Pick a button color that stands out from its background.
Frequently asked questions
What minimum contrast does WCAG require?
Level AA: 4.5:1 for normal text and 3:1 for large text and UI components. Level AAA: 7:1 for normal text and 4.5:1 for large text.
What counts as large text?
Text of 24 px or more, or 18.66 px or more in bold (roughly 18 and 14 points). A lower contrast is accepted for it.
What if my color is transparent?
The tool first blends it with the background to get the color that is actually seen, then measures the contrast.
Are there exceptions to the rule?
Yes: decorative text, logos and disabled elements are not required to comply, although it is still good for them to be readable.