How to Check Color Contrast for Accessibility
Use the Contrast Checker to ensure your design meets WCAG accessibility standards.
Tool Used
Contrast Checker
1
Open Contrast Checker
Navigate to /tools/color/contrast-checker.
2
Enter foreground color
Enter the foreground (text) color as a hex value (e.g. #1a1a28) or use the color picker.
3
Enter background color
Enter the background color in the same way.
4
Read the contrast ratio
The tool calculates and displays the contrast ratio. A higher ratio means better contrast.
5
Check WCAG compliance
The results show pass or fail for WCAG AA and AAA levels for both normal and large text. Aim for at least AA compliance for all text.
All done!
You are ready to use the Contrast Checker like a pro.