Search results
Sorry, we couldn't find any tools matching your search.
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.
Nothing uploads—your colors stay in this tab.
Sample heading
Sample body text. The quick brown fox jumps over the lazy dog.
- 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
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.