Free WCAG Color Contrast Checker
Check any foreground and background color pair against WCAG 2.1 AA and AAA contrast ratios.
An easier way to check color contrast on live pages
Use our free Chrome extension to pick any two colors straight off a live page and see the contrast ratio instantly.
Add to Chrome for free
Why color contrast matters
For millions of people with visual impairments, including those who are blind, have low vision, or experience color blindness, the way colors are used on a website can make the difference between a smooth experience and a frustrating one.
When text blends into its background or buttons lack sufficient contrast, important content and controls can become difficult or impossible to see.
Color contrast is an essential part of digital accessibility. Following the Web Content Accessibility Guidelines (WCAG) ensures that your content is not only compliant but also truly usable for everyone.
WCAG Contrast Requirements
Specifically for color usage, WCAG defines minimum contrast ratio requirements to make text readable against its background. These are grouped into two main levels:
Level AA (standard accessibility)
At least 4.5:1 contrast for normal text, and 3:1 for large text (18pt+ or 14pt bold). This is the minimum recommended standard for most websites.
Level AAA (enhanced accessibility)
At least 7:1 contrast for normal text, and 4.5:1 for large or bold text. This level is typically reserved for content that must meet the highest standards of accessibility.
How this tool helps
Our Color Contrast Checker makes it easy to test whether your color combinations meet these standards. With a quick check, you can:
- Ensure text remains readable for users with low vision or color blindness.
- Support an inclusive design that welcomes all visitors.
- Move your site closer to WCAG compliance without guesswork.
Designing with contrast in mind not only helps those with visual challenges but also improves readability and user experience for everyone, from users on low-quality screens to those browsing in bright sunlight.
Frequently asked questions
Color contrast is the difference in brightness between a text color and its background, measured as a ratio from 1:1 (identical, unreadable) to 21:1 (maximum, highly legible).
Good color contrast keeps text readable for everyone, especially people with low vision or color blindness. Without enough contrast, text becomes hard or impossible to read.
Level AA requires 4.5:1 for normal text and 3:1 for large text (18pt+, or 14pt bold). Level AAA requires 7:1 and 4.5:1, respectively.
Yes. WCAG requires a minimum 3:1 for meaningful icons, buttons, form borders, and focus indicators.
Use this WCAG color contrast checker or the WebYes Chrome Extension. Enter the hex codes for your foreground and background colors, or use the color picker tool to select them directly off a live page.
Yes, this tool is completely free to use. You can test unlimited foreground and background color pairs without creating an account.
