WCAG Color Contrast Checker
Sample Text
The quick brown fox jumps over the lazy dog.
Small text preview for contrast checking.
Contrast Ratio
12.63:1
ExcellentAA Normal
Pass
≥ 4.5:1
AA Large
Pass
≥ 3:1
AAA Normal
Pass
≥ 7:1
AAA Large
Pass
≥ 4.5:1
Embed this tool on your website
Add a free contrast checker to your blog or documentation:
<iframe src="https://miromiro.app/embed/contrast-checker" width="100%" height="500" frameborder="0"></iframe> What is WCAG Color Contrast?
The Web Content Accessibility Guidelines (WCAG) 2.1 define minimum contrast ratios between text and its background to ensure readability for people with visual impairments. The contrast ratio ranges from 1:1 (no contrast) to 21:1 (maximum contrast, black on white).
WCAG Compliance Levels
- AA Normal Text — Requires a contrast ratio of at least 4.5:1 for body text (under 18pt or 14pt bold).
- AA Large Text — Requires a contrast ratio of at least 3:1 for large text (18pt+ or 14pt+ bold).
- AAA Normal Text — Requires a contrast ratio of at least 7:1 for enhanced accessibility.
- AAA Large Text — Requires a contrast ratio of at least 4.5:1 for large text with enhanced accessibility.
Why Contrast Matters
Approximately 1 in 12 men and 1 in 200 women have some form of color vision deficiency. Good contrast ensures your content is readable by the widest possible audience, including people with low vision, color blindness, or those viewing screens in bright sunlight.