Contrast Checker: Instantly Test and Fix Your WCAG Color Ratios
Good design is accessible design. The foundation of digital accessibility starts with a simple but critical element: color contrast. Get it right, and you create clarity for everyone. Get it wrong, and you exclude millions of users and risk legal non-compliance.
Use the free AChecker Contrast Checker below to get an instant pass/fail result, then read on to understand the rules, fix common issues, and ensure your digital products are compliant and usable for all.
Color Contrast Checker
Live Preview
Normal text (16px) - The quick brown fox jumps over the lazy dog.
Normal text bold (16px) - The quick brown fox jumps over the lazy dog.
Large text (24px) - The quick brown fox jumps.
Large text bold (18px+) - The quick brown fox jumps.
#000000#FFFFFFComplete Results
What Is a Color Contrast Checker?
A color contrast checker is a tool that measures the difference in perceived luminance (or brightness) between two colors: a foreground color (like text or an icon) and its background. It calculates this difference as a ratio, such as 4.5:1. This ratio is then compared against the standards set by the Web Content Accessibility Guidelines (WCAG) to determine if there is enough contrast for people with visual impairments to read and interact with your content.
Important: WCAG does not permit rounding. A ratio of 4.499:1 is a failure.
How to Use the AChecker Contrast Checker: A Step-by-Step Guide
Our tool gives you actionable results in under a minute. Here's how to use it for text, user interface (UI) components, and graphics.
Input Your Foreground and Background Colors
Use the color pickers or enter the HEX or RGB values for the two colors you want to test. For example, test your primary button text color against the button's background color.
Select Text Size and Font Weight
WCAG has different requirements for normal and large text. Select the correct option to get an accurate result.
What is "Large Text"? Text that is at least 18pt (approximately 24px) or 14pt (approximately 18.7px) and bold.
Interpret the Pass/Fail Results
The tool will instantly show you the contrast ratio and whether it passes or fails WCAG Level AA and the stricter Level AAA. For most legal and commercial purposes, Level AA is the target standard.
Check Non-Text Elements (Icons, Borders, Charts)
Contrast isn't just for text. Use the "UI Components" mode to check important non-text elements against the 3:1 ratio. This includes borders of input fields, checkmarks, slider thumbs, chart segments, and focus indicators.
Understanding WCAG Contrast Ratios in Detail
The numbers aren't arbitrary. They are based on extensive research into human vision and readability detailed in the Web Content Accessibility Guidelines.
| Conformance Level | Normal Text (<18pt or <14pt bold) | Large Text (18pt+ or 14pt+ bold) |
|---|---|---|
| WCAG AA | 4.5:1 | 3:1 |
| WCAG AAA | 7:1 | 4.5:1 |
Beyond Text: The 3:1 Rule for Non-Text Contrast
Introduced in WCAG 2.1, Success Criterion 1.4.11 Non-text Contrast was a game-changer. It mandates a 3:1 contrast ratio for user interface components (like input borders and checkboxes) and essential parts of graphics (like bars in a bar chart).
A Practical Guide to Fixing Contrast Failures
So you've found a color combination that fails. Don't panic. You can often fix it without a complete brand redesign.
How to Adjust Colors Without Breaking Your Brand
Adjust Lightness
This is the most effective fix. Keep the hue and saturation the same, but make the lighter color lighter or the darker color darker.
Use an Outline or Shadow
For text on a busy image or gradient, adding a subtle but high-contrast text-shadow can make it readable.
Add a Background Layer
For buttons or callouts with low-contrast brand colors, place them inside a container with a compliant background.
Increase Font Weight
Bumping text up from normal to bold can significantly improve legibility, even if it doesn't change the contrast ratio itself.
Mastering Edge Cases: Gradients, Overlays, and States
Why Contrast Matters: Global Accessibility Laws at a Glance
Digital accessibility is not just a best practice; it's a legal requirement in most parts of the world. Failing to meet WCAG contrast standards can expose organizations to lawsuits and fines. While laws vary, they almost universally point to WCAG 2.1 Level AA as the benchmark.
USA: DOJ Title II and Section 508
In the US, Section 508 requires federal agencies to follow WCAG. For state and local governments, a 2024 Department of Justice rule formally adopted WCAG 2.1 AA under the Americans with Disabilities Act (ADA).
EU, UK, Canada, and Australia
Across the European Union, the UK, Canada, and Australia, regulations for public sector bodies and increasingly for the private sector are all harmonized with the WCAG 2.1 AA standard. Meeting this level is the safest path to global compliance.
The Future of Contrast: A Quick Look at APCA
You may hear about the Advanced Perceptual Contrast Algorithm (APCA). It's a new method for calculating contrast that is a candidate for the future WCAG 3.0. However, for now, APCA is not the legal standard. All current laws and regulations are based on the WCAG 2.x contrast ratio algorithm. This tool uses the official WCAG 2.x formula.
Frequently Asked Questions about Contrast Checking
Your Next Step: Go Beyond Contrast with a Full AChecker Audit
Perfecting your color contrast is a huge step toward an accessible website. But it's just one piece of the puzzle.
A truly accessible experience also requires keyboard navigability, proper alt text for images, semantic HTML, and much more. Use our full Website Accessibility Checker to run a comprehensive audit.