Color Contrast Checker by Creshy
Check WCAG AA and AAA contrast ratios between any two colors in real time — for headings, body text, and links — before your design ever reaches a user with low vision.
Design that everyone can actually read
Most color mistakes on the web aren’t about taste — they’re about math. A heading that looks fine on your monitor can be nearly invisible to someone with low vision, color blindness, or simply a phone screen in bright sunlight. The Color Contrast Checker takes the guesswork out of that math, turning the official WCAG contrast formula into a live, visual result you can see and fix in seconds.
A live WCAG contrast calculator
The Color Contrast Checker is a browser-based utility that measures the contrast ratio between two colors — typically a text color and a background color — and instantly tells you whether that pairing meets the Web Content Accessibility Guidelines (WCAG). Instead of memorizing formulas or switching between five different browser tabs, you pick your colors, and the tool shows you a live preview alongside your exact contrast ratio and a pass/fail badge for every WCAG level.
It’s built for designers, developers, content teams, and students who need a fast, reliable answer to one question: “Can people actually read this?”
What makes it useful
Live preview
See your heading, body text, and a sample link rendered in your chosen colors, updated the moment you change a value.
Instant ratio calculation
Your exact contrast ratio is calculated the moment you enter a color — no button clicks, no page reloads.
AA and AAA results
Get a clear pass or fail for both large text and normal text, across both the minimum (AA) and enhanced (AAA) standards.
Quick fix tools
Swap text and background, auto-adjust a failing color to pass AA, or generate a random pairing to test edge cases.
Accessibility is not optional anymore
Accessible color contrast isn’t just a nice-to-have — it’s part of WCAG, the standard referenced by accessibility laws in dozens of countries, including the ADA in the United States and the EN 301 549 standard in the EU. Sites that fail basic contrast requirements risk excluding real users and, increasingly, face legal and compliance risk. Beyond the legal side, readable contrast simply makes your product better: less eye strain, faster reading, and higher conversion on the exact buttons and headlines you want people to notice.
The mistakes this tool catches
- ✕Light gray text on white backgrounds
A popular design trend that frequently fails even the minimum AA standard. - ✕Brand colors used as body text
Brand blues, purples, and pastels often look great as accents but fail when used for paragraphs. - ✕Low-contrast links inside text
Links that are only distinguishable by underline, with a color too close to the surrounding text. - ✕Guessing instead of measuring
Relying on “it looks fine to me” instead of an objective, repeatable ratio.
Everything you need, nothing you don’t
Hex input
Enter any hex code directly, or pick visually with the built-in color swatch.
Separate heading & body checks
Large text and normal text have different thresholds — the tool checks both at once.
Copy-ready CSS
Once you’re happy with a pairing, copy the CSS variables straight into your project.
Reset in one click
Return to the default palette instantly to start a fresh comparison.
Who this actually helps
Designers catch contrast issues before handoff instead of after a client complaint. Developers verify a palette in seconds instead of digging through a spec document. Content and marketing teams confirm that a new campaign’s colors are actually legible before it goes live. Students and freelancers learn what “AA” and “AAA” really mean by seeing the numbers change in front of them, rather than memorizing a rule.
Reading the results
Here’s how three common pairings score using this tool:
| Text Color | Background | Ratio | AA Normal |
|---|---|---|---|
| #3B82F6 | #FFFFFF | 3.68:1 | Fail |
| #1F2937 | #FFFFFF | 15.1:1 | Pass |
| #2653D6 | #FFFFFF | 5.9:1 | Pass |
From color pick to confident answer
Enter your heading color
Type a hex code or use the color picker for your heading text.
Enter your body text color
Do the same for your paragraph or body copy color.
Set your background color
Match it to the actual background the text will sit on.
Read the live preview
Check how the text actually looks rendered together.
Check the ratio and badges
Look at the AA/AAA pass-or-fail badges for both text sizes.
Adjust if needed
Use Auto-Fix, Swap, or manual tweaks until every badge passes.
Copy your final CSS
Grab the color values and drop them straight into your stylesheet.
Frequently asked questions
How do I calculate color contrast ratio?
Contrast ratio is calculated from the relative luminance of both colors using the formula (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color’s luminance and L2 is the darker one’s. This tool runs that calculation automatically the moment you enter two colors.
What is a good contrast ratio for text?
For normal text, WCAG AA requires at least 4.5:1. For large text (18pt+ or bold 14pt+), 3:1 is the AA minimum. For enhanced AAA compliance, those numbers rise to 7:1 and 4.5:1.
What is the difference between WCAG AA and AAA?
AA is the minimum standard most laws and audits require. AAA is a stricter, enhanced standard aimed at users with more significant visual impairments, and asks for noticeably higher contrast ratios.
What contrast ratio does Google require for accessibility?
Google’s own accessibility guidance and Lighthouse audits are based on WCAG 2.1 AA, meaning 4.5:1 for normal text and 3:1 for large text.
Why does my text fail contrast even though it looks fine?
Human eyes adapt to screen brightness and surrounding colors, which can make a weak pairing feel readable in the moment. The contrast formula measures luminance objectively, which is why a pairing can look acceptable but still fail the numeric standard.
Is black on white the highest possible contrast?
Yes. Pure black (#000000) on pure white (#FFFFFF) produces the maximum possible ratio of 21:1, though most real interfaces use slightly softened tones for comfort.
Does contrast checking matter for mobile design?
It matters even more on mobile, since outdoor glare, smaller screens, and lower-end displays all reduce effective visibility, making borderline contrast pairings fail in real-world conditions.
What counts as “large text” under WCAG?
Large text is defined as 18pt (24px) and above, or bold text at 14pt (18.66px) and above. Large text is allowed a lower contrast ratio than normal body text.
Do link colors need to pass contrast too?
Yes. Links are treated as text and need to meet the same AA or AAA thresholds against their background, in addition to being distinguishable from surrounding non-link text.
Can I use this tool for dark mode designs?
Yes. Simply enter your dark background color and your light text color — the same formula and thresholds apply regardless of which color is lighter or darker.
Is this tool free to use?
Yes, the Color Contrast Checker is completely free, requires no sign-up, and runs directly in your browser.
How is contrast ratio different from color difference?
Color difference compares hue and saturation, while contrast ratio compares luminance — how light or dark a color appears. Two colors can look very different in hue yet still have poor contrast if their luminance is close.
Found an Issue? Let Us Know!
If a result looks off, or you’ve spotted a bug in how the ratio is displayed, tell us so we can fix it quickly. Clear, accessible tools only stay reliable when real users report what’s broken.
Disclaimer
This tool is provided for guidance and educational purposes. While it follows the WCAG 2.1 contrast formula, final accessibility compliance for any project should be confirmed against the official WCAG documentation and, where required, a qualified accessibility audit.