Color Contrast Checker
Check WCAG 2.1 contrast ratios between foreground and background colors. See AA/AAA compliance and get accessible alternatives.
Foreground (Text)
Background
Large Text (24px+)
Normal body text looks like this. The quick brown fox jumps over the lazy dog.
Small text / UI labels
12.9:1
Contrast Ratio
AA Normal
Pass
≥ 4.5:1
AA Large
Pass
≥ 3:1
AAA Normal
Pass
≥ 7:1
AAA Large
Pass
≥ 4.5:1
Accessible Alternatives
Click a suggestion to apply it as the foreground color.
Understanding WCAG Contrast Guidelines
The Web Content Accessibility Guidelines (WCAG) 2.1 define minimum contrast ratios to ensure text is readable by people with visual impairments. Contrast ratio measures the difference in perceived brightness between two colors.
WCAG Levels
- AA Normal Text: Requires a contrast ratio of at least 4.5:1 for text smaller than 24px (or 18.66px bold).
- AA Large Text: Requires at least 3:1 for text 24px and above (or 18.66px+ bold).
- AAA Normal Text: The enhanced level requires at least 7:1 for normal text.
- AAA Large Text: Requires at least 4.5:1 for large text at the enhanced level.
Why Contrast Matters
Good contrast benefits everyone, not just users with disabilities. It improves readability in bright environments, on low-quality screens, and for aging users whose contrast sensitivity naturally decreases. Designing with accessibility in mind leads to a better experience for all.