Ever wonder whether your website or app is accessible to those who are colour blind? No? Then most probably it isn’t.
Colours are one of the most fundamental design elements that every designer relies on. From colour theory to colour psychology, most designers make use of colours to create the biggest impact on their website or app based on how colour affects user’s attitudes and behaviours. However, many do not consider the fact that approximately 8% of men and 0.5% of women are affected by some form of colour-blindness. That would mean an 8% loss of conversion rate if your website or app is not accessible to them!
People that have colour blindness see the world a little bit differently than the majority of us – they do not have the ability to perceive the differences between some of the colours that we normal people can distinguish. That said, most people with colour-blindness are not as “blind” as the term would suggest. People with complete colour blindness (monochromacy or achromatopsia), who can only see the world in shades of grey, are exceedingly rare.
The most common type of colour-blindness is dichromacy in which dichromats have only two cone photopigments, compared to the rest of us which have three. It means that normally most of us can distinguish colours based on a mixture of the three primary colours, while dichromats can only rely on two colours. The picture below shows the 3 subtypes of dichromacy.
It is important to note that red/green colour blindness is the most common (notice that colours look very similar for both deuteranope and protanope). People with red/green blindness have troubles distinguishing reds, greens and yellows of similar values, hence they might not be able to make out words or images in these colours with low value contrast.
So how does the knowledge of how colour-blindness affects users inform design considerations for this group of people. Here’s the main concepts that you need to know:
- Don’t rely on colours to convey important information
Since people with colour-blindness have difficulties distinguishing between colours, they would also have trouble making out information that is conveyed based on comparison between colours. A very salient example would be that of the Singapore MRT map (above left) which have their different routes colour-coded. Now if you are suffering from red/green blindness, you will see something like the right picture above.
Someone with colour-blindness might still learn to read the MRT map after a while, but just imagine the amount of cognitive effort they have to make! Based on psychology and UX principles, cognitive strain can create negative feelings and kill conversion rate.
Colours should never be the sole or primary means of communicating information. It may be more appropriate to provide additional means (e.g., patterns, symbols, text) of obtaining the same information conveyed by colours, especially if the information is going to be important.
- If you really need to use colours to convey important information, increase contrasts between colours to increase visual accessibility
This article outlines various ways to ensure maximize contrasts in order to ensure accessibility for people with colour-blindness. In general, the advice is to use colours with sufficient hue, value (lightness), and chroma (colour purity) contrasts to ensure all essential elements are visually distinguishable and readable.
The easiest way is to lighten light colours and darken dark colours. If not, staying away from reds and greens might be helpful, since red/green blindness are the most common.
- Use a Colour Blindness Simulator to see how your webpage or app looks in the perspective of people with colour blindness
Design Thinking is all about empathy. Without first putting yourself in other people shoes, you will not understand how differently others are perceiving the world as you do. Using a Colour Blindness Simulator like Coblis is the closest way you can experience how your website or app appears to people with colour-blindness.
Ultimately, listening to your users is still the key. Having the goal to design for accessibility is good, but you will never be sure whether you are doing it in a way that will affect the user experience for your main target audience. Using an eye-tracker like the Tobii Pro X2-60 is a powerful method to get feedbacks from both your main target users and users with colour blindness. By analyzing the differences in the way both population are looking at your website or app, we can then use a design that works for both population so that we can maximize conversion rate.
Keep accessibility in mind and we can help those with disadvantages navigate the world easier with design thinking. Let’s design for everyone and make the world a better place to live in for all!