White text on a bright orange button. Pale grey body copy on white. A teal heading over a photo of the beach. These are the three contrast problems we see most on small business websites, and each one looks perfectly fine to the person who chose it, sitting at a good monitor indoors.
Your customers are reading on a phone in the ute at midday, or squinting at a flyer without their glasses. Low contrast doesn’t only affect people with a vision impairment. It makes everyone read slower, miss things and give up sooner.
The numbers to aim for
Contrast is measured as a ratio between the lighter and darker colour, from 1:1 (no contrast, same colour) up to 21:1 (black on white).
The Web Content Accessibility Guidelines (WCAG), the standard most accessibility requirements point to, set these minimums at level AA, according to the W3C’s explanation of the contrast criterion:
- Normal text: at least 4.5:1
- Large text: at least 3:1. Large means at least 18 point, or 14 point bold. On a website that’s roughly 24 px regular or about 18.5 px bold.
- The stricter AAA level asks for 7:1 for normal text.
Interface parts like button outlines, form field borders and icons that carry meaning need at least 3:1 against what’s around them.
Two details worth knowing. The thresholds aren’t rounded, so 4.49:1 fails. And text that’s part of a logo is exempt, which is why your logo can stay as it is even if your website text has to change.
How to check, in two minutes
You don’t need special software.
- Get your HEX codes. These are the six-character colour codes, like #F7941D. They’re in your brand style guide, or your web designer can give you them. In Canva, they’re shown when you click a colour.
- Open a contrast checker. The free one from WebAIM is the one most designers use. Paste in the text colour and the background colour.
- Read the result. It shows the ratio and a pass or fail for normal text, large text and interface elements.
- Check every real combination, not just your main ones. Button text on button colour, links on the background, footer text on the footer colour, text over hero images.
For text over photos, check against the lightest part of the image the text sits on. If it fails there, it fails.
What commonly fails, with real numbers
These are typical combinations, checked against the WCAG formula. The colours are representative examples, not any particular brand.
| Combination | Ratio | Normal text |
|---|---|---|
| White on bright orange (#F7941D) | 2.28:1 | Fails |
| White on bright teal (#2BB3A3) | 2.6:1 | Fails |
| White on lime green (#8DC63F) | 2.04:1 | Fails |
| Mid grey (#999999) on white | 2.85:1 | Fails |
| Darker grey (#767676) on white | 4.54:1 | Passes, just |
| Dark grey (#333333) on white | 12.63:1 | Passes easily |
The pattern: bright, cheerful, warm and “fresh” colours (oranges, yellows, limes, light teals, sky blues) almost never work with white text. They’re light colours, even when they feel strong.
Fixing brand colours that fail
Nobody wants to be told their brand colour is “inaccessible”. The good news is you rarely need to change the colour itself. You change how it’s used.
Option 1: flip the text colour
Bright colours that fail with white text often pass easily with dark text. In our examples, near-black (#222222) on that bright orange comes out at 6.98:1. Dark text (#1A1A1A) on the lime green is 8.52:1. Same brand colour, now readable. Many good brands use dark text on their bright colour for buttons.
Option 2: add a darker shade for text
Keep your bright colour for big shapes, backgrounds and graphics, and add a darker version of the same hue to the palette for text and buttons. A deep teal like #1F7A70 gives 5.15:1 with white, and still reads as “your teal” next to the brighter one. A darker green like #4E7A1E manages 5.09:1 with white.
This is the fix we use most when refreshing an existing brand. It doesn’t touch the logo, it just extends the palette. We’d write the rules into the brand style guide: “Bright teal for backgrounds and graphics only. Deep teal for text and buttons.”
Option 3: make it large
If the colour sits between 3:1 and 4.5:1, it can pass as large text. That’s fine for big headings. It isn’t a fix for body text, links or small buttons.
Option 4: fix the photo, not the text
For text over images, add a dark overlay to the photo (a semi-transparent black layer behind the text), move the text to a part of the image that’s plain, or take the text off the photo entirely and put it on a solid panel.
Print has the same problem
Contrast checkers measure screen colours, but the principle carries over to print. Pale text on coloured stock, reversed type in a thin font, or a yellow headline on white will all be hard to read on a flyer. And print usually loses a bit of contrast compared to screen, because ink on paper can’t get as bright or as dark. If it’s borderline on screen, it’ll be worse on paper.
Contrast is half of readability. The other half is size and weight, which we cover in typography basics for business owners. For the wider picture of what accessibility means for an Australian business website, see our accessibility basics guide.
Five combinations to check this week
Run your five most-used colour combinations through a checker this week: body text, links, main button, footer, and any text over a photo. Write down the ratios. Anything below 4.5:1 for normal text goes on the fix list.
If your brand colours are the problem, adding an accessible shade to your palette is a small, quick job that’s part of our branding and graphic design work. Pass your HEX codes on through the contact page and we’ll work out a shade that passes and still looks like you.