Color Contrast Checker
Check WCAG 2.2 AA & AAA compliance instantly. Get auto-fix suggestions and color blindness simulation.
Free forever · No account needed
HEX · rgb(26,26,46) · hsl(240,29%,14%)
HEX · rgb(255,255,255) · hsl(0,0%,100%)
Contrast Ratio
17.06:1
The quick brown fox jumps over the lazy dog.
WCAG 2.2 requires a minimum 4.5:1 contrast ratio for normal text (AA). This preview shows how your text looks to users.
Live preview at 16px
Color Blindness Simulation
Normal vision
Select a type above
Batch Palette Tester
Test up to 5 color pairs at once — paste your design system palette.
WCAG 2.2 Contrast Requirements
| Text type | Level AA | Level AAA |
|---|---|---|
| Normal text (<18px or <14px bold) | 4.5:1 | 7:1 |
| Large text (18px+ or 14px+ bold) | 3:1 | 4.5:1 |
| UI components & graphics | 3:1 | — |
Check your whole website for contrast issues
Color contrast is just one of 50+ WCAG 2.2 checks. ADAGuard scans your entire site and shows every issue with fix guidance.
Run Free Site ScanFree · No credit card · Results in 30 seconds
What This Checker Actually Measures
Two contrast algorithms, not one
Most free contrast checkers only compute the WCAG 2.x ratio — a formula from 2008 that treats a 4.5:1 ratio as equally readable whether it's dark text on a light background or the reverse, and doesn't account for font weight. This tool also computes APCA (Accessible Perceptual Contrast Algorithm), the perceptually-calibrated model being developed for WCAG 3.0, which does account for polarity and weight. WCAG 2.x contrast is still the legal requirement today — APCA's Lc score here is a forward-compatibility check, run alongside it, not a replacement for it.
All 8 clinically-recognized types of color vision deficiency
The simulator above covers the three dichromacy types (protanopia, deuteranopia, tritanopia — a missing cone entirely), their three anomalous- trichromacy counterparts (protanomaly, deuteranomaly, tritanomaly — a weak rather than missing cone), and both monochromacy types (achromatopsia, achromatomaly). Most color-blindness simulators online cover only the three dichromacy types and skip the anomalous-trichromacy forms — which are significantly more common in the population than the "blind" forms.
How the auto-fix suggestions are generated
When your color pair fails, this tool doesn't just tell you to "make it darker." It converts your foreground color to HSL and walks the lightness axis in both directions — darkening and lightening — one step at a time until the contrast ratio crosses the 4.5:1 threshold against your actual background, then reports the nearest passing shade in each direction. Because hue and saturation are held constant, the suggested colors stay recognizably close to your original brand color instead of jumping to a generic black or white.
Frequently Asked Questions
What is color contrast in web accessibility?
Color contrast refers to the difference in luminance between text and its background. Sufficient contrast ensures that people with low vision or color blindness can read content. WCAG 2.2 defines minimum contrast ratios that websites must meet for ADA and legal compliance.
What is the minimum contrast ratio for WCAG AA compliance?
WCAG 2.2 Level AA requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text (18px or larger, or 14px bold or larger). This applies to ADA compliance, EAA, and most global accessibility laws.
What is WCAG AAA contrast ratio?
WCAG AAA (enhanced) requires 7:1 for normal text and 4.5:1 for large text. AAA is not legally required for most sites but is best practice for maximum accessibility.
How do I fix color contrast failures?
The easiest fix is to darken your text color or lighten your background (or vice versa) until the ratio reaches 4.5:1. Use the auto-fix suggestions above — our tool finds the closest passing color to your original while preserving your brand hue. For a walkthrough of the 5 most common contrast failures and how to fix each without a redesign, see the full WCAG contrast guide.
Does color contrast affect SEO?
Yes. A 2025 study by AccessibilityChecker.org, analyzing 10,000 websites in partnership with Semrush, found that sites with higher accessibility scores saw a 23% average increase in organic traffic, ranked for 27% more keywords, and showed a 19% variation in Authority Score tied to compliance. The same study found over 70% of the sites analyzed were not WCAG-compliant — meaning fixing contrast and other accessibility issues is a real, underused ranking lever most competitors are leaving on the table.
What about color blindness and contrast?
Approximately 8% of men and 0.5% of women have some form of color blindness. The most common types are deuteranopia (green-blind) and protanopia (red-blind). Use the color blindness simulator above to preview how your colors appear to affected users — it covers all 8 types including anomalous trichromacy variants.
What is APCA and how is it different from WCAG contrast?
APCA (Accessible Perceptual Contrast Algorithm) is a next-generation contrast model developed by the W3C Silver/WCAG 3.0 working group. Unlike the WCAG 2.x contrast ratio, APCA accounts for polarity (light text on dark vs dark on light), font weight, and spatial frequency — making it more perceptually accurate. APCA is not yet a legal requirement but is expected to replace the current algorithm in WCAG 3.0. Use the Lc score above as a forward-compatibility check alongside your WCAG 2.2 results.
Does the European Accessibility Act require color contrast compliance?
Yes. The European Accessibility Act (EAA), which took effect June 28, 2025, requires businesses selling products or services in the EU to meet EN 301 549 accessibility standards, which incorporate WCAG 2.1 Level AA — including the 4.5:1 contrast requirement for normal text. Non-compliance can result in market withdrawal orders and fines from national enforcement authorities.
What contrast ratio do UI components and icons need?
WCAG 2.2 Success Criterion 1.4.11 (Non-text Contrast) requires a minimum 3:1 contrast ratio for UI components — including form field borders, button outlines, focus indicators, icons, and data visualisation elements — against their adjacent colors. This applies at Level AA and is required by ADA, EAA, and Section 508.