Accessibility and design tool
Check color contrast before you ship.
Test a text and background color pair against WCAG AA and AAA targets. The ratio, preview, and pass states update in this browser tab, with no color upload or account.
Choose your two colors
Use hex values with or without the # symbol.
Supported input: 3-digit or 6-digit hexadecimal colors. The preview uses your text color over your background color.
Frequently asked questions
Are my colors uploaded?
No. The color values and contrast calculation stay in this browser tab. The tool does not upload or store the colors you enter.
What do WCAG AA and AAA mean here?
For normal-sized text, WCAG AA uses a 4.5:1 contrast ratio and AAA uses 7:1. For large text, AA uses 3:1 and AAA uses 4.5:1.
Does this replace a full accessibility audit?
No. This checker evaluates the selected text and background color pair. It does not inspect focus states, images, layout, semantics, or the rest of a website.
How do I check text and background contrast?
Enter the text and background hex colors to calculate their contrast ratio and compare it with WCAG AA and AAA targets. Use the preview to judge the pair at the size you plan to use.
Worked example
Start with a dark text color on a light background, then test the colors from your actual button, card, or page. A 4.5:1 ratio is the normal-text AA target; large text has a 3:1 AA target.
Limits to know
This checker evaluates only the selected color pair. It does not audit focus indicators, images, non-text controls, typography, semantics, or an entire website. The color values stay in this browser tab and are not uploaded or stored.