Color Contrast Checker
Check foreground and background color contrast ratios against WCAG AA and AAA accessibility standards. Instant results with pass/fail indicators. Free.
💻 Developer Tools
Free
Browser-based
Large Text Sample Aa
Normal body text — this is how your content looks at regular size.
Contrast Ratio
—
AA — Normal text (4.5:1)—
AA — Large text (3:1)—
AAA — Normal text (7:1)—
AAA — Large text (4.5:1)—
Why Color Contrast Matters
The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios so text remains readable for users with low vision or colour blindness. Failing contrast checks is one of the most common accessibility errors and can expose your site to legal risk in many jurisdictions.
WCAG Contrast Requirements
| Level | Normal Text | Large Text (18pt+ or 14pt bold) |
|---|---|---|
| AA (minimum) | 4.5 : 1 | 3 : 1 |
| AAA (enhanced) | 7 : 1 | 4.5 : 1 |
Tips
Dark text on a white background (black #000 on white #fff) gives a ratio of 21:1 — the maximum. For brand colours, aim for AA compliance at minimum. Use AAA for body copy and smaller UI text to maximise readability for all users.