Feb 4

Feb 4 Color Blindness in Design

“When someone learns of their friend being color blind, they sometimes think that their friend can only see shades of gray. This is almost always not true, since it’s very rare for someone to have the condition of Achromatopsia, which is total color blindness. More often when people say they are color blind, they really mean they are partially color blind. ”

Generally speaking, there are three major types of color blindness, Protanopia, Deuteranopia, and Tritanopia (each with a variation). Since those are hard to remember and perhaps even harder to say, it’s easier to remember that there are people who are unable to distinguish between shades of reds, greens, and blues, respectively. The people with the first two conditions Protanopia and Deuteranopia have difficulty distinguishing between reds and greens. People with the third condition, Tritanopia, have difficulty distinguishing between blues and yellows.

Color blindness in Product Design

As a designer, you should be aware that up to 8% of the population have one of the above conditions. Color blindness, which is a genetic disorder, is much more prevalent in males because the mutation is found on the X chromosome, and males only have one. Since females have two X chromosomes, they are more likely to have the functioning gene on one of the two. Thus, a man who is color blind, had a mother who was a carrier of this gene, although his mother would have likely been able to see colors normally.

Therefore, if the product you’re designing has an important element of color and the target audience is men, you should be aware that 8% of your target customers might hate your design. Traffic lights are the epitome of this phenomenon. Not only do most of us not like red lights, but people with color blindness likely have a special and justified annoyance towards them. Since discriminating between red and green is the most common color blindness condition, we’re asking a lot of people to memorize light order that many of us don’t have to. (Seriously, without checking do you know if the red light is on the top or bottom? Left side or right side? 92% of us don’t even care!) What’s more, different countries have different ordering, sequencing, and shades for their traffic lights. Already, confusion can happen at the many different variations of intersections. So why design something with which almost 10% of users are going to have additional issues? If you hang out with me long enough, you’ll learn that I’m an advocate for making traffic lights with shapes, squares for Red, circles for green, etc.. No one seems to remember that we’ve already designed stopping hands and walking persons for the pedestrians at crosswalks.

Potentially, on your future designs you’ll have buttons, switches, text, lines, lights, tabs, shapes, and many other things through which a user will interact and operate your product. At a minimum, asking someone who has color blindness to be one of your product testers is a good thing. He or she will be able to tell you that something is confusing because the color of an indicator or button or whatever is ambiguous. However, recognize that you will have to be very specific about your questions because people with color blindness have found other ways to compensate consciously or unconsciously and they might be able to operate the device through context, layout of features, or other things.

Color blindness in Communication

The specific features that leverage color in some way on your design is not the only thing you should be aware of. Consider receiving the following image after the fictional request by your manager: “Can you thicken the big green part by 2 mm?’

Fig 1 - A CAD screen shot of what someone with color blindness might see

What would you do in this instance? You might reply with a clarifying question, ask someone else, or try to guess through the context of previous conversations to what your manager is referring. But regardless, the task turnaround time would be predictably longer and that’s not desirable. The above picture has been adjusted to what someone might see if they have protanopia (or unable to see red). The original is found below (but again, for only 92% of us):

One important lesson is that when using color to indicate something on your design mock-ups or prototypes a good idea is to pass a picture of it through a color blindness simulator and see what others might be seeing. Any capable image processing software can be used (in Photoshop CC, click on View-> Proof Set-up -> Color Blindness…) but one of my favorite online tools is called COBLIS (COlor BLIndness Simulator) found here. More than once I’ve seen a plain green button on a prototype, which, I assume, meant “go, run, or execute.” But how would someone know that if the button wasn’t labeled and they couldn’t see shades of green?

Color blindness in Presentations

Another color blindness warning is found when communicating results in a design review presentation, paper, or meeting. Quite often colors in connection with lines, bars, or segments on different visualizations, are used to distinguish different categories that might represent different concepts, performance metrics, or cost estimates. The select scheme can become disastrous if the person you’re trying to impress, sell to, or convince to investment in your design cannot tell the difference between your product and the competitor’s. For 8% of your customers, a bad color scheme might cause uncertainty about which data point is even your product!

An example of this is found below adjusted for color blindness. Before you scroll down and check the original version, notice how long it takes you to figure out which line and symbols belong to which y-axis (there are six of them).

This figure might eventually be comprehensible but it takes a lot of effort by some of us due to the choices of color. (In fact, this chart suffers from some other major problems, but I’ll share my thoughts on the design of charts and figures at a later time).

Now for the original:

Finally, a screen shot with annotations when combined with the wrong font color, might actually be invisible to some of your readers. I’ve seen students and veteran engineers annotate with red font (sometimes a good choice for annotations) on screen shots, but this is what someone might see (take a look at the protanopia version first):

Fig 5 - Annotated Screen Shot as viewed by someone with Protanopia

Perhaps you saw two annotations but there is also a third in the bottom left corner. It’s admittedly hard to see.

Here is the original:

If I’m ever unsure about a foreground/background contrast issue for people with color blindness, I consult a color blind wheel to check my choice of font colors in presentations (link here). Sometimes many colors are used to represent organizations, subsystems, information flows, or other properties, in a data dense figure. A high contrast font, like black and white for light or dark shapes respectively is often the best place to start to reduce the effects of color blindness, but if that’s impossible to apply check your choices in the color blind wheel.

Conclusion

In summary, a designer does a lot to respond to the needs and requirements of their customers. It just so happens, that some of those customers may be color blind. Not every design will need to include color blindness as one of the requirements to consider -- but it will sometimes. Be aware and don’t lose up to 8% of your customers before they’ve even seen your design.