Color Contrast Checker
Check WCAG color contrast ratios for accessibility compliance.
Sample text
Sample text
Contrast Ratio
:1
Live Preview
Normal text (16px) — The quick brown fox jumps over the lazy dog.
Large text (20px bold) — The quick brown fox.
Heading text (24px) — Hello World
Inverted: Normal text (16px) — The quick brown fox jumps over the lazy dog.
Inverted: Large text (20px bold) — The quick brown fox.
WCAG 2.1 Compliance
| Level | Text Type | Min. Ratio | Status |
|---|---|---|---|
| AA | Normal Text (under 18pt) | 4.5:1 | |
| AA | Large Text (18pt+ or 14pt bold) | 3:1 | |
| AA | UI Components & Graphics | 3:1 | |
| AAA | Normal Text (enhanced) | 7:1 | |
| AAA | Large Text (enhanced) | 4.5:1 |