Contrast Checker — Free Online Tool
Check WCAG contrast ratios and AA/AAA pass or fail for your text and background colors.
Normal text — The quick brown fox jumps over the lazy dog.
Large text — The quick brown fox.
Contrast Ratio
1.00:1
AA — Normal
AA — Large
AAA — Normal
AAA — Large
About Contrast Checker
The Contrast Checker helps you verify that your text is readable against its background by calculating the exact WCAG contrast ratio. Pick a text color and a background color, then see the ratio update live along with pass or fail badges for AA and AAA at both normal and large text sizes.
Accessible color contrast is a key part of inclusive, compliant web design. This tool gives you immediate, standards-based feedback so you can adjust colors until they meet the level you need, all without leaving your browser or uploading any data.
How to Use Contrast Checker
- Choose your text color using the Text Color picker.
- Choose your background color using the Background Color picker.
- Watch the live preview and the contrast ratio update instantly.
- Review the AA and AAA pass or fail badges for normal and large text, then adjust colors as needed.
Key Features
Live WCAG contrast ratio calculation
Pass or fail badges for AA and AAA levels
Separate results for normal and large text
Instant preview of text on the chosen background
Standards-based luminance formula for accurate results
Fully client-side for private, instant checks
Frequently Asked Questions
What is a WCAG contrast ratio?
The contrast ratio measures the difference in luminance between text and its background, ranging from 1:1 (no contrast) to 21:1 (black on white). The Web Content Accessibility Guidelines use it to judge whether text is readable for people with low vision.
What ratios do AA and AAA require?
For normal text, AA requires at least 4.5:1 and AAA requires 7:1. For large text, AA requires 3:1 and AAA requires 4.5:1. The checker shows a pass or fail badge for each of these four levels.
What counts as large text?
Large text is generally defined as 18pt (about 24px) or 14pt bold (about 18.66px) and larger. Larger text is easier to read, so it is allowed a lower contrast threshold.
Why does contrast matter for accessibility?
Sufficient contrast ensures users with low vision, color blindness, or aging eyes can read your content, and it also improves legibility for everyone in bright light or on low-quality screens.
Are my color choices uploaded anywhere?
No. The contrast ratio is calculated instantly in your browser, so your selected colors are never sent to a server.