Colour Blindness & User Interface.

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.




Student, Learner and Contributor

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Trail Renderer

My 8 solutions to improve the CoffeeHouse business app in 8 minutes.

Case Study : Vancouver International Film Festival App

The BMW M135i Is The Performance Car Bargain Of Your Dreams TEST

Best of UI — Mar 2020

Reflections on APFN2018 from a middle-aged designer/young futurist

User Centered Designer: Jonathan Ive

UNI announces ‘Culture Window’ — Architecture Competition to Cultural center at an airport in…

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Abhijit Rout

Abhijit Rout

Student, Learner and Contributor

More from Medium

UI/UX Case Study : Cake Shop Apps

The Binar Academy Website LMS (web enhancement) ~ UI/UX Case Study

UI/UX Project -TIJE Application Improvement

UI/UX Case Study: Designing Islamic Quiz Web App— KUISLAM