Color Contrast Checker — Free WCAG 2.2 AA & AAA Accessibility Tool
Enter a foreground (text) color and a background color to instantly calculate the contrast ratio and check whether your combination passes WCAG 2.2 Level AA and AAA. No signup required, no data sent anywhere — everything runs in your browser.
Color contrast is the #1 accessibility violation on the web, affecting 83.6% of all websites (WebAIM Million 2024). Beyond ethics, it's now a legal requirement: the European Accessibility Act (EAA) came into force on June 28, 2025, and ADA lawsuits in the US are at an all-time high. This tool gives you an instant compliance check, a live text preview, color blindness simulation, and automatic accessible color suggestions when you fail.
How to Use the Color Contrast Checker
Pick your two colors, read your results.
- Set your foreground (text) color — click the color swatch to open the native picker, or type any 6-digit HEX code directly into the input field.
- Set your background color — same process for the background. Hit "Swap Colors" to reverse them instantly.
- Read the compliance results — the dark results panel shows your contrast ratio and AA/AAA pass/fail status for normal text, large text, and UI components.
- Get suggestions if you fail — the Accessibility Fix panel recommends the nearest passing color that preserves your original hue.
- Simulate color blindness — switch between Normal, Deuteranopia, Protanopia, Tritanopia, and Achromatopsia to see how your colors appear to people with different color vision.
WCAG 2.2 Color Contrast Requirements Explained
WCAG (Web Content Accessibility Guidelines) defines contrast requirements based on text size and purpose:
| Level | Normal text | Large text (≥18pt or ≥14pt bold) | UI components |
|---|---|---|---|
| AA (minimum) | 4.5:1 | 3:1 | 3:1 |
| AAA (enhanced) | 7:1 | 4.5:1 | N/A |
| Fail | < 4.5:1 | < 3:1 | < 3:1 |
Reference ratios: Black on white (#000 / #FFF) is 21:1 — the maximum possible. Medium gray #767676 on white is exactly 4.54:1, barely passing AA. Light gray #999999 on white is 2.85:1 — a common failure case.
Level AA is the current legal minimum for the ADA, EAA, Section 508, and AODA. Level AAA is the enhanced target recommended for critical content like legal text, error messages, and instructions.
Common Use Cases
- Web and app design review: Verify that text, buttons, links, and form elements meet AA before shipping. Catching contrast failures in design saves costly remediation later.
- Legal compliance audits: Use the tool as part of ADA, Section 508, and EAA compliance checks. The detailed WCAG reference table maps each metric to its pass/fail threshold.
- Dark mode verification: Enter your dark mode background and text colors to confirm the same contrast standards apply — WCAG ratios are identical for light and dark themes.
- Brand color accessibility: Check whether your brand colors work as text or UI elements, and use the accessible suggestion to find the nearest in-brand alternative that passes.
- Color blindness safety: Use the simulation to confirm a combination that passes luminance contrast is still distinguishable for users with deuteranopia (red-green) or protanopia.
Frequently Asked Questions
What is a color contrast checker?
A color contrast checker is a free tool that calculates the contrast ratio between two colors — typically a text (foreground) color and its background — and determines whether the combination meets WCAG accessibility standards. It helps designers and developers ensure content is readable for users with low vision, color blindness, or who view screens in bright environments. This tool also simulates color blindness and suggests accessible alternatives when a combination fails.
What is the WCAG contrast ratio requirement?
WCAG 2.2 Level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18pt or larger, or 14pt bold or larger). Level AAA requires 7:1 for normal text and 4.5:1 for large text. UI components like buttons, form borders, and icons must meet 3:1 against adjacent colors at Level AA. These thresholds apply equally to light-on-dark and dark-on-light combinations.
What is the difference between WCAG AA and AAA?
Level AA is the widely required legal standard for most accessibility regulations worldwide, including the ADA (US), European Accessibility Act (EU), Section 508 (US federal), and AODA (Canada). It requires 4.5:1 for normal text. Level AAA is the enhanced standard requiring 7:1 for normal text — it provides better readability for users with more severe visual impairments. Most organizations target AA; AAA is aspirational for critical or high-risk content.
Can I fail color contrast even if my colors look different?
Yes. WCAG contrast is based on relative luminance (perceived brightness), not hue. Two colors that look visually distinct — say, a bright blue and a bright green — can have nearly identical luminance values and fail the contrast check. This is especially common with medium-saturation colors and is one of the most common design mistakes. Always verify numerically, not visually.
Does passing color contrast mean my website is fully accessible?
Color contrast is an important factor, but accessibility also includes keyboard navigation, screen reader support, proper heading structure, focus indicators, alt text, and much more. Color contrast is the single most common and easiest-to-fix accessibility violation, but a passing contrast check is not a complete WCAG audit. Use this tool as part of a broader accessibility review.
What is color blindness simulation and why does it matter?
Color blindness simulation shows how your color combination appears to users with different types of color vision deficiency. The most common types are deuteranopia (affecting ~6% of men) and protanopia (~1% of men), both involving red-green confusion. WCAG contrast ratios measure luminance only — not hue differentiation. A red/green pair can pass 4.5:1 luminance contrast but still be indistinguishable to deuteranopes. Simulation reveals this gap.
How do I fix a color that fails the contrast check?
The easiest fixes are: (1) darken the text color by decreasing Lightness in HSL, (2) lighten the background, or (3) both. Use the Accessibility Fix panel — it finds the nearest passing alternative while preserving your original hue. Increasing font size to 18pt or larger also reduces the required ratio from 4.5:1 to 3:1 for large text, giving you more flexibility with brand colors.
Is there a color contrast checker for dark mode?
Yes — this tool works identically for dark mode. Enter your dark background color as the background and your light text color as the foreground. The same WCAG thresholds apply regardless of which color is lighter. Dark mode designs often use off-white text on dark gray backgrounds — verify the combination passes 4.5:1 to ensure readability.
Related Tools
- Hex Color Picker — Pick, adjust, and convert colors to HEX, RGB, HSL, and CMYK. Use it to find accessible colors before bringing them here to verify contrast.
- Color Palette Generator — Extract color palettes from images and export to CSS, Tailwind, or JSON. Pair with this checker to confirm the extracted colors meet accessibility standards.
Resources
- WebAIM Contrast Checker — webaim.org — The original online contrast checker and the reference benchmark for WCAG compliance.
- WCAG 2.2 Success Criterion 1.4.3 — w3.org — The official W3C documentation for the Contrast (Minimum) criterion, including all definitions and exceptions.
- WebAIM Million 2024 Report — webaim.org — Annual accessibility analysis of the top 1 million websites, with color contrast as the #1 reported failure.
