Your colour scheme might be turning people away
If you've ever squinted at a website and thought "I bet this looks fine on the designer's laptop", you've experienced the most common accessibility problem on the web: not enough contrast between text and background.
It's also the one we find on roughly nine out of every ten community sites we look at. And, uniquely among accessibility issues, it's almost always fixable in an afternoon.
Why it matters more than people think
Around 1 in 12 men and 1 in 200 women have some form of colour-vision difference. Roughly 2 million people in the UK live with sight loss. Almost everyone over 40 starts to find low-contrast type harder to read in low light. And every smartphone user has, at some point, tried to read a screen in direct sunlight, temporarily joining all of the above.
When light grey text on a slightly-lighter-grey background fails for any of these people, they don't email you to complain. They just leave.
If a colour combination makes you lean towards the screen, it's failing someone else completely.
What WCAG actually asks for
The accessibility standard the rest of the world follows (WCAG 2.2 AA) says:
- Body text needs a contrast ratio of at least 4.5 : 1 against its background.
- Large text (18 pt and up, or 14 pt bold) only needs 3 : 1.
- The visual indicator of interactive things (borders on buttons, focus rings, icons that convey meaning) also needs 3 : 1.
You don't need to memorise this. You need to know that the standard exists and that a free tool can tell you whether you meet it.
How to test your site in five minutes
- Open your homepage.
- Go to WebAIM's contrast checker (it's free, no signup, no tracking).
- Use your browser's "Inspect element" feature to read the text colour and background colour off your homepage. (Right-click any text → Inspect.)
- Paste those two colours into the contrast checker.
- Read what it says.
Repeat for: navigation links, button text, the small print at the bottom, captions, error messages, and form field labels. Each of these has caught us out at least once.
What "passing" looks like in practice
You don't have to abandon a brand palette to meet the standard. You almost always have to:
- Pick a darker shade for body text than the one your designer first showed you.
- Stop using your brand colour for plain hyperlinks if the brand colour is bright and the background is also bright.
- Increase the size of small text rather than fight the contrast battle.
The one rule we tell every client
Pick your two text colours (one for body, one for headings) and one main link colour. Check those three against every background you actually use on the site. That's a 5-minute check that catches most of the trouble.
If you'd like a fresh pair of eyes to do that pass for you, we offer short, fixed-price accessibility audits to community organisations and non-profits. Tell us about your site and we'll come back within a couple of working days.