Why accessible color matters
An estimated 300 million people worldwide have color blindness, and 246 million have moderate to severe vision impairment. Poor color contrast is one of the most common accessibility failures on the web — and one of the easiest to fix.
WCAG 2.1 compliance isn't just about legal requirements. High-contrast color choices improve readability for everyone: in bright sunlight, on aging displays, and at small font sizes. The tradeoff is zero — good contrast is just good design.
This tool calculates contrast ratios using the WCAG 2.1 relative luminance formula, giving you instant feedback as you design.
How to use this tool
1. Pick your colors — click the color circle to open a color picker, or type a hex code directly. Both foreground (text) and background colors are supported.
2. Read the ratio — the contrast ratio updates instantly. Green badges indicate passing levels; red badges indicate failures.
3. Explore the palette — the shade palette shows 7 tints and shades of your foreground color. Click any to test it. Darker shades generally improve contrast on light backgrounds.
4. Share — copy a shareable URL to send your color combination to teammates or bookmark it for later.
Understanding the results
AA Normal — Requires 4.5:1. This is the standard requirement for body text and most UI elements. Required by WCAG 2.1 Level AA.
AA Large — Requires 3:1. Applies to text 18pt+ (24px+) or 14pt bold (18.67px bold). Easier to meet, but still important.
AAA Enhanced — Requires 7:1. The gold standard. Not always achievable with brand colors, but worth targeting for critical content like error messages and legal text.