Color Contrast Checker (WCAG)
Check how readable your text colors are against their background, using the WCAG AA and AAA accessibility standards. Free, no signup.
Pass — needs 4.5:1
Pass — needs 3:1
Pass — needs 7:1
Pass — needs 4.5:1
How to use
- Pick your text (foreground) color and background color.
- Watch the live preview and the ratio update instantly.
- Check the four WCAG badges to see which levels pass.
What the numbers mean
A ratio of 4.5:1 or higher passes WCAG AA for normal text and is the target used by most websites and tools. Large text (18pt, or 14pt bold) only needs 3:1 for AA — that's why buttons and headings often use larger, bolder type.
Frequently asked questions
What contrast ratio do I need for accessible text?
For WCAG AA, normal text needs 4.5:1 and large text needs 3:1. For WCAG AAA, normal text needs 7:1 and large text needs 4.5:1.
Why does low contrast matter for SEO?
Search engines and users both penalize unreadable pages. Low-contrast text hurts mobile usability, increases bounce rate, and can hide content from screen-reader users.
Does this checker handle transparency?
This tool compares two solid hex colors. For accurate results against semi-transparent layers, compute the blended color first, then run it through this checker.
Related tools
More from Design & Images
Build custom software with us
From internal tools to full platforms — we deliver end to end.