BLOG · ACCESSIBILITY

WCAG Contrast Checker
Check Color Contrast for Free

Low contrast is the most common accessibility failure on the web — and the easiest one to fix. Enter two colors, see the ratio instantly, and know exactly which WCAG requirements pass and which fail.

Updated August 2026 · 4 minute read

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)

  1. Open the free WCAG contrast checker.
  2. Pick the text color and background color — with the color pickers or by typing hex codes directly.
  3. Read the ratio and result: pass/fail for AA and AAA, for both normal and large text, plus a live preview.
  4. 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.

RELATED TOOLS

More contrast help

The palette generator builds accessible color palettes · the text-on-image checker tests text placed over photos.

DANISH VERSION

Working in Danish?

The same checker is available in Danish here.

EAA

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.

Try the contrast checker free →    Or scan the whole page →

Related guides

Danish version of this guide