What UX/UI Designers Should Know About Colour Blindness

The answer lies in the cones: Illustration of the distribution of cone cells of the fovea an individual with normal colour vision (left), and a colour blind (Protanopia) retina. Note that the centre of the fovea holds very few blue-sensitive cones. Source

What is colour blindness?

Colour blindness – or colour vision deficiency – is when the eyes cannot distinguish between certain colours, and it is much more common in men, than in women. This usually happens between greens and reds, and occasionally blues.


The primary cells in the eye that detect colour are cones, of which there are 3 types: red, green and blue, and this is where our perception of colour comes from. According to the Colour Blindness Association: “Being ‘red/green colour blind’ means people with it can easily confuse any colours which have some red or green as part of the whole colour. So someone with red/green colour blindness is likely to confuse blue and purple because they can’t ‘see’ the red element of the colour purple.” Each colour is a mix of other colours, therefore it is more of a gradient exclusion, making colourblind people see the colour in a different way than those with normal vision.

Source

Colour blindness can vary in degree of severity, and is a consequence of cone cells being absent or one or more are not functioning as normal. The varying degrees of colour blindness ranges from individuals who encounter difficulty distinguishing between colours in low light, to those who are unable to do so in any light level. There are also very rare cases of individuals who perceive their environment in shades of black and white (monochromacy), distinguishing colours only by their brightness. The most common type of colour blindness is red-green (deuteranopia), followed by blue-yellow (protanopia). 

After reading all of this, it might seem like a big effort to re-consider your designs and make them accessible for colour-blindness conditions, however it is easier than it sounds. So as a UX/U designer, what can you do about it?

Create Contrast

Can you imagine yourself reading an article which consists of dark grey text on a black background, or very light grey text on white? Even if you are an individual with no known visual impairments whatsoever, most probably you still cringed at that sentence. Now imagine how much harder it is for those who do, and they need to navigate your product to get information, or to buy something they really like.

What would happen is user drop-off, lost sales and unhappy customers, due to the bad – or simply impossible – experience. It is usually typography that finds itself in the middle of this issue, purely because it is the element that suffers the most on user interfaces when the contrast is poor. When text is not readable, CTAs are not understood, important information is missed out on, and basically the whole product experience and messaging suffer because of it.

The WCAG website offers the onsite option to change text size and/or colours, to make it easier for individuals with visual impairments.
Source

Use more than just colour

Attributing meaning within context to elements in the user interface requires more than one way. 

A form which alerts the user of any errors by changing only the form field outlines to red will not only be useless for most colourblind users, but it also confuses those with normal vision as to what exactly is wrong. The solution to this is adding an error message beneath the field, inserting an error or warning icon as part of the error and maybe also moving the screen up to the incorrect field area – literally taking the user to where action is required. 

Source

Experience it yourself

Empathy is first and foremost in every UX designer’s handbook. There are multiple ways of checking whether your design is good for colourblind users: 

  1. Design your product in black and white first. Not only is this a more efficient way of showing early prototypes, but it also follows a principle famous with brand designers: if a something works in greyscale, it will only work even better in colour. The same goes for UI: if users can navigate your product without relying on colours, it will be accessible for everyone.
  2. Make sure your product is in line with WCAG  Guidelines. There are 3 levels of accessibility per guideline; the more you tick, the better. WCAG covers accessibility across the board, not just for colourblind users, therefore following it will be beneficial for all kinds of individuals in your target audience.
  3. Use online colour contrast checkers. These are completely free and will show you whether the text size and colour you implemented are readable on the background colour you selected. Some official ones include WebAim and WCAG Contrast Checker. Keep in mind that many individuals who are not colourblind have other visual impairments which can be aided with high contrast and zooming abilities.
  4. Know your design applications. Photoshop offers the functionality to view your artwork in certain colourblind modes; almost literally putting yourself in your audience’s shoes!
Adobe Photoshop offers the option to view your artwork as those with Protanopia or Deuteranopia would.

A Caring Consideration

At this point, you might have noticed a very valid insight: consideration for colourblind users benefits all. In fact, any accessibility consideration is an added benefit that causes a ripple effect on your product experience. When we open our eyes to challenges that are unfamiliar to us yet very real, it does not just make us great user experience designers but also better people.