Skip to content

Free tool - no signup

WCAG Contrast Checker

Pick a text color and a background, and see the live ratio with AA and AAA pass or fail badges for normal text, large text, and UI components. Nothing leaves your browser.

Large heading text

The quick brown fox jumps over the lazy dog. This is body copy at a normal reading size.

Button label
--contrast ratio
  • AA Normal text 4.5:1
  • AAA Normal text 7:1
  • AA Large text 3:1
  • AAA Large text 4.5:1
  • AA UI & graphics 3:1

How to use it

  1. Set your text color and background with the pickers or by typing a hex value.
  2. Read the ratio, then check the badges. Green means it passes that level.
  3. Large text is 24px regular or 18.66px bold and up, so headings clear a lower bar than body copy.
  4. Use Swap colors to test the same pair as light-on-dark and dark-on-light.

Why 4.5:1 is the line that matters

Most failing designs miss on body text, not headings. A soft grey on white looks refined on a calibrated monitor and then vanishes on a phone in daylight. WCAG AA asks for 4.5:1 on normal text for a reason: it keeps the text legible across the messy real-world conditions your visitors actually read in. Hit AA before you ship, and treat AAA as the target for anything people read for long stretches.

Common questions

What contrast ratio do I need for WCAG AA?
WCAG 2.1 AA needs 4.5:1 for normal body text and 3:1 for large text (at least 18.66px bold or 24px regular). UI components and graphical objects also need 3:1. AAA raises normal text to 7:1 and large text to 4.5:1.
Is this contrast checker free?
Yes. No sign-up, no email, no watermark. The whole tool runs client-side in your browser, so nothing you type is uploaded anywhere. Check as many color pairs as you want.
How is the contrast ratio calculated?
It uses the WCAG relative luminance formula. Each color is converted to linear RGB, weighted for perceived brightness, and the ratio is (lighter + 0.05) / (darker + 0.05). A ratio ranges from 1:1 (no contrast) to 21:1 (black on white).
Does contrast really affect real users?
It does, and not only for people with low vision. Thin grey-on-white text that passes at your desk fails outdoors on a phone in sunlight. Meeting AA is the floor, not the goal. When a design feels hard to read, the ratio is usually the reason.

Contrast is one lever in a bigger system. See how it works alongside size and spacing in the visual hierarchy principles guide, or build a whole palette with our color palette generator.