Color Contrast Checker: Check Readability and Fix Failing Colour Pairs Before You Publish
CodexFuse Team · 2026-10-27T10:55:20.599Z · 10 min read min read
Check any text and background colour pair free: WCAG ratios, AA and AAA verdicts, and a nearest passing fix for readable design.
A color contrast checker measures how easily text can be read against its background, expressed as a single contrast ratio. It compares the brightness of your text colour and your background colour, then tells you whether that pair passes the WCAG accessibility standards used across the web. If you have ever squinted at pale grey text on a white page, you have felt the problem this tool solves.
Readability is not a design nicety. It decides whether visitors stay, understand your message, and take action — or quietly leave.
What does a color contrast checker actually measure?
A color contrast checker calculates the luminance ratio between a text colour and a background colour, giving a score such as 4.5:1 or 7:1, and compares that score against WCAG AA and AAA thresholds for normal and large text. The higher the number, the easier the text is to read, and a passing verdict means the pair meets a recognised accessibility bar rather than someone's personal taste.
The maths behind the score is the WCAG relative luminance formula. You do not need to learn it. You only need to know what the thresholds mean and what to change when a pair fails.
- The ratio itself: a number from 1:1 (identical colours, invisible text) to 21:1 (black on white, maximum contrast).
- Normal text verdicts: AA requires 4.5:1, while AAA requires 7:1 — the stricter standard used for the most accessible content.
- Large text verdicts: AA requires 3:1, and AAA requires 4.5:1, because bigger, bolder letterforms stay legible at lower contrast.
- The fix, not just the verdict: a good checker suggests the nearest colour that passes, so you keep your brand look instead of guessing.
Why low contrast costs you readers, not just style points
Low contrast excludes people first and frustrates everyone else second. Readers with low vision, ageing eyes, or colour vision deficiency may find your content unreadable, while everyone else struggles on a phone in bright sunlight or on a cheap office monitor.
The business cost is quiet but real. A landing page with washed-out body text gets fewer form completions. An email with faint call-to-action text gets fewer clicks. A pricing page where the fine print blends into the background breeds distrust, even when nothing is hidden on purpose.
Accessibility law and procurement add a second reason to care. Many public-sector and enterprise buyers now ask for WCAG conformance, and a site full of failing pairs is an easy reason to lose a deal before the demo starts.
Contrast is about the finished pair, not the colour alone. A light orange that looks fine as a button background can fail badly once white text sits on top of it — always test the exact combination your visitors will see.
A real check: the orange hero banner that failed
Consider a fictional but typical scenario. Maya, a freelance designer, builds a landing page for a local bakery. Her hero banner uses white text on a warm orange background, hex #FF8C42, because it matches the bakery's branding and photographs beautifully.
It looks striking in her design tool. It fails in the real world. Here is what a check of her exact colours shows:
| Pair tested | Contrast ratio | Verdict for normal text |
|---|---|---|
| White #FFFFFF on orange #FF8C42 | 2.31:1 | Fails AA (needs 4.5:1) and AAA |
| Dark text #1F2937 on orange #FF8C42 | 6.35:1 | Passes AA, fails AAA (needs 7:1) |
| White #FFFFFF on deep orange #9A3412 | 7.31:1 | Passes AA and AAA |
Maya has two honest fixes, not one. She can keep the bright orange and switch the headline to dark text, which passes AA at 6.35:1. Or she can keep white text and deepen the background to #9A3412, which passes AAA at 7.31:1.
She chooses the second option for the hero headline, because headlines carry the page's main message, and uses the dark-text version for smaller labels. One check, two decisions, no redesign. That is the whole point of testing before you publish rather than after a complaint arrives.
Test hover and disabled states too, not just the default state. Buttons that pass at rest often fail when they lighten on hover or fade when disabled — and those are exactly the states users need to read to act.
How to check a colour pair in under a minute
Open the color contrast checker and work through three steps. The tool is free, and the whole check takes less time than choosing the colour did.
- Enter text and background: type or pick your foreground (text) colour and your background colour, using hex values or the colour pickers.
- Read the ratio verdicts: check the AA and AAA pills for normal and large text, and note whether your pair passes, fails, or only passes for large text.
- Apply the passing fix: use the nearest passing fix suggestion to nudge one colour just enough to pass, keeping your palette recognisable.
If you are checking a whole page, use batch pair checking to run several combinations at once — headings, body text, buttons, and footer links — instead of re-entering colours one pair at a time.
For a related accessibility check, run your key images through a colour blindness simulator as well. Contrast and colour vision are different problems, and a page can pass one while failing the other.
If a failing pair is hiding on your homepage, pricing page, or signup form, it is quietly costing you readers and leads. Move your site to CodexFuse and let a fully managed team handle your hosting, security, and upkeep on pay-as-you-go credits — so you can fix the content while the platform takes care of the rest.
Get Started with CodexFuseWhat counts as passing? AA, AAA and large text explained
WCAG defines two conformance levels that most teams target, and the difference matters when you set your own standard.
| Level | Normal text | Large text | When to use it |
|---|---|---|---|
| AA | 4.5:1 | 3:1 | The standard most websites and legal requirements aim for |
| AAA | 7:1 | 4.5:1 | The stricter standard for maximum accessibility, worth aiming for on key content |
Large text means text at 18pt (24px) or larger, or 14pt (18.66px) bold or larger. Everything else counts as normal text and faces the higher bar.
A practical rule: aim for AA everywhere, and AAA for headlines, navigation, form labels, and calls to action. Those are the elements that decide whether someone can use your site at all.
What this checker does not do
Honest limits matter, because a passing ratio is not a full accessibility audit. Here is what the tool will not tell you:
- It does not test real vision conditions: a pair can pass the ratio maths yet still confuse readers who cannot distinguish certain hues — pair it with a colour vision check for full coverage.
- It does not judge font choice or size: thin, decorative fonts at small sizes stay hard to read even at a passing ratio, so treat typography as a separate decision.
- It does not scan your whole site automatically: you check the pairs you enter, so work from your actual page inventory — headers, buttons, forms, footers — rather than testing one hero banner and declaring victory.
- It does not fix your design for you: the nearest passing fix is a suggestion; you still decide which colour moves and how far, based on your brand.
Note also that the tool asks you to sign in to use it, per the tool page, so create a free account first if you have not already. The check itself is free and unlimited once you are in.
Where to use it beyond websites
Contrast problems live anywhere text sits on colour, not only on web pages. Run the same check on email templates, where brand colours often carry over from the website without testing, and on slide decks, where projected colours wash out far more than screen colours do.
Documents and PDFs deserve the same treatment, especially reports and invoices that customers print or read on phones. And if your product ships an app, test its dark mode separately — pairs that pass on a light background routinely fail when the palette inverts.
When a pair passes but still looks muddy, the problem may be saturation rather than lightness. An image contrast adjuster can help with photos and graphics, while a palette builder helps you pick harmonious colours before you test them. If you are converting brand colours between formats for developers, a CMYK to RGB converter keeps the values consistent across print and screen.
If colour is central to your brand, read how to build a palette that looks designed, not random — then run every pair in that palette through the color contrast checker before it reaches production.
Frequently Asked Questions
What is a good contrast ratio for website text?
For normal body text, aim for at least 4.5:1 to meet WCAG AA, and 7:1 if you are targeting AAA. Large text needs 3:1 for AA and 4.5:1 for AAA. Anything below 3:1 will be difficult for many readers, even at large sizes.
Is the CodexFuse color contrast checker really free?
Yes. The tool is free with unlimited checks, though the tool page notes you need to sign in to use it. Create a free account, enter your colours, and you get ratios, AA and AAA verdicts, and a nearest passing fix without paying.
Does a passing ratio guarantee my site is accessible?
No. Contrast is one part of accessibility. Keyboard navigation, alt text, heading structure, and form labels all matter too. Treat a passing ratio as a necessary check, not a complete audit.
What should I do if my brand colours fail?
Move one colour, not both, and move it as little as possible. Darken the text or deepen the background until the pair passes, using the nearest passing fix as a starting point. If neither move is acceptable, reserve the failing combination for large decorative elements only, never for text people must read.
Can I check many colour pairs at once?
Yes. The tool supports batch pair checking, so you can test headings, body text, buttons, and links in one pass instead of checking each pair separately.
Should I test dark mode separately?
Absolutely. Dark mode inverts your palette, so pairs that pass on light backgrounds often fail on dark ones. Test both themes with the same rigour, and treat them as two separate colour systems.
Check your colours now, then fix the failures
Open the color contrast checker, enter your homepage's headline pair, your button pair, and your footer link pair, and write down every failure. Fix the worst one today — darken one colour, re-check, and publish. Your readers will never email you to say the text was readable, and that silence is exactly the point.
If maintaining the site behind those colours is eating your week — updates, security patches, backups, email deliverability — stop babysitting it. Move your hosting, business email, and security to CodexFuse, where a fully managed platform runs it all on pay-as-you-go credits with no subscriptions and no lock-in. Check your contrast, fix the failures, and let CodexFuse carry the infrastructure while you focus on the content your readers actually came for.