Despite it affecting approximately one in 12 men and one in 200 women, colour blindness is often disregarded when designing for optimum user experience and accessibility.
Although sizeable advances have been made in assistive equipment and software, many websites contain design flaws that hinder simple and engaging user experience. With equality and accessibility at the forefront of the minds of countless businesses, why is their online presence sometimes at odds with this ideal?
Statistics from Colour Blind Awareness indicate that colour blindness affects 8% of males and 0.5% of females globally, with around 2.7 million of those living in the UK. This is a surprisingly large percentage of the population whose needs are frequently overlooked, impacting their ability to interact with numerous online resources such as maps, charts, online booking forms and general web navigation.
I was foolishly unaware of just how prevalent this visual impairment really was until I met my partner, who has a rare blue-yellow form of colour blindness (Tritanopia), and my sister’s partner, who has a more common red-green type (Deuteranopia). Owing to this, I have found myself more mindful, as a designer, of the colour combinations I use and their effect on those who cannot distinguish the full spectrum we often take for granted.
Thanks to campaigns such as #1ineveryclassroom and criticism of the BBC’s 2015 general election coverage, awareness of colour blindness has somewhat improved, with more consideration taken during the design process of video games, classroom materials, on- and offline infographics, websites and many more.
New tools have been developed that enable digital designers to view their creations as a colour blind individual would perceive them. These tools range from software and web browser plug-ins to desktop apps, which I will touch upon later in this article. However, despite the array of test simulations now available, some continue to slip through the net. Below are a few examples:
Online booking forms
Having assisted my partner with the navigation of several online booking platforms in the past, this appears to be a common UX problem. The below combination of lime green and lemon yellow featured on the Victoria & Albert Museum’s booking site does not provide enough contrast for a red-green colour blind user to easily interact with.
Unfortunately, a simple matter of colour choice like this consequentially risks conversion rates, particularly in the context of a booking form. Unclear colouration has the potential to prevent securing conversions, as frustrated colour blind customers may simply abandon the booking process altogether.
— ☞Ⓖⓐⓡⓨ Ⓟⓐⓡⓚⓔⓡ☜ (@WiteWulf) October 2, 2017
Normal colour vision:
Interactive maps are useful and informative tools used to track (often in real-time) changes in traffic, weather and lots more. However, they are not always designed with colour-blind users in mind. Let’s take this map from the City of London as an example, which allows individuals to check severe (red), moderate (yellow) and minor (green) delays in their area caused by roadworks.
The vertically stacked design of traffic lights aids colour-blind drivers to identify a command through the position, rather than colouration, of the lights. Why, then, use the same three colours on this muddled map?
Normal colour vision:
Contrasting symbols (e.g. smiley/neutral/sad faces) would be more user-friendly in this instance. Using alternative colours would probably confuse the remaining ~92% of users who have come to associate green with ‘good’, yellow with ‘OK’ and red with ‘bad’.
If you suffer from protanopia or deuteranopia (forms of red-green colour blindness), you might have some trouble using Twitter, as Jason Baldridge found out:
— Jason Baldridge (@jasonbaldridge) May 7, 2017
This proves how even the most well-established and widely used websites and apps fall short when catering for the colour-blind. Although this example does not interfere with more important actions such as completing a transaction or reading infographics, it certainly makes for a frustrating user experience.
Normal colour vision:
Infographics and charts
An example highlighted by WeAreColorblind shows how confusing infographics can be when the designer relies solely on colour to represent variables. The below table was captured in 2012 from the BBC Sport football tables, and presents the latest results match by match (green=win, grey=draw, red=loss).
Normal colour vision:
Now let’s take a look at how colour-blind users perceive the table.
Although it is certainly easier for a tritanope to distinguish between win and loss, the grey ‘draw’ shade is still a bit too similar ‘win’ to read the table effortlessly.
Don’t rely solely on colour in UX
When designing UX for accessibility, it is important to adopt multiple identifiers for any given variable, especially when it comes to infographics and charts. As a result, those with normal colour vision will typically interpret information via colour association, and those with colour blindness via corresponding numbers, letters or symbols instead.
… Just make sure you can discern between the symbols you use!
— Phillip Blackman (@PhiIIipBlackman) April 24, 2018
It is encouraging to see that BBC Sport has since added lettering to its table to enhance legibility for both colour-blind users and those with normal colour vision. Customer experience is as much about being heard as it is about usability, and after being notified of the issue BBC Sport has adapted its design accordingly.
Where it is not practical to use symbols, consider:
- Adding texture (e.g. hatching) to differentiate sections of an interactive chart or table.
- Resizing and/or relocating call to action buttons to ensure they still seize attention, regardless of its brightly coloured background.
- Using a distinctive border to highlight an active item on a navigation bar.
When using colour in UX, consider the contrast
When designing a website or UX platform, be mindful of the contrast between various elements onscreen. This is particularly important when it comes to text placed on backgrounds. If important information is illegible on screen, you will alienate any colour-blind individuals as they will not be able to navigate your website properly. Bear in mind that weight and emphasis (italic, bold etc) are also factors that affect the amount of contrast between a type and its background colour.
Try to avoid certain colour combinations in your design: red & green, green & blue, blue & purple and green & brown are a few of the most troublesome. If you are unsure about a colour combination you have chosen, implement one of the simulation tools below to check.
It is acknowledged that the best colour contrast ratios are 7:1 (normal text) or 4:5:1 (large text). Further contrast guidelines can be found via W3C.
Colour-blindness tools for designers
- Userway Contrast Checker. Select both a background and a text colour and this tool will tell you if they pass AA & AAA colour contrast requirements.
- Color Oracle is a free desktop colour-blindness simulator compatible with Windows, Linux & Mac.
- No Coffee is a Chrome and Firefox add-on which can simulate many forms of visual impairment including colour-blindness.
- Guide to Soft-Proofing for Adobe CC Software. Most Adobe design software is now able to simulate red-green forms of colour-blindness.
- Coblis Simulator. This old-school simulator lets you upload an image and cycle between different types of colour-blindness, which is excellent for checking standard graphics.
- BetterFigures have created some useful guidelines on how to pick better colours for scientific graphics.
Have you used any useful colour-blindness simulation tools? Let us know which ones in the comments below!