Color Contrast Checker
Verify WCAG AA and AAA contrast ratios instantly.
What's included
- WCAG AA and AAA
- Large text mode
- Share-ready report
How it works
-
1
Enter your colour pair
Input your foreground (text) and background hex colours. Use the colour picker or type the values directly.
-
2
Instant ratio calculation
The tool computes the WCAG 2.1 contrast ratio and shows pass/fail for AA (4.5:1) and AAA (7:1) thresholds.
-
3
Export or share the report
Copy the result as a shareable URL or export a visual report card to include in design handoff documents.
Who uses this
- Designers verifying brand colour pairs meet accessibility standards before handoff
- Developers auditing existing UI components for WCAG compliance
- Agencies running accessibility audits on client websites
- Product teams ensuring dark-mode palettes remain accessible across themes
Pro tips
- Aim for AAA (7:1) contrast on body text — it ensures readability in bright outdoor conditions and for low-vision users.
- Large text (18pt / 14pt bold) only requires AA ratio of 3:1 — you have more flexibility with headings.
- Avoid relying on colour alone to convey meaning; pair contrast-passing colours with icons or patterns for colour-blind users.
Try it now
Send us the link or upload and we'll handle the rest.
This is a demo preview — the full tool processes your input instantly, with no signup required.