ad: Annual 2024 Now Open For Entries!
*

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

Rebranding "God's waiting room" #BehindTheBrand

Hallmark Luxury Care Homes, the family-owned group of 22 care homes in England and Wales, relaunches with an all-new brand positioning and identity created by The Corner London. The work sees a complete overhaul of Hallmark’s brand strategy,...

Posted by: Creativepool Editorial
*

Inspiration

#MemberSpotlight on freelance writer and director Katerina Sfaellou

How did you get into the industry? I started on the corporate side of things many years ago, working on events and marketing activation campaigns. But I always wanted to be hands-on and combine my communications degree with the more creative side of...

Posted by: Creativepool Editorial
*

Inspiration

Phillips #ShareTheCare for mums across the world #BehindTheIdea

Philips Avent, in collaboration with LePub, is launching an empowering new campaign called #ShareTheCare. This initiative aims to address the challenges faced by moms and put a spotlight on the importance of their well-being and self-care. To raise...

Posted by: Creativepool Editorial
ad: Annual 2024 Now Open For Entries!