Color Contrast Checker
Measure color contrast and verify WCAG AA and AAA readability.
Loading the local tool workspace…
What is Color Contrast Checker?
Color Contrast Checker measures the WCAG contrast ratio between text and background colors.
How to use Color Contrast Checker
- 01
Enter the foreground text color and background color.
- 02
Compare alternative colors while watching AA and AAA results.
- 03
Use the pass indicators for normal and large text in your design decision.
Color Contrast Checker FAQ
What contrast ratio does normal text need?
WCAG AA uses at least 4.5:1 for normal text and 3:1 for large text; AAA uses stricter thresholds.
Is Color Contrast Checker private to use?
Yes. Color values and CSS are calculated locally in the browser.