ProToolBox

Free WCAG Contrast Checker Online — Live Ratio, AA/AAA & Preview

Pick text and background colors below—see live WCAG 2.1 contrast ratio, AA/AAA verdict, and a sample preview as you type HEX or use the pickers. No upload, no signup, no watermark.

WCAG text and background contrast checker

See whether text and background meet WCAG 2.1—contrast ratio, AA/AAA verdict, and a live preview update as you pick colors or paste HEX.

1 Set text & background · 2 Choose text size · 3 Read ratio & checklist · 4 Copy WCAG summary

Your WCAG readout

Try #0f172a on #ffffff, or tap a quick example below. Normal vs large text changes which AA threshold applies. Building a palette next? Use the palette generator.

Which WCAG text size are you checking?

Runs in this tab only—no server upload, no signup, no watermark.

Adjust colors for live contrast ratio and WCAG AA/AAA readout below.

Sample heading

Sample body text. The quick brown fox jumps over the lazy dog.

Next: Palette · Gradient · Color blindness · All design tools · All tools

  • Works in your browser—runs on your device, not our servers
  • No upload required—your input stays in this tab
  • Free and instant
  • No account needed
  • Private by default—the same ProToolbox promise on every page

What this is for

Free WCAG Contrast Checker Online — Live Ratio, AA/AAA & Preview supports accessible color work: works in your browser, free and instant. Contrast, hex/RGB, palettes, gradients—check before handoff or component merges.

  • Re-check after token or theme updates
  • Capture values for docs and CSS variables
  • Iterate next to your design file
  • Document AA vs AAA when asked

Together: This supplements Figma or Penpot—not a replacement for design judgment.

Bookmark for release week—re-check contrast whenever you tweak brand colors or dark mode.

WCAG contrast checker — overview

Pair a text color with a background and get the WCAG 2.1 contrast ratio, a clear AA/AAA verdict for the text size you select, and a live sample heading and body. Use quick examples, swap colors, then copy a plain-text summary for design QA or dev handoff.

How it works

  1. Set text and background with pickers or HEX fields (supports shorthand like #fff).
  2. Choose normal or large text so AA thresholds match your UI.
  3. Read the big ratio and pass/fail lines—then use Copy WCAG summary or refine in palette / gradient tools.

Privacy: Contrast runs locally. We do not upload your colors or store them on our servers.

FAQ

  • Normal vs large text? WCAG uses different ratio bars—toggle the radio so the first verdict matches your typography.
  • Does this match Figma’s contrast? Usually yes for sRGB hex; always verify in your design file and on real devices.
  • Mobile friendly? Yes—pickers, HEX fields, and the readout work on small screens.
  • Full audit? This checks one pair; components, focus states, and real content still need broader accessibility review.

Save this tab—you will reuse it on every color tweak before ship.

Tools in this category