Color Contrast Checker
Make sure your text is readable for everyone.
Choose a text color and a background color to see their contrast ratio and whether they meet the WCAG 2 accessibility levels: AA and AAA for normal and large text, and the 3:1 minimum for icons and controls. The preview shows real text in both colors, and one click swaps them.
How to check color contrast
- Step 1
Enter the text and background colors.
- Step 2
Read the contrast ratio and the WCAG results.
- Step 3
Adjust the colors until every level you need passes.
Why use PhotoTools
WCAG 2 levels
AA and AAA for normal and large text.
Live preview
See real text in your colors.
Any format
HEX, RGB, HSL or color names.
Supported formats
Output
- WCAG
Frequently asked questions
What contrast ratio do I need?
WCAG AA asks for 4.5:1 for normal text and 3:1 for large text (18 pt, or 14 pt bold) and for controls; AAA asks for 7:1 and 4.5:1.
Is the ratio the same as in other checkers?
Yes. It uses the WCAG 2 relative luminance formula, the same as browser developer tools.
Is it free?
Yes. Browser tools on PhotoTools are free, unlimited and work without an account.