Picture this: you open a website and the text is so pale you have to squint, lean in, and shade the screen with your hand — and you still cannot read it. You close the page in three seconds. Now imagine that page was yours. A visitor just left your blog, your shop, or your portfolio for exactly that reason, and you will never know. That is the problem today's free tool solves in about thirty seconds.
Try the free Contrast Checker now — no signup, takes 30 seconds.
Key Takeaways
- A contrast checker measures how much your text colour stands out against its background and gives you one number: the contrast ratio.
- Normal body text needs a ratio of at least 4.5 to 1 to pass WCAG level AA; large text needs 3 to 1; the stricter AAA level asks for 7 to 1.
- MultiTool Hub's Contrast Checker is free, needs no signup, and shows the exact ratio, pass or fail for AA and AAA, a live preview, and a suggested colour that passes if yours fails.
- Checking takes about 30 seconds: pick your two colours, click Check Contrast, and read the result.
- About 1 in 12 men and 1 in 200 women have some form of colour blindness — text that passes AA is readable for almost everyone.
What is a contrast checker?
A contrast checker is a free online tool that compares any two colours — your text colour and its background — and works out their contrast ratio, a number from 1 to 1 up to 21 to 1, then tells you whether the pair passes or fails the WCAG accessibility rules for normal text, large text, buttons and icons.
Contrast is simply how much a colour stands out against the colour behind it. Dark text on a white page is high contrast — your eyes separate the letters from the background without effort. Pale grey text on a white page is low contrast — the letters almost melt into the background, and reading becomes tiring work. The Contrast Checker on MultiTool Hub turns that feeling into a number you can trust, instead of a guess.
Why does this matter to you? Because every word you publish — a blog post, a CV, a class handout, a shop page, a slide deck — is read by real people on real screens, often in bright sunlight, on old phones, or with eyes that do not see colour the way yours do. If your text fails the contrast test, some of those people simply cannot read it. They will not email you to complain. They will just leave.
Why does text contrast matter so much?
The short answer is that readable text is the whole point of publishing anything. You can write the best article in the world, but if the words are hard to see, nobody finishes it. Here is what weak contrast actually costs you.
Visitors leave. People judge a page in seconds. Text that strains the eyes feels unprofessional, even when the content is excellent. A reader who squints once will try another site that is easier on the eyes.
Some people cannot read it at all. About 1 in 12 men and 1 in 200 women live with some form of colour blindness, and many more people read with ageing eyes or poor vision. For them, pale grey on white is not "stylish" — it is invisible. The WCAG rules exist precisely so that websites work for these readers too.
It affects your search ranking. Search engines watch how visitors behave. If people bounce off your page in seconds because they cannot read it, that is a signal your page did not help them — and over time, that hurts where you rank. Accessible pages keep readers longer, and readers who stay are the ones who share, link and come back.
Here are two real situations. A student designs a poster for a class project using light blue text on a white background because it looks pretty on her laptop. Printed and pinned to a notice board, the text is unreadable from two steps away — a 10-second contrast check would have caught it before printing. A freelancer builds a portfolio site with trendy light grey body text. A client opens it on a phone in bright sunlight and cannot read a word of it — the freelancer never hears back, and never learns why. Both problems had the same 30-second fix.
The key point: contrast is not a design opinion — it is a measurable number, and the pass mark is public. Check it before you publish, not after someone complains.
How does the contrast ratio work?
The ratio comes from a simple idea. Every colour has a brightness number called relative luminance — a single number for how much light the colour gives off. The formula weights green most and blue least, because that is how human eyes respond to light. The contrast ratio is then the lighter colour's brightness plus 0.05, divided by the darker colour's brightness plus 0.05. The result runs from 1 to 1, for two identical colours, up to 21 to 1, for black on white — the strongest contrast possible.
You never need to do this maths yourself. The tool does it in your browser, instantly. But the pass marks are worth knowing, because they are the numbers every designer and developer works to:
| What you are checking | Level AA (the standard) | Level AAA (the strict goal) |
|---|---|---|
| Normal body text | 4.5 to 1 | 7 to 1 |
| Large text (24 pixels or bigger, or 18 pixels bold) | 3 to 1 | 4.5 to 1 |
| Buttons, icons and field borders | 3 to 1 | — |
Level AA is the target almost every website aims for — it is the legal standard in many countries and the level most organisations are asked to meet. Level AAA is a stricter goal for maximum readability. A pair that passes AAA passes everywhere; a pair that fails AA fails for a real share of your readers.
Try it yourself right now, with numbers you can check. Navy blue #001F54 on white gives a ratio of 15.86 to 1 — a huge pass. Mid-grey #757575 on white gives 4.61 to 1 — it passes AA for normal text, but only just, and it fails AAA. Bright red #FF0000 on white gives 4.00 to 1 — it fails AA for normal text, though it passes for large text. That is the whole lesson in three numbers: small changes in shade move you across the pass line.
See your own ratio instantly — try it free, no signup.
How do you check your colours in 30 seconds?
Here is the whole process, using the free Contrast Checker on MultiTool Hub:
- Pick your text colour. Use the colour picker, or type the hex code — the six letters or numbers after a #, like #222222 for dark grey. A hex code is just a colour's address: the first two characters set the red, the next two the green, the last two the blue.
- Pick your background colour. The same way — #FFFFFF is plain white. If you do not know your colours yet, pick them first with the Color Picker tool and paste the codes in here.
- Click "Check Contrast". The exact ratio appears at once, with pass or fail for AA and AAA, normal and large text, plus buttons and icons.
- Read the live preview. The tool shows a real heading and paragraph in your two colours, so you can see — not just read about — how your text looks. If it feels hard to read in the preview, it will feel hard on your website too.
- If it fails, take the suggestion. The tool offers a text colour close to yours that passes AA. One click applies it, and you can re-check instantly.
Here is a real worked example. We tested a grey many websites actually use: text #777777 on a white background. The tool gave a ratio of 4.48 to 1 — a fail for normal body text at level AA, by a hair. It then suggested a slightly darker grey, #717171. One click applied it, and the new ratio was 4.88 to 1 — a pass. Two almost identical greys, one fails and one passes, and the difference is invisible to the naked eye but real for your readers. That is exactly why you check with a tool instead of trusting your eyes.
Another example: pure red #FF0000 on white gives 4.00 to 1, so it fails AA for body text — which is why red error messages in light red are so often unreadable. The tool suggests #E60000, a barely darker red, and the ratio climbs past the line. The fix never means giving up your brand colour; it usually means darkening it by one small step.
What mistakes do people make with text colours?
- Light grey body text. The most common mistake on the modern web. Designers pick #999999 or #AAAAAA because it looks soft and elegant on a big monitor in a dim room. On a phone in sunlight it disappears. Body text should be dark — #222222 or darker on white is a safe habit.
- Red or green text for meaning. Red for errors and green for success only work if everyone can see the colour and read the words. A red #FF0000 on white fails AA for body text, so an error message in that red is unreadable for exactly the person who needs it most. Darken the red, and add words or an icon as well as colour.
- Low-contrast buttons. A pale button with pale text looks calm and modern — and nobody can tell what it says. Buttons and icons need 3 to 1 against their background at AA level. Check the button text the same way you check body text.
- Text over photos and gradients. A contrast checker tests one flat colour against another. Text sitting on a photo, where the background changes from dark to light across the line, needs checking by eye — or a solid backing strip behind the text.
- Trusting your own screen. Your monitor is bright, new, and set the way you like it. Your readers' screens are not. A ratio is the same on every screen; your eyes are not. Check the number, not the feeling.
One more tip: check your colours in pairs, not one at a time. A dark blue heading and a grey paragraph can each pass on their own — but if the paragraph fails, the page still fails. Run every text colour on your page through the checker once, write down the ratios, and fix the failures before you publish. It takes five minutes for a whole page, and you only have to do it once per design.
Who should check their colours?
Students: check the text on posters, slides and project websites before you print or present. A poster that passes AA is readable from the back of the classroom; one that fails is decoration, not communication.
Teachers: run your slides and handouts through the checker once. Students at the back of the room, and students with low vision, will read everything you show — and you will never have to reprint a worksheet.
Freelancers and designers: put a contrast check into your delivery checklist. Clients notice when their site is easy to read, and accessibility is now part of what professional work means — it protects your client from complaints and from legal trouble in countries where AA is the law.
Bloggers and content creators: check your theme's text and link colours, and your button colours. If your links are a pale blue that fails AA, your readers cannot tell what is clickable. The Favicon Generator gives your site its icon; the Contrast Checker makes sure people can read it.
Job seekers: if your online CV or portfolio uses coloured headings, check them. A hiring manager skimming on a phone should read every line without effort — and if your text is hard to read, they move on to the next applicant.
Developers: check colour pairs before they ship, not after a user reports them. The Regex Tester checks your patterns the same way — small checks before launch save embarrassing fixes after it.
If your writing itself needs a check too, the Readability Checker scores how easy your words are to understand — contrast makes text visible, readability makes it understandable, and together they decide whether anyone finishes reading. Everything lives on MultiTool Hub — free tools, no signup, no downloads.
Frequently asked questions about contrast checkers
What is a good contrast ratio for text?
For normal body text, aim for at least 4.5 to 1 — that is the WCAG level AA pass mark, and it is the standard most websites are expected to meet. For large text, 3 to 1 is enough. If you can reach 7 to 1, you pass the stricter AAA level too, and your text is readable for almost everyone.
What is the difference between WCAG AA and AAA?
AA is the normal standard: 4.5 to 1 for body text and 3 to 1 for large text. AAA is the stricter goal: 7 to 1 for body text and 4.5 to 1 for large text. Most websites aim for AA, because AAA is hard to reach with brand colours; a pair that passes AAA is excellent, but AA is the level that counts as accessible.
Can I check a colour if I only know its name, like "sky blue"?
Colour names are not exact enough — "sky blue" could be a dozen different shades. Use the colour picker in the tool, or the Color Picker tool to find the exact hex code of your colour first, then paste the six-character code into the Contrast Checker. The hex code is what the maths runs on.
Does a passing ratio mean my text is readable for everyone?
Almost. A passing ratio means the brightness difference is enough for people with low vision and most forms of colour blindness. It does not check everything — two colours can pass the ratio and still look alike to someone with a specific colour blindness, and text over a photo still needs a check by eye. But a passing ratio is the single most important test, and it is the one the rules are built on.
Your next step
Open the free Contrast Checker, type in your text colour and your background colour, and click Check Contrast. If it passes, you are done in thirty seconds. If it fails, take the suggested colour, re-check, and publish knowing every visitor can actually read your words — it costs nothing, needs no signup, and your colours never leave your browser.
#ContrastChecker #WCAG #WebAccessibility #ColorContrast #WebDesign #AccessibilityMatters #FreeTools #MultiToolHub
