FREE TOOL
Contrast checker
Enter a text color and a background color to see whether they are readable together. If they aren't, you get a suggested fix.
Large heading text
Normal body text looks like this. Is it easy to read?
Button border| AA | AAA | |
|---|---|---|
| Normal text | ||
| Large text | ||
| Icons and borders | n/a |
WHAT IT DOES
About this tool
Test the contrast ratio of your text and background colors against WCAG 2 AA and AAA, with a live preview and suggested colors that pass.
Everything runs right in your browser: your text and files are never uploaded or stored.
QUESTIONS
Frequently asked questions
What contrast ratio do I need?
WCAG level AA requires at least 4.5:1 for regular text and 3:1 for large text (roughly 24 px, or 19 px bold), as well as for icons and form field borders. Level AAA raises the bar to 7:1 and 4.5:1.
Why is contrast important?
Low-contrast text is hard to read for people with poor eyesight, for older visitors and for anyone looking at a phone in bright sun. Many countries also require accessible contrast on public and commercial websites.
How does the suggestion work?
If a pair fails, the tool keeps the hue of your text color and darkens or lightens it until it meets AA, so the fix stays close to your original design.
06 / LET'S GET ACQUAINTED
TELL US
WHAT YOUR
BUSINESS NEEDS
Describe the task. Together we'll
work out the next step.