Designing for Colour Blindness: Or Why Your Green Button Might Be Red

Let’s be honest – running a small business is already like spinning plates while riding a unicycle on a tightrope in the rain. And now someone’s telling you your website might be a visual horror show for people with colour blindness. Great. Just what you needed, right?

But fear not! We’re going to break down what colour blindness actually is, why it matters when you’re designing your site, and how to fix the most common problems – all without needing a PhD in biology or a background in web design. And we’ll even chuck in a few laughs along the way. Let’s go!

What Even *Is* Colour Blindness?

Contrary to popular belief, colour blindness doesn’t mean seeing the world in black and white like an old detective film. Most people with colour blindness can see colours – just not all of them. It’s more like someone messed with the settings on their telly and now everything’s a bit… off.

The most common type is red-green colour blindness, which makes it hard to tell the difference between – you guessed it – red and green. Imagine trying to tell whether a traffic light says “Go” or “Stop” based on which bit is glowing. Yep. Bit tricky, that.

There are other types too, like blue-yellow colour blindness and the much rarer total colour blindness (where everything genuinely is black and white). But let’s stick with the basics, because even they can cause chaos if you’re not paying attention when designing your site.

Why Should Small Business Owners Care?

Look, we get it. You’re busy. You’ve got a to-do list longer than a queue at Greggs on a Friday morning. But designing your website with accessibility in mind – including for colour blind users – isn’t just a “nice to have.”

• 1 in 12 men and 1 in 200 women have some form of colour blindness. That’s a lot of potential customers.
• If your site is hard to use, people will bounce off it faster than a toddler on a trampoline.
• Google loves accessible websites – so it’s good for your SEO too!
• And finally… it’s just the right thing to do. Be a decent human. That’s always a win.

The Classic Colour Blindness Fails (And How to Avoid Them)

1. The Green “Buy Now” Button That Looks Like a Camouflage Blob

If your call-to-action button is green, sitting on a red background, and has white text… congratulations! You’ve just made it invisible to a big chunk of your audience.

Fix it: Use colour and contrast. Instead of relying on colour alone to show something’s clickable, make sure there’s plenty of contrast. Use a button shape, an outline, bold text – something to help it stand out, even in grayscale.

2. “Red Means Danger” – Not If You Can’t See It

Got a warning message in red text? It might look dramatic and urgent to you, but to someone with colour blindness, it could just be… another bit of text.

Fix it: Use icons, bold labels, or borders to help communicate the message. A warning triangle goes a long way. Bonus points if it’s got an exclamation mark – everyone knows that means “something’s gone a bit pear-shaped.”

3. Colour-Coded Charts That Might As Well Be Abstract Art

If your beautiful sales chart looks like a rainbow threw up on it, you might want to rein it in. Colour blind users can struggle to tell one data line from another.

Fix it: Use patterns, labels, or icons in your graphs – not just colour. Dashed lines, dots, and clear labels make your chart readable for everyone (including your uncle who still prints things out to read them properly – yes, that’s still a thing).

4. Stylish? Maybe. Readable? Not So Much.

That trendy pastel colour scheme you picked might look lovely to you, but it might also mean your text is basically unreadable to someone with visual impairments or colour blindness. Pink on light grey? Come on now.

Fix it: Use a contrast checker (there are loads online) to make sure your text actually pops against the background. If you can’t read it on your phone in daylight with your sunglasses on, it’s too faint.

5. The “Which One’s Selected?” Mystery

Some websites use colour alone to show what’s been selected – like a red box for “selected” and a green one for “not selected.” Trouble is, if those colours look the same to you, you’re in for a game of digital roulette.

Fix it: Add an icon (like a tick), a border, or bold text to show what’s been chosen. Clarity beats confusion every time.

Easy Wins for Accessibility (Without Redesigning Your Whole Website)

Use Clear Labels

Don’t rely on colour alone to get your point across. Use labels, text, icons – anything that makes your message clear even if someone sees the world like it’s stuck in sepia mode.

Test Your Site in Grayscale

One quick trick: take a screenshot of your site and turn it black and white. Can you still tell what’s what? If not, it’s time for some tweaks.

Use Online Tools

There are loads of free tools out there to simulate colour blindness and check colour contrast. Try:

• Colour Oracle (desktop app)
• Sim Daltonism (Mac app)
• WebAIM Contrast Checker
• Chrome extensions like Spectrum

Pick an Accessible Colour Palette

There are colour palettes made specifically to be accessible for people with colour blindness. A quick Google of “colour blind friendly palette” will give you more swatches than a Dulux showroom. Pick one and save yourself the grief.

Real Talk: You Don’t Have to Be Perfect

Look, nobody’s expecting your website to be perfect. It doesn’t need to win design awards. But a few thoughtful changes can make a massive difference to the people using it – and that includes colour blind folks.

If you’re working with a web designer, mention accessibility and colour blindness. If you’re doing it yourself, use the tools, test it out, and maybe ask a mate to have a look – ideally one who isn’t afraid to tell you your “funky mauve text” is actually a nightmare.

Wrapping It Up (In a Sensibly-Coloured Bow)

Designing for colour blindness doesn’t have to be scary. You don’t need a degree in optics or a sixth sense for shades of turquoise. All you need is a bit of empathy, a handful of free tools, and the willingness to test your site with a fresh pair of eyes – even if those eyes see colour a bit differently.

And hey, if all else fails, just remember this one golden rule: if your buttons look like camouflage, something’s gone horribly wrong.

Now go forth and design better websites. Your colour blind customers (and your bounce rate) will thank you!

And a final thought, check your printed marketing material as well 🙂