Darnly
Free tools

Color contrast checker: is your text readable?

Enter a text color and a background color to get the WCAG contrast ratio and a clear pass or fail for AA and AAA. If it fails, get the nearest passing color in one click.

3.5:1Only passes for large text

Large headline text

Large text

Normal text, like a paragraph, a label or a menu link.

Normal text

Small print, like a caption or helper text.

Small text
ButtonButtons and icons
See every WCAG level (AA and AAA)
  • AA normal text 4.5:1
  • AA large text 3:1
  • AAA normal text 7:1
  • AAA large text 4.5:1
  • UI buttons, icons, borders 3:1
Make a Tailwind shade scale

More free tools

How it works

  1. Type or paste your text color and your background color. Hex (#0593c6), rgb(), hsl() and color names all work, or pick one with the swatch.
  2. The preview at the top shows your colors live, with a check or a cross on each kind of text. Open “See every WCAG level” for the AA and AAA details.
  3. If it fails, we suggest the nearest text color that passes. It keeps the same hue and only gets lighter or darker. Click “Use this”, or copy a prompt that tells your AI coding agent to make the change.

Questions

What contrast ratio do I need?

WCAG AA, the level most laws and audits ask for, needs 4.5:1 for normal text and 3:1 for large text. AAA, the stricter level, needs 7:1 and 4.5:1. Buttons, icons and input borders need 3:1 against what is next to them.

What counts as large text?

Text that is at least 24px (18pt), or at least 18.66px (14pt) and bold. Most body text, labels and button text is “normal” text.

How is the suggested color picked?

We keep your color’s hue and saturation and only move its lightness, darker or lighter, until it passes. Then we show the one that changed least, so it still looks like your brand color.

What about see-through colors?

If the text color has transparency, we mix it over the background first. If the background has transparency, we mix it over white. That’s what your visitors actually see.

Can I share a result?

Yes. The page address updates as you type, with ?fg= and &bg= for the two colors. Click “Copy link” and send it to anyone.

Is anything uploaded?

No. Everything runs in your browser.