Web design guidelines for color blind users

Tags: , , , &


For most designers, designing for colour blind users is not even something that is on their radar. For a long time I’ve always assumed that designers can’t be colour bind because after all, colours make up a large portion of a designer’s tool box and the notion of a colour blind designer is somewhat of an oxymoron. I’ve also never met anyone who was colour blind, so I assumed the number was reasonably low.

This all changed a couple of years ago, when I met a colour blind fellow designer at work – you can imagine my shock! He was a brilliant UX designer and instead of relying heavily on colours to indicate usability, he used shapes and lines instead and his designs were simple to understand and use. Needless to say, this spark my interest in this topic, and in this article I’ll share with you a few guidelines for designing for the colour blind.

  1. The Challenge
  2. Is it worth designing for the colour blindness?
  3. What can be done about it?
  4. Conclusion

The Challenge

The main challenge with designing for the colour blindness is that there is a limited range of hues that can be seen.

So what does that mean for designers? Simply put is means that some colours appear as others and blend together making them hard to tell apart from each other. So some colours that have very little contrast between them will pretty much look the same. This in turn causes confusion. most commonly this occurs with the colours red and green.

Below are a few examples of what I’m getting at:


so in order of top left to bottom right this images shows us the various types of colour blindness. The first Zinger is the normal image as someone without colour blindness would see it. The second one is how someone with Protanopia (red colour blind) would see it followed by how Deuteranopia (green colour blind) and Tritanopia (blue colour blind) would see the same image.

Is it worth designing for the colour blindness?

For the small amount of effort required to accommodate your designs for colour blindness, I’d say yes. Considering it’s estimated that 8% of men (colour blindness is rarer in women — more like 0.5%) have some form of colour blindness. That’s a fairly large group of people that you could be missing out on if your site is not colour blind friendly.

What can be done about it?

From having a look around there seems to be a few good resources out there to help you see your designs as if you were colourblind. Below I’ve grabbed a few of the ones that I think were the best solutions for both your current designs and any future projects that you want to be colour blind accessible.

Grey scale test

One thing a lot of people are saying is that contrast is the big issue here. So the quickest approach for checking whether a design will work in terms of colour blindness is a simple grayscale test. Just convert you design into grayscale using photoshop or which ever program you’d prefer. If all the elements stand out enough from each other then your probably fine. If some are hard to tell apart then you might want to tweak your colours a bit.


Grey scale comparison test of our blog page.

The above image is just a quick test of our blog. As you can see it holds up pretty well considering it was not really designed with colour blindness in mind. The only thing that I would say needs to be tweaked is the Link text. Without colour it’s shade doesn’t contrast well with that of the body text making it hard to tell which words are links and can be click.

Introduce some texture

One option that can be used to differentiate multiple elements that look similar is the use of texture along with colour. This could be put to use in an infographic to distigest each different metric, rather than just colour alone. You may also implement this idea into the hover states of your websites buttons if there is not a big difference in contrast between the two states.


Just a quick example of texture versus non-texture elements.

The ColourADD system

This solutions is the most interesting to me. Basically it takes each primary colour and pares it with a shape. The shapes have been designed to fit in with each other, allowing them to represent the various secondary colours. Some thought has also been put into representing a dark and light version of each colour in order to provide more colour options if they are required.


Example of the ColourADD system.

The above image is an example of the ColourAdd system. Those probably aren’t the exact colours they use but it should give you a good idea what i’m talking about.

Alternative state changes

Another option for interactive elements such as buttons is to introduce a visual change other than colour between its different states. Continuing with button example, instead of just changing the colour on hover you could introduce a border.


Button hover state example.

Because this changes the appearance of the button it very clearly alerts the user that they can interact with the button. It is also a change that is not colour specific, meaning anyone affected by colour blindness won’t struggle to tell the difference.


So the next time you’re picking out colours for you design think about whether there is enough contrast between them. Test it out and see if you need to re-think some of your choices because 8% is a fair number of people to be disregarding.

Also if you are struggling to find colours to use in your next project check out one of our other posts on Colour tools and resources.

People who have viewed this post also viewed

Leave a comment

* Required fields


Please enter the CAPTCHA text