Test foreground and background color combinations for WCAG 2.1 accessibility compliance. See AA and AAA pass/fail results, preview text at multiple sizes, simulate color blindness, and get instant fix suggestions.
Accepts HEX (#333), RGB (rgb(51,51,51)), or HSL (hsl(0,0%,20%))
Normal text (16px) — The quick brown fox jumps over the lazy dog. This is how your body text will look to users on your website.
Large text (24px bold) — Heading Preview
| Level | Normal Text | Large Text | UI Components |
|---|---|---|---|
| AA (minimum) | ✓ Pass 4.5:1 | ✓ Pass 3:1 | ✓ Pass 3:1 |
| AAA (enhanced) | ✓ Pass 7:1 | ✓ Pass 4.5:1 | N/A |
Approximately 1 in 12 men and 1 in 200 women have some form of color vision deficiency. Here is how your color combination appears under common types.
Sample Aa
The quick fox
Deuteranopia
Red-green (most common)
12.6:1
Sample Aa
The quick fox
Protanopia
Red-green
12.6:1
Sample Aa
The quick fox
Tritanopia
Blue-yellow
12.6:1
100% Private
All calculations happen in your browser. No colors or data are sent to any server.
WCAG Level AA requires 4.5:1 for normal text and 3:1 for large text (18pt or 14pt bold) and UI components. Level AAA requires 7:1 for normal text and 4.5:1 for large text.
Enter your text (foreground) color and background color in this tool. It will instantly calculate the contrast ratio and show whether you pass or fail AA and AAA requirements for normal text, large text, and UI components.
Large text is defined as 18pt (24px) or larger at regular weight, or 14pt (approximately 18.67px) or larger at bold weight. Large text has a lower contrast requirement because it is inherently easier to read.
In many jurisdictions, yes. The ADA in the US, the Equality Act in the UK, and EN 301 549 in the EU all reference WCAG guidelines. Many organizations have faced lawsuits for failing to meet accessibility standards.
Yes. This tool includes color blindness simulations for Deuteranopia, Protanopia, and Tritanopia. You can see how your color combination appears to users with these conditions and verify that the contrast ratio remains adequate.
The tool suggests accessible alternative foreground colors that maintain a similar hue but meet the 4.5:1 AA threshold. Click any suggestion to apply it. You can also adjust lightness manually while watching the ratio update in real time.
Last updated: March 2026