Blog


How to Create Colour Deficiency-Inclusive Designs

Get our Storytelling Newsletter

A comparison of the ECHO Storytelling Instagram Field as it appears to a person without colour deficiency, and as it appears to a person with red/green colour deficiency.
The ECHO Storytelling Instagram feed as it appears to a person without colour deficiency (left), and as it appears to a person with deuteranopia (red/green colour blindness) (right).

At ECHO Storytelling, we create beautiful books for a wide variety of clients who have diverse audiences in mind. We spend a lot of time thinking about those audiences and their needs. Recently, a project pushed me to put that same degree of thought into the personal needs of our client.

This gentleman commissioned a personal memoir about his years building a number of successful companies, headquartered mostly in Western Canada. One step in the process of creating his book is a questionnaire we ask clients to fill in, noting design preferences. Here’s what he wrote:

  • colours preferred: mineral tones, earthy greens, brown tones
  • style adjectives: easy to read, simple, not fussy
  • concern over how the reader would distinguish a sidebar from main copy — important to treat differently.

As I read the manuscript, I was struck that his design brief made a lot more sense once I learned that he’s colour blind (or more accurately, colour vision deficient). His answers to the design questionnaire were like reading a check list of the symptoms of colour vision deficiency itself.

I didn’t know a lot about colour deficiency before working with this client (other than it affects more men than women) and I needed to learn more before tackling the design brief. Here are a few things I’ve learned along the way. For instance, when a client with colour deficiency likes the colour scheme of certain design samples, what they are really noticing is that the colour contrast is high enough that it lets them differentiate between elements on the page.

Here are some fast facts on colour deficiency (courtesy of the Canadian Association of Optometrists, Wikipedia, and the National Eye Institute):

  • there are three types of colour deficiency: red/green, blue/yellow, and total colour blindness
  • total colour blindness (seeing objects in black and white only) is very rare; the preferred general term is “colour deficiency”
  • the blue/yellow colour deficiency, less common, usually occurs from damage sustained to the optic nerve
  • red/green colour deficiency is most common and affects males (8% of the population with Northern European ancestry) much more than females (0.5%)
  • in Canada, approximately 2.2 million people experience some kind of colour deficiency.
Image via Business 2 Community

Knowing that our client has a hard time distinguishing shades of red and green, I shifted my priority to designing with accessibility in mind. He sees the world differently than I do—an interesting challenge for me as a visual storyteller. In fact, he’s had a lasting impact on me. Since taking on this project, I have a greater understanding of my own unconscious bias and the steps I can take to become a better, more inclusive designer. Now, at the beginning of each new project (be it a book, digital graphic, or presentation), I think about and plan for the following:

  1. Choose colour schemes with high contrast and avoid colour combinations like red/green, blue/purple, yellow/light green
  2. Design charts/graphs/infographics etc. with textures or patterns to emphasize different data sets (rather than just colour)
  3. Make sure that any text overlay is large enough to be readable in combination with the image/colour beneath.

I’ve also found a few handy online tools that make it easier to check my design as I go. The Color Oracle app applies a filter to your computer screen to simulate the lens of someone with colour deficiencies. If you’re designing for web, the Colorblind Web Page Filter allows you to enter a URL and chose the type of filter you would like to view through. It literally allows you to see through the eyes of another person. And isn’t that ultimately the point of sharing stories?

Take the Ishihara (red/green) vision deficiency test yourself.