Color Contrast Checker
Check WCAG contrast ratio
Enter foreground and background colors first to inspect contrast ratio and WCAG level immediately; color-pair examples are available in Advanced mode.
17.40:1The full guide also includes pitfalls, worked examples, snippets, FAQs, and related tools for checking results or troubleshooting.
About this tool
Calculate the WCAG 2 contrast ratio of two opaque 3- or 6-digit sRGB hex colors. The displayed checks cover AA normal text, AA large text and AAA normal text, using the unrounded ratio. This checks one color pair, not the accessibility of a complete page.
Production Snippets
Reference ratios at the extremes
text
#000000 on #ffffff: 21.00:1
#ffffff on #ffffff: 1.00:1
#777777 on #ffffff: 4.48:1 (fails AA normal text)Frequently Asked Questions
What are the AA and AAA thresholds?
AA needs 4.5:1 for normal text and 3:1 for large text. AAA needs 7:1 for normal text and 4.5:1 for large text; this page displays three checks and has no separate AAA-large row.
What counts as large text?
WCAG uses at least 18 pt regular text or 14 pt bold, approximately 24 CSS px or 18.67 CSS px respectively. This tool does not inspect your font weight or rendered page; apply the appropriate threshold yourself.
Why might 4.50:1 still fail AA?
The display rounds to two decimals but pass/fail uses the unrounded value. A ratio slightly below 4.5 can display as 4.50 and still fail; the threshold must not be rounded up.
Can I check transparent colors, images or gradients?
Only opaque 3- or 6-digit hex colors are accepted. Composite transparent layers against their real background first, and evaluate relevant areas of images or gradients; a single pair does not cover them automatically.
Keep browsing