WCAG Contrast Checker
Check foreground/background contrast against WCAG 2.1 AA and AAA thresholds.
How to Use
- Pick foreground and background colors.
- The ratio and WCAG pass/fail for normal and large text appear live.
Colors
Result
Large text sample
The quick brown fox jumps over the lazy dog. Body copy.
Thresholds
AA normal
≥ 4.5 : 1
AA large
≥ 3 : 1
AAA normal
≥ 7 : 1
AAA large
≥ 4.5 : 1
Large text
18pt+ or 14pt+ bold
Non-text
≥ 3 : 1 (icons, borders)
Frequently Asked Questions
What is large text?
18pt regular or 14pt bold (24px / 18.66px CSS).
What are the thresholds?
AA: 4.5:1 (normal) / 3:1 (large). AAA: 7:1 (normal) / 4.5:1 (large).
Common Use Cases
UI review
Spot-check headings and body copy.
Brand guidelines
Verify brand color pairs meet accessibility.
Last updated: