Skip to content

Website Optimization For Colour Blindness

Image to depict colour blindness

If you have an online business or a business with an online component, you have probably spent a lot of time trying to make it as user friendly as possible. You picked an easy to navigate layout, you have clear, professional photos of your merchandise and you even designed a background watermark to give the site a really sleek look. It all looks good to you, but how does it look to someone with Colour Blindness?

Testing Accessibility

First things first, you need to see your page through the eyes of a Colour Blind customer. Thankfully, there’s an app for that. Actually, there’s probably hundreds of apps for that, but here are some helpful tools you can try out;

Sim Daltonism– currently available for iOS and Mac, you can download the app to your iPad or iPhone or use the Mac app to filter a region of the screen and experience it through the eyes of the Colour Blind.

Coblis – handy to check images, just upload and select one of their different types of Colour Blindness filters.

Colorfilter.wickline – Although still in development, this is a handy tool because you can type in the URL of your site and select the Greyscale filter. The Greyscale filter is the most useful for identifying problem areas and also areas that the filter is unable to process.

Identifying Accessibility Issues For Colour Blind Web Users

Okay, you have the tools to test your webpage, but what are you looking for?

Unreadable Sections/Headings/Text

Basically any text or headings that cannot be read clearly when using the Greyscale filter or any of the Colour Blindness Simulator filters. Something bright and colourful that you consider easy to read may show up as warped or have unreadable text when you test it.

Colour Choices for Products

If you are offering a product in a variety of colours and asking a customer to choose, try using the colour names instead of just a swatch of the colour in a square. My friend Michael once told me a hilarious story about showing up to his college black tie ball in a salmon coloured shirt after an online shopping experience gone wrong. The shirt was offered in three colours and he was sure he had correctly identified the white shirt, his friends didn’t tell him until the end of the night and he thought the people smiling and pointing at him were admiring how good he looked in his tux. For others, Michael’s experience could be frustrating and embarrassing, so if you want to keep your customers happy, make sure you attach a text description to any colour choices.


A well-designed watermark can give a website a more professional feeling and provides quality continuity across the site. When you test out your site with the above tools, you will quickly see if the contrast is too strong. The recommended contrast for a watermark is as low as 8-15%.

Navigation By Colour

Just no. Don’t do this. It’s confusing for Colour Blind People when you say ‘click the red button to continue or the green button to return to the previous page’ and there are many better, more professional ways to display navigation options.

Why Should I Optimize My Webpage For Colour Blindness?

That’s a good question. I assume you like money? And customers? And want more of both? Well apart from making the world a better and more accessible place, you will open up your business to a larger customer base. More customers mean more sales, but only if they can use your website with ease. If it takes a customer half an hour to navigate a complicated website and they end up with the wrong product because they couldn’t navigate your colour selection at the checkout, do you think they will use your site again?

But really, I can hear you ask, how many Colour Blind People are there? The answer may surprise you.

  • 1 in 12 men are Colour Blind
  • 1 in 200 women are Colour Blind
  • Almost 5% of the population are colour blind.

That’s a lot of people and a lot of potential customers you could be missing out on if your site isn’t accessible to them. As always, if you would like help optimizing your website, you can contact Adaptable Solutions here.


Drop us a line

+353 87 9800 456

Make things happen - contact us

You might also enjoy