Color contrast checker
Make your words easier to read.
- Free to use
- No account needed
- Files stay in your browser
A LIVE COLOR PAIRGood design
Good design
starts with clarity.
Make the important things easy to read. This paragraph uses your selected foreground and background colors.
Example text link →—
contrast ratio
From preview to your website.
- Enter foreground and background colors as six-digit hex values.
- Read the ratio and the separate normal-text and large-text results.
- Try the suggested AA text color, then copy the CSS for your website.
Know what you’re exporting.
WCAG AA requires 4.5:1 for normal text and 3:1 for large text. Large text means at least 18 pt (24 CSS px), or 14 pt (about 18.67 CSS px) bold. This checks opaque color pairs, not a complete page or accessibility conformance.
Read WCAG’s text contrast guidance ↗
No registration or subscription is needed. Uploaded images, initials and generated content stay in this browser tab.