Free WCAG contrast checker for accessible color pairs
Check whether text and background colors have enough contrast before you publish a page, interface, or design handoff. This WCAG contrast checker runs locally in your browser, so no color values or design files are uploaded.
Check WCAG AA and AAA contrast
For normal-size text, WCAG AA requires a contrast ratio of at least 4.5:1 and AAA requires 7:1. For large text, the thresholds are 3:1 for AA and 4.5:1 for AAA. Use the result as a quick accessibility check, then review the full design in its real context.
How to use this contrast checker
- Enter or select a foreground text color and a background color.
- Review the contrast ratio and the AA or AAA result.
- Adjust either color until the pair meets the level you need.
Read the WCAG contrast-ratio guide for the thresholds, the large-text exception, and practical color-pair checks.
Check component states, not just one color token
Test the actual foreground and background used for default, hover, focus, disabled, and error states. A token that passes on a white canvas can fail on a tinted surface, image overlay, or dark-mode component. A passing ratio is one focused color-pair check, not a full accessibility audit.
Does this work for WCAG 2.1 and mobile?
Yes. Contrast-ratio requirements apply across modern web and mobile interfaces. The checker works in current phone, tablet, and desktop browsers.
Is this color contrast checker private?
Yes. It processes color values in the current browser tab. No account is required and nothing is uploaded to TinyTask Lab.