Why does contrast matter so much?
Roughly one in twelve men has reduced color vision. Text with too little contrast becomes unreadable for them — and hard to read for everyone in sunlight, on aging screens or on a projector. That is why low-contrast text was the single most common failure in WebAIM's annual survey of the top million websites.
The requirements
AA: 4.5:1 for normal text, 3:1 for large text and graphics (1.4.11). AAA: 7:1 / 4.5:1. Under the EAA and for public-sector sites, AA is the minimum.
Seconds, not hours
You don't need to compute relative luminance by hand. Enter two colors — hex codes or pickers — and see the result live.
Your data stays local
The calculation runs in JavaScript in your own browser. No colors are sent anywhere.
How to do it (under 5 seconds)
- Open the free WCAG contrast checker.
- Pick the text color and background color — with the color pickers or by typing hex codes directly.
- Read the ratio and result: pass/fail for AA and AAA, for both normal and large text, plus a live preview.
- Nudge either color until every requirement you need to meet turns green.
The ratio is calculated with the formula from the WCAG specification itself: both colors are converted to sRGB relative luminance, and contrast is (L1 + 0.05) / (L2 + 0.05). The result therefore matches the specification exactly — the same number commercial tools show.
From one pair to a whole page
The contrast checker tests one color pair at a time — perfect when you are designing a new element. To check an entire site, use the free Accessibility Scanner: paste the URL and it finds all low-contrast text on the page along with heading, alt-text, form and keyboard errors.
More contrast help
The palette generator builds accessible color palettes · the text-on-image checker tests text placed over photos.
What does the law say?
Europe's accessibility law (EAA) imposes WCAG requirements on most e-commerce sites from June 2025. Read about the deadlines here.
Frequently asked questions
What contrast ratio does WCAG AA require?
Normal text below 24 px needs at least 4.5:1. Large text (18 pt / 14 pt bold and up) requires 3:1. AAA requires 7:1 for normal text and 4.5:1 for large text.
Do the contrast requirements apply to icons and buttons too?
Yes — WCAG 2.1 success criterion 1.4.11 (Non-text Contrast) requires 3:1 for graphical objects such as icons, input borders and important UI elements.
Is the tool free?
Yes. The contrast checker at /contrast-checker runs entirely in your browser. No account, no limits, nothing is sent to a server.
How do I find low contrast across a whole page?
Use the free Accessibility Scanner at /scan: it checks every text/background combination on an entire URL and lists each violation of criterion 1.4.3.
Free e-book: EAA Compliance Checklist for WordPress Sites
The complete guide is available as a free EPUB — no signup required.
Get the free e-book →Want all six guides? Complete EU Compliance Bundle — combined PDF + all EPUBs, $29.