Free online color contrast checker that tests contrast ratios between two colors against WCAG 2. 1 accessibility standards (AA, AAA).
How to use Color Contrast Checker?
Enter foreground (text) and background colors.
Check the contrast ratio and WCAG grade (AA/AAA).
Adjust colors as needed to meet standards.
Frequently asked questions about Color Contrast Checker
What is the difference between WCAG AA and AAA?
AA requires 4.5:1 for normal text and 3:1 for large text. AAA is stricter at 7:1 and 4.5:1 respectively.
What if my contrast ratio doesn't pass?
Adjust colors lighter or darker to increase contrast. The tool shows results in real time as you adjust.
Large text has a lower threshold — how large does it have to be?
WCAG counts text as large from 18pt (about 24px) at normal weight, or 14pt (about 18.7px) when bold. Meeting that lowers the AA requirement from 4.5:1 to 3:1. Remember these are floors, not targets: body text still has to be readable on a dimmed laptop screen or in daylight, so aiming closer to 7:1 is the safer habit.
How do I check contrast for text on a photo or translucent panel?
Contrast math assumes two flat colors, so on a photograph you have to sample the lightest and the darkest point under the text and run the check twice. If either fails, the text disappears somewhere along the image. In practice, laying a solid band behind the text is more reliable than a translucent black overlay or a text shadow, both of which vary with whatever sits underneath.
How to get the most out of Color Contrast Checker?
Body text needs 4.5:1; text at 18pt or bold 14pt and larger only needs 3:1 to pass AA.
In the US, Section 508 and ADA web guidance both point back to these same WCAG ratios.
Non-text elements such as icons and input borders need 3:1 against their background too.