Colour Blindness & User Interface.

Abhijit Rout
4 min readMay 24, 2021

Do you reckon that 8% of all men and 0.5% of all women are colour blind?

First of all, let me tell you what colour-blindness is. Colour blindness is a colour vision deficiency that causes an individual to see lesser or no colour at all. People suffering from this deficiency cannot figure out the colour of a fruit, red signal or even their own cloth.

Types of colour blindness:

They are Deuteranopia (No Green), Protanopia (No Red), Tritanopia (No Blue), Monochromacy (100% colour blind). There are Deuteranomaly, Protonomaly, Tritanomaly and Achromatopsia. However, they all fall under the same domain of the four general colour blindness.

The human retina has three special cells called cones. Every cone is responsible for one part of the colour spectrum: red, green and blue. Cones react to light and forward information about the environment to the brain. In the eye, a tiny pit located in the macula of the retina provides the clearest vision of all. Only in the fovea are the layers of the retina spread aside to let the light fall directly on the cones, the cells that give the sharpest image. Also called the central fovea or Fovea Centralis. Then, the data is received and added together to produce the colours we see.

This is an illustration of the distribution of cone cells in the fovea of an individual with normal colour vision (left), and a colour blind (protanopic) retina. The centre of the fovea holds very few blue-sensitive cones. Also, all human beings see colour differently. Our eyes and brain work simultaneously to translate light to colour. I can see red, but the person standing next to me will see a brighter/darker shade of red.

How does it affect User Experience?

Every type of colour blindness causes inconveniences to people. This is also applicable to User Experience. If people can’t see the colour of the product, companies will lose their potential customer. Imagine you are waking on the road and can’t determine if to pass or to stop. Mostly, signals have a visual representation of the desired signal i.e. Walking Man on Green and Still Man on Red. While designing a UI for a product a designer must keep some tips in hand to make a colour blind-friendly design.

As you have noticed, we can’t truly depend on colours while designing a UI/UX. This could cause a problem for people with colour blindness. Instead, we can use icons, patterns or textures, add text labels to describe an event, control the contrast.

In the above snapshot, we can see that colours aren’t effective while designing the UI/UX of your product.

Here, using icons can help both normal people with colour visibility as well as people with colour blindness.

In the above picture, we can see that using patterns can help a person with colour blind distinguish between different parts of a chart.

In Valorant (3D fps game), enemy highlight colour has support for colour blindness.

Adding support for colour blind people can help them for a smooth user experience. Worldwide, there are approximately 300 million people with colour blindness, almost the same number of people as the entire population of the USA. Developing colour blind support in your application is empathetic to people who can’t figure visible colour.