Contrast Checker for WCAG.
Pick a text and background colour and see instantly whether the contrast meets the WCAG requirements — with a live preview and a suggestion for the next colour that passes Level AA.
Normal text (AA) — the common minimum for body text up to about 18 px. Level AAA requires 7:1.
Large text (AA) — from about 24 px, or 18.7 px bold, 3:1 is enough.
UI & graphics — controls, icons, charts and focus outlines need at least 3:1 against their surroundings.
WCAG sets minimum contrasts — for most legal requirements (via EN 301 549, BFSG and EAA) Level AA is what counts.
Contrast is just one criterion of many.
Good contrast matters — but it’s only one of dozens of WCAG success criteria. Missing alt text, unusable keyboard operation or unlabelled forms remain barriers even when every colour is perfect.
Want the full picture? The free Welcoma scan checks your site against the machine-testable WCAG criteria — not just contrast — and shows you, prioritised, where the real problems are. How the standard is built is explained in the WCAG 2.2 guide.
Frequently asked questions
Which contrast value is required?
For normal text, Level AA requires a minimum contrast of 4.5:1, for large text 3:1. Controls and graphics need at least 3:1. For the highest level AAA the values rise to 7:1 and 4.5:1 respectively.
What counts as “large text”?
Large text is text from about 24 px — or from 18.7 px if bold. The lower contrast of 3:1 is enough for it, because larger type stays legible with less contrast.
Does contrast also apply to buttons and icons?
Yes. The WCAG criterion for non-text contrast requires at least 3:1 against the surroundings for controls, meaningful graphics and focus indicators.
Is good contrast enough for WCAG conformance?
No. Contrast is just one of many criteria. For a complete picture you need a check across all relevant points — for example with the free scan or a look at WCAG 2.2.
How is contrast calculated?
By the official WCAG formula: the relative luminance is determined for each colour, then the ratio of the lighter to the darker colour is formed, each with a fixed offset. That’s exactly what this checker does.
Don’t just check colours — check the whole page.
Enter your URL and get an honest overview of your accessibility — free and with no obligation.