Color contrast checker (WCAG)
Check whether your text color has enough contrast with the background under the WCAG AA and AAA accessibility rules, with a live preview.
Test color contrast
Everything happens on your device: nothing is uploaded to the internet.
Large sample text
Normal sample text: accessibility helps everyone read better, on any screen.
Small text, like captions and footers.
Available in: 
Color contrast checker (WCAG): what it is for
Choose the text color and the background color to see the contrast ratio and whether it passes the WCAG accessibility criteria for normal text, large text and icons. The preview shows the text in several sizes.
It accepts hex colors (#RRGGBB or #RGB) and has a button to swap the colors.
How to use
- Choose or type the text color.
- Choose the background color.
- See the contrast and the AA and AAA levels.
When to use it
- Validating the colors of a website or app.
- Choosing button and link colors.
- Fixing Lighthouse accessibility warnings.
Frequently asked questions
What is the minimum recommended contrast?
Under WCAG level AA, normal text needs at least 4.5:1 and large text (24 px and up, or 18.66 px bold) needs 3:1. At level AAA, the minimums go up to 7:1 and 4.5:1.
Why does contrast matter?
Low-contrast text is hard to read for people with low vision or color blindness, or anyone using a phone in the sun. SEO and accessibility tools also flag this problem.
Is it really free?
Yes, 100% free. No sign-up, no subscription and no usage limits. All Tools123 tools are free and run right in your browser.