Fullscreen Menu - Background

Subscribe to SME News Search for an article Our amazing team

Ground Floor, Suites B-D, The Maltsters,
1-2 Wetmore Road, Burton upon Trent
Staffordshire, DE14 1LS

Background
Posted 4th November 2022

Designing for a Colour-Blind Audience

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.

Mouse Scroll AnimationScroll to keep reading
Fixed Badge - Right
designing for a colour-blind audience.


Designing for a Colour-Blind Audience

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 company 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.’

Categories: Business Advice, News


You might also like...
The Worry of Greenwashing: How Easy is it to Avoid?Business News4th October 2023The Worry of Greenwashing: How Easy is it to Avoid?

With the current outlook on climate change, it is more important than ever for companies to work towards more sustainable measures. However, marketing this can be a difficult one.

Driving Success at Your SME with Shutterstock EditorBusiness Advice2nd December 2019Driving Success at Your SME with Shutterstock Editor

Customer audiences now expect to see aesthetically pleasing content across platforms that incorporates crucial information and is up to speed with emerging creative trends. As a small- or medium-sized enterprise (SME), you might be asking yourself: How can I p

SME News Media Pack

Every quarter we offer a new issue of SME News which is published on our website, shared to our social media following and circulated to in excess of 78,000 individuals from various sectors across the UK SME marketplace.

  • TickExpand your reach.
  • TickGrow your enterprise.
  • TickSecure new clients.
View Media Pack
Media Pack - Bottom Slant Gradient
we are sme.
Arrow