ad: Annual 2022 Launch Event
*

Colour us impressed - Designing for colour blindness

Published by

When Transport for London released an infographic highlighting which trains were affected by the rail strike, they’d have been forgiven for thinking most of the discourse around the graphic would be linked to the rail strike itself.

However, the transport provider soon faced backlash on social media for the inaccessibility of their graphic, which used a series of colour-coded circles to denote which trains were running as normal, cancelled or potentially affected. The graphic was unreadable to colour blind viewers, who make up three million of the UK population.

Though TfL admirably responded to the criticism, releasing a more inclusive version of the graphic within days, accessibility problems like this could be avoided through more inclusive designs. With this in mind, the print and design experts at Solopress have advised on the best ways you can create accessible documents for your colour blind audience.

Key Findings:

  • Transport for London recently came under fire for a high-profile infographic which was inaccessible for colour blind viewers.
  • Red-green colour vision deficiency is thought to affect 1 in 12 men and 1 in 200 women.
  • There are three million colour blind people in the UK.
  • By avoiding colour combinations such as red and green or purple and blue that are likely to be difficult for colour blind viewers, you can ensure your work is more accessible.
  • Patterns and textures are another great way to differentiate between concepts instead of using colours.
  • Adobe Photoshop offers users the ability to view their work as it would be seen by readers with colour blindness.
  • TfL’s amended design used shapes and symbols as well as colour to differentiate between cancelled and running trains, creating a design that was accessible for all readers.

What is Colour Blindness?

Colour blindness, or colour vision deficiency, is the decreased ability to see colour or differences in colour and can manifest itself in many different ways. The most common form of colour blindness is red-green colour vision deficiency (deuteranomaly), where people struggle to differentiate between shades of red, yellow, and green.

Blue-yellow colour vision deficiency (tritanomaly) is the second-most common colour vision deficiency, though its name can be misleading. The affected people do not confuse blue with yellow, but rather blue with green, and yellow with violet. The terms ‘tritanomaly’ and ‘deuteranomaly’ are applicable when the affected person struggles to properly perceive the colours. ‘Tritanopia’ and ‘deuteranopia’ are applicable when the person cannot see the colours in question at all.

Total colour blindness, also known as achromatopsia, makes it difficult for people to see colour at all, only black, white, and shades of grey. However, varying levels of colour differentiation amongst achromats (people living with achromatopsia) and the small sample size illustrated means that some achromats may have the ability to differentiate between some high contrast colours.

How many people suffer from Colour Blindness?

 Many people suffer from colour blindness worldwide. The most common form, red-green colour vision deficiency, is much more common in men than women, affecting 1 in 12 men and 1 in 200 women.

Meanwhile, total colour blindness is thought to affect 1 in 30,000 live births worldwide, meaning that 0.00333333% of the world’s population could be living with achromatopsia. According to the NHS, there are roughly 3 million people in the UK living with some form of colour blindness. This figure makes up 4.5% of the entire population.

How can I Design for Colour Blindness?

*

Given that there are multiple different forms of colour blindness to take into account when creating an inclusive design, there are many perspectives to take into account. However, there are some core principles that will allow your design to be interpreted or received properly by as many people as possible.

Know Your Colours

When choosing your colours, make sure to choose colours that are likely to be friendly to colour blind users. This can be difficult given the different forms of colour vision deficiency, but there are certainly some colour combinations that are worth avoiding.

These include:

  • Red and Green
  • Green and Brown
  • Purple and Blue
  • Green and Blue
  • Light Green and Yellow
  • Blue and Grey
  • Green and Grey
  • Green and Black

High contrast colours are preferred, to increase the level of differentiation for colour blind users. If you’re designing for online use, the UK’s Accessibility Regulations 2018 stipulate a minimum colour contrast ratio for digital design. 

Differentiate Creatively

Just like the TFL infographic in question, many inaccessible designs use colour as the sole differentiator between concepts or ideas. Think about the other ways you can contrast between ideas in order to create a more accessible design.

Different patterns or textures could be used, rather than sole block colours, to make it easier for colour blind users to interpret charts or graphs. When displaying information through a bar chart, a striped pattern would help differentiate a bar from a non-striped bar.

Check as you Go!

Designing for colour blindness can be difficult, given that you’re trying to understand how your work will look from a totally different perspective. There are steps you can take to appreciate how your design will look to someone with colour vision deficiency.

For example, Adobe Photoshop has a feature which allows you to view an image or design as it would be seen by someone with colour blindness. Under the ‘View’ tab, you’ll find an option for ‘Proof Setup.’

Within the drop-down menu, you can select ‘Colour Blindness – Protanopia-type’ or ‘Colour Blindness – Deuteranopia-type.’ Either of these options will allow you to view your design as it would be seen by people with the most common forms of colour blindness.

Use Shapes and Symbols

After their initial blunder, TfL responded brilliantly to the people complaining about the accessibility of the graphic, apologising and amending the graphic to include varying shapes and symbols. By doing so, they created a more accessible design for colour blind readers.

The new design incorporated different shapes and symbols: the original green circle was replaced by a square with a tick mark, the orange circle was replaced by a triangle with an exclamation mark and the red circle included an X inside it. In the new design, the colour scheme was still visible, but with  added measures for colour blind readers.

Glen Eckett, Head of Marketing at Solopress, comments: “With an ever-increasing number of companies becoming more and more conscious of inclusive communications, it was great to see TfL listen to criticism and provide a better version of their original infographic. Designing for colour blindness isn’t particularly difficult – we just need more businesses to take responsibility, and incorporate inclusivity into the early stages of their design process.

Header image by Youssef Khalil

Comments

More Inspiration

*

Inspiration

The Indifference Economy

Strange times provoke strange thoughts - not helped when the news is a constant barrage of mixed messages about how we’re all going to be doing economically in the next few years - and what’s bothering me is what kind of an economy are we going...

Posted by: Richard
*

Inspiration

Proving that Moonpig is more than just a card company | #BehindTheIdea

Moonpig, the UK’s leading online greeting card and gifting platform has created its latest advert featuring the Moonpiglets and this time they are promoting the wide range of gifts the brand offers. The campaign continues Moonpig's journey...

Posted by: Creativepool Editorial
*

Inspiration

The design industry declares a climate emergency

With so many other emergencies circling us right now it can be unfortunately easy to forget that the most critical existential crisis remains the environment. Thankfully, the design industry hasn’t forgotten. Or at least that’s what...

Posted by: Benjamin Hiorns
ad:
ad: Annual 2022 Launch Event