Color Contrast Checker
Test your color combinations against WCAG 2.1 accessibility guidelines. Ensure your designs are readable for users with visual impairments.
Select Colors
Preview
Large Text (24px bold)
Normal text (16px) - The quick brown fox jumps over the lazy dog.
Small text (14px) - Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Frequently Asked Questions
What contrast ratio do I need to pass WCAG?
For AA, body text needs 4.5:1 and large text (18pt, or 14pt bold) needs 3:1. For AAA those rise to 7:1 and 4.5:1. Interface components and meaningful graphics need 3:1 against what is next to them.
Does this cover the European Accessibility Act?
Contrast is one requirement among many. The EAA points at EN 301 549, which adopts WCAG 2.1 level AA, so passing AA contrast is necessary but not sufficient on its own.
Is the Color Contrast Checker free to use?
Yes. Every tool on this site is completely free, with no account, no signup, and no paid tier to upgrade to.
Do I need to install a browser extension or any software?
No. The Color Contrast Checker runs online, in the browser you already have. It works the same on desktop and mobile, and there is nothing to download, install, or add to Chrome.
Related Tools
Related Reading
Why Color Contrast Matters
Color contrast is essential for web accessibility. Poor contrast makes content difficult or impossible to read for users with visual impairments, including those with color blindness or low vision. WCAG guidelines ensure your content is accessible to everyone.
WCAG 2.1 Guidelines
The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios for text content. Level AA is the standard requirement for most websites, while Level AAA provides enhanced accessibility for users with more severe visual impairments.
Understanding Contrast Ratios
Contrast ratio is expressed as a ratio like 4.5:1, where the first number represents the relative luminance of the lighter color and the second represents the darker color. Higher ratios mean more contrast and better readability.
Legal Requirements
Many countries have laws requiring web accessibility. In the US, Section 508 and ADA requirements often reference WCAG standards. In the EU, the Web Accessibility Directive requires WCAG 2.1 Level AA compliance for public sector websites.
Quick Tips:
- • Always test both dark-on-light and light-on-dark combinations
- • Don't rely solely on color to convey information
- • Test with real users who have visual impairments when possible
- • Consider color blindness - about 8% of men have some form
- • Use browser extensions to simulate color vision deficiencies
Need Help With Accessibility?
We can help ensure your website meets WCAG accessibility standards. From color choices to semantic HTML, we'll make your site accessible to everyone.