On this page
Colour contrast is the difference in brightness between your text and the background behind it. Too little, and people struggle to read your prices, opening hours or phone number, especially on a phone outside in daylight. The accepted standard for small business websites is a contrast ratio of at least 4.5:1 for normal text, and you can check any colour pair in a few seconds.
Try the free tool: our colour contrast checker takes two colours as hex codes (like #767676), shows the contrast ratio, and tells you whether the pair passes the WCAG AA and AAA levels for normal and large text. It runs in your browser and nothing is uploaded.
Why colour contrast matters for a small business
Low contrast is one of the most common problems on small business websites, and it’s easy to miss because the person who chose the colours can usually read them on a good screen indoors. Your customers might be:
- older, or have less sharp eyesight
- colour blind (around 1 in 12 men have some form of colour vision deficiency)
- reading on a cheap phone with the brightness turned down
- standing outside in the sun, waiting for your page to load
If they can’t read the button that says “Book a table” or “Get a quote”, they’ll go elsewhere. Good contrast also makes a site look more professional, and it’s part of making your website accessible to disabled visitors.
What contrast ratio do I need?
Contrast is given as a ratio from 1:1 (no difference, such as white on white) to 21:1 (black on white). The Web Content Accessibility Guidelines (WCAG) set these thresholds:
| Text | AA (the usual target) | AAA (stricter) |
|---|---|---|
| Normal text | 4.5:1 | 7:1 |
| Large text | 3:1 | 4.5:1 |
Large text means at least 24px regular, or about 18.7px if bold. Most body text, menus and small buttons count as normal text.
Aim for AA as a minimum on everything people need to read. AAA is worth reaching for body text if you can, but it’s not expected for every element.
What about buttons, icons and form boxes?
WCAG also asks for at least 3:1 contrast for the edges of form fields, icons that carry meaning, and the outline that shows which link or button is selected when someone uses a keyboard. The text inside a button still needs 4.5:1 against the button colour.
How to find your website’s colours
You need the hex code for each colour: a # followed by six letters and numbers.
- From your website: in Chrome or Edge, right-click the text and choose “Inspect”. The colour and background are listed in the Styles panel. Firefox works the same way.
- From your brand guide or logo files: your designer may have given you hex codes.
- From a picture: free colour-picker browser extensions let you click anywhere on a page to read the colour.
Then enter the text colour and background colour into the contrast checker.
Worked examples with real colours
These are the ratios our checker gives for some common choices.
Light grey text on white
Pale grey text looks tidy in a design mock-up. It’s also the most common failure.
- #999999 on white: 2.85:1. Fails AA for normal text, and fails even for large text.
- #777777 on white: 4.48:1. Just fails AA. Close isn’t enough.
- #767676 on white: 4.54:1. Passes AA. This is about the lightest grey you can safely use on white.
- #595959 on white: 7.00:1. Passes AAA.
A Ludlow café with a cream background
Say a café in Ludlow has a warm cream background (#f5f0e6) and has been using a soft grey (#a3a3a3) for its menu prices.
- #a3a3a3 on cream: 2.22:1. Fails clearly. The prices are hard to read on a phone.
- A dark warm brown, #5c5346, on the same cream: 6.65:1. Passes AA comfortably and still fits the cosy feel.
The brand stays the same. The text just gets darker.
A Shrewsbury trade with an orange button
Bright orange is popular for “Call now” buttons. With white text, it often fails:
- White text on orange #f5a623: 2.03:1. Fails, even for large text.
- Black text on the same orange: 10.36:1. Passes AAA.
If you love the orange, keep it and switch the text to black or a very dark navy.
Green buttons
- White on a mid green, #4caf50: 2.78:1. Fails for normal text.
- White on a darker green, #2e7d32: 5.13:1. Passes AA.
Often the fix is just choosing a deeper shade of the same colour.
Common contrast problems to check
- Text over photos. A headline over a hero image may pass on the dark part of the photo and fail on the sky. Add a dark overlay or put the text on a solid panel.
- Placeholder text in forms. The faint “Your name” text inside a box is often far too pale. If people need it to understand the form, it needs good contrast, and a proper label above the box is better.
- Footer text. Small grey text on a dark grey footer, where your address and phone number usually live.
- Links in body text. A light blue link on white can fail. Underlining links also helps people who can’t tell the colours apart.
- Hover and disabled states. Check what the button looks like when it changes colour, too.
What the checker doesn’t test
Contrast is one part of accessibility. Passing doesn’t tell you whether the font is too thin, whether a menu works with a keyboard, or whether images have useful descriptions. It’s a quick and reliable first check. For a wider look at how trustworthy and usable your site feels, try our website trust score and call to action checker.
How to fix contrast on your site
- WordPress: most themes have colour settings under Appearance, then Customise or Editor. Change the text or button colour, then recheck.
- Website builders: look for “Site styles” or “Theme colours”. Changing one style usually updates every page.
- A WebHostGB managed website: we measure contrast on every page before launch (see how we check every website). If you want a colour changed later, email us. It’s one of the 10 changes a month included in the £47 a month plan. See what’s included.
Try the free tool: check your main text, your buttons and your footer with the colour contrast checker. If you’d like someone to go through the whole site, ask for a free website review, or browse the other free website tools.
Colour contrast questions
What is a good contrast ratio for a website?
At least 4.5:1 for normal text and 3:1 for large text. That’s the WCAG AA level, which is the usual target. For body text, 7:1 or higher is even easier to read.
Is black on white the best contrast?
It’s the highest possible, 21:1. Some people find pure black on pure white a little harsh for long reading, so a very dark grey or navy on white is a popular choice. The dark navy our checker starts with, #06162d, measures 18.10:1 on white.
Do I have to meet WCAG on a small business website?
UK public sector websites have specific legal requirements. For private businesses the Equality Act 2010 expects reasonable adjustments for disabled customers, and WCAG AA is the standard most people use to judge a website. Either way, readable text is simply good for business.
Does colour contrast affect SEO?
Not directly. But readable pages are easier to use, and people are more likely to stay, read and get in touch. That’s what you want from the website in the first place.
What if my brand colours fail?
Keep them for things that don’t carry text, like backgrounds, borders and illustrations, and use a darker shade or black for the text on top. Most brands have room for a dark version of their main colour.