Colourblindness and the importance of inclusive design

What do you get when you cross colour blindness and a graphic designer?

Despite sounding like a poor dad-joke, as a matter of fact, you get an awareness of design which enables you to create sensational designs that work for both normal-sighted AND those who are visually impaired.
I am a colour blind designer.

‘Colour blind’ is a funny term; it usually makes people think you can’t see colour – this isn’t the case. Colour blindness is where individuals have colour vision deficiency and find it difficult to identify or distinguish between certain colours.
I have the most common colour blindness: red-green colour blind (protanomaly). This means I have a reduced sensitivity to red light and generally have difficulty distinguishing between reds, greens, browns and oranges – as you can imagine Autumn is my favourite season…..

How is being colour blind advantageous?

Yet being colour blind is far from a problem – it is in fact a bit like a third-rate superpower. Being colour blind myself allows me to understand how people with visual impairments experience the world arounds us; which is different to most people. All types of colour blindness causes inconvenience, and if products are not designed to accommodate for these, it can lead to negative experiences.

As such my superpower comes in as a graphic designer where I can easily empathise with users who have similar impairments. I can understand (from personal experience) their frustrations and needs and from that, create accessible solutions suitable for a wider audience.

So what can you do to make your design more accessible for colour blind users?

I get it, you want in on the superpower… Luckily there are a number of different techniques that can help accessibility when it comes to designing products for colourblind users:

  • Increase the contrast between elements – even users who see in greyscale can see contrast between elements. You should therefore ensure that your content contrasts with your background well enough for users to see it.
  • Never design with just colour as an indicator – supplement your design with captions, text or iconography. Elements such as forms are a great example. Usually validation messages will use red and green to signify success and errors. People with red green colour blindness will find these colours hard to distinguish, but simply adding icons provides colour blind users with an alternative way to experience forms, which provide equivalent value.
  • Design with various situations in mind – users will browse your product in a variety of contexts. A great example would be users who have no vision. This shouldn’t stop them from being able to use a product. They should be given the option of using a screen reader, so they are able to experience the product like any other user. Blindness, colour blindness or short sighted – all should be catered for.
  • Maintain consistency in your design – you should utilise familiar design conventions and patterns to create a friendly experience. Users will know what to expect when using your product if things are consistent or use familiar components.

These are just a few of my golden tips as to how you can design with colourblind people in mind. There are also a number of tools out there to help designers make sure that their designs are accessible, here are a few really useful ones:

Colorable – Allows you to take a set colour palette and get contrast values for every possible combination – useful for finding safe colour combinations with predefined colours and includes pass/fail scores for the WCAG accessibility guidelines.

Contrast – Contrast is a Figma plugin makes it easy to check the contrast ratios of colours as you work. Select a layer and Contrast will immediately look for the colour directly behind your selection and serve up the contrast ratio along with passing and failing levels from the Web Content Accessibility Guidelines (WCAG).

Color Blind – Color Blind allows you to view your designs in the 8 different types of colour vision deficiencies. All you need to do is make a selection and the plugin will clone it and create versions with the colours changed based on what each one would look like to a person with that type of colour blindness.

Adopting inclusive design as part of the creative process is a way of allowing more people to use your products. As designers, it’s our responsibility to understand the needs of our users and we should be providing a variety of options in which to experience the products we create. And next time someone asks what do you get when you cross colour blindness with a graphic designer – simply remember: ‘magic for all’.