Check text contrast on any background

Set text and background colors. You get the WCAG 2.1 ratio, AA/AAA pass or fail, and a live preview. No signup—runs in your browser.

WCAG text and background contrast checker

Check text on a background for WCAG 2.1 contrast: ratio, AA/AAA pass or fail, and a live preview while you edit HEX or use pickers.

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

Your contrast results

Try #0f172a on #ffffff, or tap a preset. Normal vs large text picks the AA bar that applies. Need more colors? Palette generator.

Which WCAG text size are you checking?

Nothing uploads—your colors stay in this tab.

Change colors to see the ratio and WCAG checklist 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

  • Runs in your browser—nothing uploads
  • Free, no account
  • We never see your colors

Bookmark this page when you ship UI with custom colors.

Overview

Pair text and background colors. You get the WCAG 2.1 ratio, AA/AAA for the text size you pick, and a sample heading and body. Use presets, swap colors, then copy a plain-text summary for QA or handoff.

How it works

  1. Set text and background with pickers or HEX (shorthand like #fff works).
  2. Choose normal or large text so the AA bar matches your UI.
  3. Read the ratio and checklist—then tap Copy results or tune colors in palette / gradient tools.

Privacy: Contrast runs locally—we do not upload or store your colors.

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.

Keep this tab open for quick checks before you ship.