ID 1: How Colour Vision Deficiency affects the way designs are perceived
Recently while working on the brand design for a client, I felt stuck in choosing. I had to figure out the most harmonious shades from the blue and red colour families. While often mixing & matching till you find the right contrast and messaging is enough, it got me thinking. I was reminded of those art & design ideas where shades of blue and red are used in a single piece of art. What you see visually, in these cases, is determined by whether you are seeing it with naked eyes or through a red, blue or even a green film. Thus, often these artworks or designs have 3–4 compositions within the same imagery.
“Under white light, the mural is kaleidoscopic. But as a red, green or blue light passes over the image, a different scene emerges; exotic wild animals in red, a dense jungle in green, a monkey tribe in blue.”
-Vicky Gan for the Smithsonian Magazine about ‘La Selva’
If a filter or an LED light could change the entire image, then how does the world look like to those who can’t see a slice of the spectrum of colours? How do people with Colour Vision Deficiency, or as know with the misnomer- colour blindness, perceive the designs that we create?
Let’s start with the basics.
There are multiple types of CVD and they variably affect digital design perception. To demonstrate this, I used one of the world’s best-known logos- the Google wordmark. Apart from it being easily recognised, I also chose it due to its bright primary tones. They are easy to recognise even with skewed colours and exhibit the contrast clearly. In the image below I used Toptal, a web-based colourblind filter, to see how the Google logo is seen with different forms of CVD.
CVD, while usually genetic, can also manifest as a cause of other diseases. There are an estimated 300 million people in the world with colour vision deficiency. This means that many people might be excluded by our designs. Like in the logo above, people with Achromatopsic or Monochrome CVD can see no difference in Red & Blue letters. In this particular instance, it doesn’t make legibility or recognition an issue. However, in others, say a logo or signage, the design and its messaging might be entirely lost on the individual.
For example, essential signage in public spaces needs to be visible from a distance and easily distinguishable for all individuals. In the example below, I created this signage for an accessible washroom which when viewed by someone with Achromatopsic or Monochrome CVD there’s almost next to no contrast.
In the second image, the contrast is simple. It’s a bright deep blue background and a white icon. This is usually how signage across the world is designed by experienced designers. But accessible and/or inclusive design is something that is gaining traction in the West but barely touched upon here in India in terms of education. Only someone who has worked in the field for a while would know to use these basic contrasts versus more creative yet impractical colour choices.
Signage is essential and needs to be designed with an inclusive sensibility, shouldn’t we as designers extend the same sensibility to the essential things that we create like branding, web & app designs.
When we say less is more, it rings absolutely true in this context. For instance, logos with single or dual colours are seen as ideal. They are easier to replicate and create contrast with against backgrounds and also economical to print or etch on surfaces. However, this aspect of them being more accessible is something that is lost on many of us. So what’s the simplest way to deal with it you say? Use a single colour to create a logo, create contrast in tints and shades of the same hue or use black and white with your preferred colour of choice to create contrast. The same idea can be used to design banners, social media creatives and even web pages and app screens.
What constitutes a ‘good design’ is subject to a lot of factors, but one of the prime factors is that no good design should be exclusionary.
There are many tools with which you can screen your design’s viability. Listing two of my top recommendations below for your reference.
Toptal: Let’s you view active web pages with different CVD filters in real-time.
Coblis: Let’s you upload any image and view with different CVD filters in real-time.
Would love to hear your thoughts or discuss any other topic that you might have in mind!
You can reach out to me at niharika.m.dubey95@gmail.com or via my Behance profile.
