Have you ever had trouble telling apart two very similar colors? This happens to me most often with clothes: just the other day, I bought a shirt and cardigan that I thought were identical shades of red, only to have a friend tell me that the shirt was actually slightly pink. The two couldn’t be worn together because the colors clashed, and I was annoyed that I had wasted money on something simply because I couldn’t tell that the two colors were different.

For the 8% of men and 0.5% of women who are “colorblind”, this is more than an occasional annoyance – it’s a daily challenge. Everything from clothing patterns to maps to interfaces seem to be designed to vex them. As designers, we don’t want this to be the case; we strive to create things that are accessible to everyone. And when it comes to colorblind users, it turns out that it’s really quite easy to design with their needs in mind by employing a simple strategy called redundant coding.

What is redundant coding? The “coding” part refers to the fact that we use color not just to make things look pretty, but also to code for meaning. For example, on a map, blue indicates water and green indicates land. On a website, red may mean “error” or “stop” and green may mean “correct” or “continue”. More subtly, a color might code for a particular brand: you could probably select your favorite soda from a vending machine based solely on color if all the logos were removed.

Redundant coding, then, is simply the strategy of employing a code in addition to color that colorblind users can fall back on when the color code is lost on them. Below, I discuss a few types of redundant codes you can try out in your work.

Language

Probably the most obvious redundant code you can use is language. In the example below, the sign on the left shows Chicago CTA train lines coded singularly in color, which we found in usability testing caused color confusions for some users. By contrast, the sign on the right codes color redundantly with a written label – when they saw this sign, users who were previously confused by the colors could easily tell the difference between CTA lines by reading the labels.

Symbols

You might not always have the space (or the desire) to use language as a redundant code. In some cases, a visual symbol may be less intrusive. The example below shows a portion of the London Tube map on the left, and a modified version created for colorblind users on the right. While both versions use color to designate Tube lines, the modified version also includes a redundant code: a unique symbol that colorblind users can rely on when they have trouble distinguishing the colors.

Location

In some cases, location can be a subtle redundant code that works well. Probably the most well-known example of this is traffic lights. Even if you have trouble telling the colors of the three lights apart, you can learn that the light at the top means “stop” and the light at the bottom means “go”.

Brightness

Finally – and this is the most subtle trick – you can use brightness as a redundant code and most users will never even notice it’s there. Color and brightness are processed by two different pathways in the brain, which means that colorblind individuals can tell apart bright things from dark things just as well as people with normal vision. Try viewing your design in grayscale as a quick-and-dirty check of accessibility. If you can distinguish different parts of the design based on the differences in brightness, it means that colorblind people will be able to as well.

Redundant coding is just one of many strategies you can use to ensure your designs are accessible to colorblind users without compromising the user experience of people with normal vision. Try experimenting with redundant coding in your own designs as a way to be considerate of users for whom color tends to confuse more than illuminate!