Color Contrast Checker
Check foreground/background color contrast for WCAG AA/AAA compliance.
Body text (14px) — The quick brown fox
Large bold (18px bold) — The quick brown fox
Heading (24px) — The quick brown fox
Contrast Ratio
14.50
: 1
AA Normal
? Pass
AA Large
? Pass
AAA Normal
? Pass
AAA Large
? Pass
| Level | Normal text | Large text (=18px or 14px bold) |
|---|---|---|
| AA | 4.5:1 | 3:1 |
| AAA | 7:1 | 4.5:1 |
Check if your foreground and background color combination meets WCAG 2.1 accessibility standards. See the contrast ratio and instant AA/AAA pass/fail badges.
Key Features
Contrast Ratio
Calculates the exact luminance-based contrast ratio per WCAG 2.1 spec.
WCAG Badges
Instant pass/fail indicators for AA Normal, AA Large, AAA Normal, and AAA Large text.
Live Preview
Renders body text, large bold text, and heading examples with your chosen colors.
Swap Colors
One-click swap to reverse foreground and background.
How to Use
- 1Pick a foreground (text) color and a background color.
- 2View the contrast ratio and WCAG pass/fail badges.
- 3Check the live text preview to see how it looks.
- 4Use Swap to quickly test the reverse combination.