WCAG Contrast Checker
Ensure your colors meet Web Content Accessibility Guidelines (WCAG) standards.
What Is the WCAG Contrast Checker?
The WCAG Contrast Checker is a free tool that instantly calculates the contrast ratio between any two colors and tells you whether they pass WCAG 2.1 accessibility standards. Pick a text color and a background color, and you get real-time pass/fail results for all four compliance thresholds — AA Normal, AA Large, AAA Normal, and AAA Large — alongside a live preview showing exactly how your text looks on that background.
Low-contrast text is the single most common accessibility failure on the web. It affects over a billion people worldwide who live with visual impairments, plus anyone reading on a bright screen or a dimmed display. WCAG 2.1 defines minimum contrast ratios that designs must meet, and failing those thresholds isn't just bad UX — it's a legal liability under the ADA and Section 508. This tool lets you catch problems before they ship.
Everything runs in your browser with zero data sent to any server. If you're building a complete color system, test your palette combinations here first, then use the Open Graph tag generator to make sure your accessible pages also look great when shared on social media.
Live Preview
Headline Text
This is how your body text will look. Ensure readability.
Contrast Ratio
WCAG 2.1 Level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text.
Level AAA requires at least 7:1 for normal text and 4.5:1 for large text.
What is WCAG Contrast Ratio?
WCAG contrast ratio is a numerical value that measures the difference in luminance between two colors—typically text and its background. The ratio ranges from 1:1 (no contrast, identical colors) to 21:1 (maximum contrast, pure black on pure white). The formula accounts for how humans perceive brightness differently across red, green, and blue channels, weighting green most heavily because our eyes are most sensitive to it. A higher ratio means better readability and easier visual distinction. When you pick colors from a color palette, running each text-background pair through a contrast checker ensures nothing slips through the cracks.
Why Accessibility Matters in UI Design
Accessibility is not optional—it is a fundamental requirement of good design. Globally, over 1 billion people live with some form of visual impairment. Low contrast text is the most common accessibility failure on the web, affecting not only users with visual disabilities but also people viewing screens in bright sunlight, older adults with declining vision, and anyone using a low-brightness setting to save battery. Beyond ethics, accessibility is a legal requirement in many jurisdictions. The Americans with Disabilities Act (ADA), Section 508 in the US, and the European Accessibility Act all reference WCAG standards. Non-compliance can result in lawsuits, fines, and reputational damage. Designing with accessible contrast from the start is far cheaper than retrofitting it later. And it's not just your main site — make sure the text on your social media previews meets contrast minimums too, since those cards represent your brand across every platform.
WCAG AA vs AAA Explained
WCAG 2.1 defines three conformance levels: A (minimum), AA (standard), and AAA (enhanced). Level A is so lenient that it is practically useless for real-world text readability. Level AA is the widely accepted baseline—most organizations, governments, and laws target AA compliance. It requires a 4.5:1 contrast ratio for normal text (under 18pt or under 14pt bold) and 3:1 for large text (18pt or 14pt bold and above). Level AAA is the gold standard: 7:1 for normal text and 4.5:1 for large text. AAA is recommended where possible but is often impractical for large-scale designs because it severely limits your color choices, especially for brand colors or decorative elements. Most teams aim for AA across the board and push for AAA on critical content like primary body text and navigation.
Non-Text Elements
WCAG also applies to non-text elements like icons, buttons, form input borders, charts, and graphical components. These require a minimum 3:1 contrast ratio against adjacent colors. This ensures that a submit button is distinguishable from its background, or that an error icon is visible next to a form field. Many designers focus only on text contrast and overlook icons and UI components—a common audit failure.
How to Use This Contrast Checker Tool
Using this tool is simple. Pick your text color and background color using the two color pickers at the top. The tool instantly calculates the contrast ratio and displays your pass/fail status for all four WCAG thresholds: AA Normal, AA Large, AAA Normal, and AAA Large. The live preview box shows exactly how your text will look with the chosen combination. Use the Switch button to swap foreground and background colors, or hit Random to test arbitrary combinations. If you are working with specific HEX codes from a color converter, you can also type them directly into the native color picker by clicking the HEX value field.
Best Practices for Readable UI Design
Start by choosing your background color first, then select text colors that meet at least AA contrast against it. Avoid placing text over images or gradients without a solid or semi-transparent overlay—these variable backgrounds make contrast unpredictable. For dark mode interfaces, do not simply invert your light mode colors; test contrast separately because perception changes on dark surfaces. A grey that works on white may fail on dark grey. Maintain a minimum of 4.5:1 for body text and 3:1 for large headings and interactive elements. If you're working with established brand colors, use the brand color extractor to pull exact HEX values and test them here. When building a full color system, pair this checker with proven palette-building strategies to create schemes that are both beautiful and accessible from the start.
Frequently Asked Questions
Q: What is WCAG contrast ratio?
A: It is a numerical measure of the luminance difference between two colors, ranging from 1:1 to 21:1. Higher ratios mean better readability.
Q: What is an acceptable contrast ratio?
A: WCAG AA requires 4.5:1 for normal text and 3:1 for large text. AAA requires 7:1 for normal text and 4.5:1 for large text.
Q: How to pass WCAG AA and AAA?
A: Verify every text-background pair meets the minimum ratio using a contrast checker. Adjust colors until all combinations pass the required threshold.
Q: Why is contrast important in UI?
A: Low contrast makes text unreadable for users with visual impairments, causes eye strain, increases bounce rates, and creates legal compliance risks.
Q: Does WCAG apply to non-text elements?
A: Yes. Icons, buttons, input borders, and graphical objects need at least 3:1 contrast against adjacent colors to be distinguishable.
Who Uses This Contrast Checker?
UI Designers
Test color systems and design tokens before handoff. Catch contrast failures early when fixing them costs minutes instead of sprints.
Front-End Developers
Verify that implemented colors meet accessibility requirements. Confirm your CSS variables pass before pushing to production.
QA & Accessibility Auditors
Quickly test color combinations during manual audits. Pair this with a full page SEO audit for comprehensive compliance coverage.
Content Teams
Ensure blog posts, landing pages, and email campaigns are readable for every visitor — not just those with perfect vision on calibrated screens.
Product Managers
Validate that new features meet compliance standards before release. Avoid accessibility-related launch blockers and post-release hotfixes.
Students & Educators
Learn WCAG contrast requirements interactively. See the math come alive by testing real color pairs and understanding which thresholds apply where.
Benefits of Using a Contrast Checker
Instant Feedback
No waiting, no server calls. The contrast ratio updates the moment you pick a color, so you can iterate fast without breaking flow.
All Four Thresholds at Once
See AA and AAA results for both normal and large text simultaneously — no need to check each level separately.
Live Text Preview
Don't just trust the number — see your actual text rendered on the actual background. A ratio can pass while still looking off in context.
Privacy First
Your color choices never leave your browser. No data is sent to any server, ever. Safe for proprietary design systems and brand colors.
Legal Compliance
Avoid ADA and Section 508 violations by verifying contrast before launch. Fixing accessibility retroactively is far more expensive than testing upfront.
Free and Unlimited
No sign-up, no usage caps, no paywalls. Check as many color pairs as you need, as often as you need. That's the whole point.
Why I Built This Tool
I once failed an accessibility audit because of a single shade of grey. The text looked perfectly fine on my calibrated monitor, but it didn't meet AA contrast against its background — and I had absolutely no idea until the audit report came back. That one finding cost more time to fix than the entire feature had taken to build.
After that, I started checking contrast ratios manually using the WCAG formula and a calculator, and it was genuinely tedious. The online checkers I found either buried the results in ads, only showed one compliance level at a time, or required me to create an account just to check two colors. I wanted something dead simple: pick two colors, see all four thresholds immediately, and get a live preview of how the text actually reads. No accounts, no server calls, no friction.
This is one of the free tools I maintain at DevPalettes for developers and designers who just want things to work. If you're running a broader audit on your site, the SEO page analyzer can catch issues beyond contrast, and the meta tag generator handles the code side once your accessible design is ready to ship.