Designing for colourblind people.

What is colour blindness?

Colour blindness is a condition in which an individual is unable to distinguish specific colours or sees them differently than they are typically seen by people with normal colour vision. 1 in 200 women are colourblind, and so are 1 in 12 men.

This is usually caused by an inherited genetic mutation that affects the functioning of the colour-sensitive cones in the eyes.

Colour blindness affects different people in different ways and can range from mild difficulty in distinguishing between certain colours to an almost complete inability to see any colour at all.

Why this affects more in men?

Colour blindness affects more men than women because the genes responsible for most forms of colour blindness are located on the X chromosome.

Women have two X chromosomes, while men have one X and one Y chromosomes. This means that if a woman inherits a mutated gene for colour blindness from one parent, she has a second X chromosome from the other parent that can compensate for the mutation.

Conversely, men only have one X chromosome and are more likely to inherit colour blindness if the gene is present.

As a result, colour blindness is much more common in men, affecting approximately 8% of the male population compared to only 0.5% of the female population.

Types of colour blindness.

Deuteranopia.

Deuteranopia is a variation of colour blindness that affects the perception of green light.

It is caused by a defect in the green-sensitive cones in the eyes, leading to an inability to differentiate between greens, reds, and oranges.

Deuteranopia is one of the most common forms of colour blindness and affects approximately 1% of the male population and 0.1% of the female population.

People with deuteranopia may struggle to differentiate between specific colours in everyday life, but with the help of specialised tools, they can still live normal lives and perform most tasks.

Protanopia.

Protanopia is a type of colour blindness that affects the perception of red light. It is caused by a defect in the red-sensitive cones in the eyes, leading to an inability to differentiate between reds, greens, and browns.

Protanopia is one of the most common forms of colour blindness, affecting approximately 1% of the male population and 0.1% of the female population.

Tritanopia.

Tritanopia is a rare type of colour blindness that affects the perception of blue light. It is caused by a defect in the blue-sensitive cones in the eyes, leading to an inability to differentiate between blues, greens, and yellows.

It is also one of the least common forms of colour blindness, affecting approximately 0.01% of the population.

Testing images for colour-blind people.

There’s a website where you can upload an image and convert it to the various types of colour blindness, allowing you to visualize what a person with that disability would see.

Why is UX accessibility so important?

UX accessibility ensures that digital products and services are usable by people with disabilities, allowing them to access and benefit from the same content and functionality as everyone else.

Accessibility is a human right, and providing accessible experiences is not only the right thing to do, but it also makes good business sense.

By prioritising UX accessibility in the design and development process, businesses and organisations can create more inclusive, engaging, and effective digital experiences for all users, regardless of their abilities.

How do we design for better colour accessibility?

Using high-contrast colour combinations, such as black and white or blue and yellow, can help ensure your design is legible for people with colour blindness.

Use colours and symbols.

Using symbols and patterns can be effective in making your design accessible. For example, using symbols like a warning sign or a wheelchair symbol can convey meaning even if colour is not distinguishable.

The same applies to active items. For instance, a pagination element shouldn't rely only on colour to show its state – it's also important to have a shape around it to differentiate it from the others.

Did you know?

Apparently, the Facebook logo is blue because Mark Zuckerberg has Deuteranopia: he is red-green colourblind, which means he sees blue better than other colours.

Use contrasting colours.

High-contrast colour combinations, such as black and white or blue and yellow, can improve the legibility of text and other elements for users with visual impairments.

The World Wide Web Consortium (W3C) has established a standard for minimum colour contrast ratios for text and non-text elements on the web, which is 4.5:1 for standard text and 3:1 for large text. Adhering to these standards can help ensure your website is accessible to visually impaired users, including those with colour blindness.

You can check whether or not your design contrasts enough with a contrast checker such as this one and compare it with the WCAG levels checklist. You should aim to reach the highest level so you can make your designs as accessible as possible.

Level A (Beginner).

The presentation doesn’t rely exclusively on colour.

Level AA (Intermediate).

The colour contrast ratio between the text and background colour is at least 4.5 to 1.

The colour contrast ratio between user interface components, graphics, and nearby colours is at least 3 to 1.

Text can double in size without losing function or context.

Level AAA (Advanced).

The colour contrast ratio between your text and background is at least 7 to 1.

Colour palette.

99% of people with colour vision deficiency have red-green colour blindness. It is essential to keep that in mind when choosing the palette colours.

For example, links are usually blue by default because most people can distinguish it better than other colours. To stand out elements, it's ideal to use blue. Blue stands out for most users, including users with red-green colour blindness.

Even if you're limited to the colour palette, adjusting the hues to have better contrast will result in a huge difference for people with colour blindness.

Another good way to improve colours is to shift red towards blue and greens towards yellow. It makes them more distinguishable for people with red-green colour blindness.

Use colours and patterns.

When you can't get a good contrast using colours, use patterns for easier distinguishing.

One good example is using infographics – the chart below could be less readable if there weren't any patterns.

The same applies to line charts – it's important to keep different patterns and not rely solely on colours.

Focus state.

People who navigate through the keyboard require a clear understanding of which element is currently in focus.

Having a noticeable focus state is essential to avoid confusion – simply relying on colour is not enough. To provide familiarity and ease of use, it is recommended to use the default focus styles that users are already familiar with. This means adding a bold outline around the focused element.

Color Add.

As explained on their website, “ColorADD” is a unique and universal language that enables the colour blind to identify colours, with a wide spectrum of use on companies/entities whenever colour is a factor of identification, orientation or choice.”

This project is a great example of coming up with solutions to design having colour-blind folks in mind. It was created by Miguel Neiva in 2010, and it uses symbols to represent colours. The project even evolved into an app to help users detect and identify colours in real-time.

Today, this code is spread around the world and about five million coloured pencils and more than 100 million clothing labels. It has also been implemented in Porto’s subway system.

Test yourself!

The best way to figure out whether or not you have some degree of colour blindness is to go to an ophthalmologist. However, you can test it online as well to confirm your suspicions.