#TuesdayThinks: Making colour accessible.

10 Nov 2020 | Tips & Tricks

#TuesdayThinks: Making colour accessible.

By Nikki Burton

Every Tuesday we think some thinks and round-up some top tips.

As a designer, colour plays a HUGE part in my every day. But I have recently realised that I simply take for granted that my world is bursting with all the colours under the sun. This isn’t the case for everyone. In Britain alone, approximately 3 million people are colour blind!

When you start to think about how colour is used to navigate our everyday, it becomes pretty mindblowing to think just how many people may be missing out on valuable communications. Did you know that kit colours and equipment cause problems on the pitch for people with colour vision deficiency? The Football Association’s Colour Blindness Awareness Day campaign animation does a great job of explaining how widespread these challenges are – and offers some great solutions for us creatives to consider.

Yoav Brill, a colour blind designer/filmmaker created an inspiring short film narrating his first-hand experiences of colour-blindness. It’s stunning to see how the story can be told entirely using the dots from visual tests used to detect colour blindness.

My curiosity piqued, I began to explore how the tools I use in my everyday life were addressing colour accessibility. I was so pleased when I delved a little deeper to find Trello, (an agile project management system we use in-house) has a mode for colour-blind users that adds patterns to block colours. It’s such a simple function, yet so powerful for accessibility. And Spotify uses a small dot to show the state of the repeat and shuffle settings, which is a big help to the colour blind, who now don’t have to rely on seeing the green icons.

Part of me can’t believe that I hadn’t considered this sooner in my creative work, but the other part wants to take on the challenge to make sure I push the boundaries of accessibility for our designs.

Want to join me? Here’s where to start:

1. Use a colour blind friendly palette by default. The website coolers.co has a wonderful feature for changing between colour blindness deficiencies.

2. Check that your colour combinations have enough contrast, your background-to-text contrast ratio should be at least 4.5:1. Colorable is a great tool for doing just that!

3. Embrace thick lines or large symbols to make it easier to correctly identify and map the colour to a legend.

4. Don’t rely on colour coding, in addition to colours, consider the use of patterns or labels to distinguish between categories.

5. Keep the legend that explains the mapping of the colours close to the actual data.

We have a responsibility in the creative industry to communicate to as many people as possible! My eyes have been opened!