Check color contrast ratios for WCAG 2.1 compliance. Required under the European Accessibility Act (June 2025) and ADA. Instant AA/AAA pass-fail results with auto-fix suggestions.
🎨 Check Color ContrastFree · No signup · WCAG 2.1 · EAA 2025 compliant
Color contrast is the difference in luminance between a foreground color (typically text) and its background. When contrast is too low, text becomes difficult or impossible to read for people with visual impairments, color blindness, or those viewing screens in bright environments. Poor contrast affects approximately 8% of men (color blindness) and millions more with low vision.
The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios to ensure text is readable by the widest possible audience. These are now legally required in many jurisdictions, including the EU and the United States.
Color picker + HEX input for foreground and background
Live preview showing text at normal and large sizes
WCAG AA and AAA pass/fail for normal and large text
Exact contrast ratio with color-coded display
Auto-fix: suggests closest accessible foreground color
Save up to 5 color pairs in session
Quick presets: common accessible color combinations
European Accessibility Act (EAA) 2025 compliance note
| Level | Normal Text | Large Text | Legal Status |
|---|---|---|---|
| WCAG AA | 4.5:1 minimum | 3:1 minimum | Required — EAA, ADA, AODA |
| WCAG AAA | 7:1 minimum | 4.5:1 minimum | Recommended, not required |
Large text: 18px and above (normal weight) or 14px and above (bold)
The European Accessibility Act (EAA) came into full force in June 2025, requiring websites and digital products serving EU consumers to comply with WCAG 2.1 Level AA. This is a binding legal requirement — not a recommendation. Non-compliance can result in enforcement actions and financial penalties in EU member states.
The EAA applies to e-commerce, banking, transport, media, and other digital services. The 4.5:1 contrast ratio requirement for normal text is one of the most commonly violated provisions. Use this tool to audit and fix your color choices before they become a compliance issue.
The WCAG contrast ratio formula uses relative luminance — a measure of how bright a color appears to the human eye (accounting for the fact that the eye is more sensitive to green than red or blue). The formula is:
Contrast Ratio = (L1 + 0.05) / (L2 + 0.05)
where L1 = luminance of the lighter color, L2 = luminance of the darker color
Pure black (#000000) on pure white (#ffffff) has the maximum possible contrast ratio of 21:1. A ratio of 1:1 means identical colors with no contrast. The WCAG AA threshold of 4.5:1 was chosen to ensure readability for people with vision roughly equivalent to 20/40 — a common level of vision loss.
WCAG AA requires 4.5:1 for normal-sized text (under 18px regular or 14px bold) and 3:1 for large text. WCAG AAA requires 7:1 for normal text and 4.5:1 for large text. Most accessibility laws require AA compliance.
The European Accessibility Act applies to websites and digital services that are offered to consumers in the EU — regardless of where the business is located. If you have EU customers, EAA compliance is legally required as of June 2025.
Google's Material Design guidelines recommend a minimum of 4.5:1 for body text and 3:1 for large text — matching WCAG AA. Google's own products generally aim for higher ratios for critical text.
Yes, under WCAG 2.1. Images containing text must meet the same contrast requirements as regular text unless the image is purely decorative or the text is logotype. This is a common area of non-compliance.
Yes, completely free. No signup required. All calculations run in your browser using the standard WCAG 2.1 relative luminance formula.
Free · WCAG AA + AAA · EAA Compliant · Auto-fix
🎨 Open Color Contrast Checker