Last week, a dear friend looked so downcast because he had picked up the wrong type of cookies for breakfast at the supermarket. The conversation went like:
Friend: I picked the wrong cookies again, I don’t know how.
Me: Which ones did you want?
Friend: Umm, the ABC cookies..
Me: Ah! the ones in that pinkish/orange package, no?
Friend: Mmm, I thought it was green :/ !
Who knew that your breakfast world can be turned askew because of color blindness! Have you had instances of pointing out to a friend — “Look at those poppies!” and they go like “What poppies?” And that such could be the case for 8% of the men and 0.5% of the women of North European descent according to National Eye Institute, US. While writing this article though, I am starting to feel that I know 50% of these men and women (kidding :D)!
But jokes aside, there have also been instances where as a human factors engineer, I worried about the safety consequences. For example, at a water amusement park, one of the slides had a red/green light indicator to show when it was unsafe/safe to start your ride. One of my friends would ask me before starting the ride “Is it green now?” and I was thinking, what if he was alone! To help avoid such instances and facilitate the next step towards designing for color blindness, am sharing some notes here.
What is Color Blindness?
The good news is that there is already a lot of good research out there on color blindness and its implications for design. Color Blindness can also be referred to as color impairment or color vision deficiency. I usually think of it as limited color sensitivity or differing color perception. This article referenced above is a very nice introduction to the topic. So based on different readings, this is what I understand about color blindness:
- Color blind individuals perceive colors differently than the majority of the people. The word ‘different’ is key here because depending on the type of color blindness and the extent of it, it can mean that they perceive colors as lighter or less saturated, find it difficult to distinguish between certain colors (e.g., difficulty distinguishing between red and green), perceive one color as another (e.g., perceiving red as green) or rarely, not see colors at all (monochromacy).
- Color blindness occurs on a scale. This means that two people with the same type of color blindness may see the same thing in different ways because of the differences in severity.
- As we get older, our color sensitivity and sensitivity to perceiving contrast differences decreases and in poorly lit environments, color sensitivity for everyone becomes lower.
What does it mean for design?
Understand color blindness
The first step is to understand your user. In order to understand color blindness and to visualize how your interface may appear to a color blind user, you can use simulation tools. My favorite is Color Oracle as it applies the color filter to the whole screen. But you can also use webtools like Coblis. Adobe Photoshop has an built-in feature for this too as described by this article. One thing to remember though is that since color blindness is more of a ‘scale’, all these tools may show simulations that look slightly different from one another as their simulation shows only one point from that scale (perhaps the most ‘severe’).
Avoid using color as the sole indicator of key information
Determining differences in color introduces extra mental effort for color blind users. It is like a long sighted person trying to read information at a distance without glasses. This means that even if they are ‘correct’, it can be tiring for them. Fatigue can easily lead to use errors or poor user experiences. So, avoid using color as the sole means of conveying key information.
- Use shapes, textures, labels in addition to color.
- Use contrast to differentiate elements in addition to using the hue to differentiate, for example, for text, a ratio of atleast 4.5:1 between the foreground and background is recommended by Web Content Accessibility Guidelines (WCAG 2.0). Here is a great tool from Juicy Studio to check the color contrast ratio of the colors you are using.
If you must use color …
- Do not design small indicators with color — the smaller the object, the more difficult to distinguish the color for color blind users. In words of a friend who also has limited color sensitivity, “Surface area and contrast are important”.
- Use color combinations that can be distinguished by most of the population. I find ColorBrewer to be an excellent tool for choosing colors and you can choose a setting for color blindness too. Though it is designed for maps, but I have found it to be useful for designing interfaces too. You can adjust the various settings depending on the type of data you have. This article by Noeska Smit on medical image visualization and using ColorBrewer is a nice example.
“Surface area and contrast are important (when designing for color vision deficiency)”.
As always and forever, test and design iteratively
Color is not always a reliable source of information for color blind people. This means that in case they need to distinguish between colors (which don’t appear that different to them), they may first perceive the color and then ‘think’ for a bit to be certain of what color are they looking at, and then try to understand or assign meaning to the color (cognition). Thus, there are differences in perception + differences in the meaning different individuals assign to them and this even users who are not color blind might assign different meanings to colors they see!
- So, test the color in context of the user interface with users with and without color blindness for differences in perception + cognition.
- Check if the user needs to ‘process’ too much color based information and if they are making errors that might be related to either the colors directly or the fatigue related to it.
- Test with multiple users with the same color blindness too: In user tests I have observed that I have had instances of one user telling me: “Hmm, this red is a bit more greenish than the other” or another “What red text?” and they both had the same type of color blindness.
- If the context of use involves use in varying light conditions then test with varying light conditions.
- Given that more than 8% men (and 0.5% of women) may be affected by color blindness, it becomes imperative to design for color blindness.
- Avoid using color as the only indicator of key information — use sufficient color contrasts, shapes, textures and labels to differentiate.
- If using color, design objects to be big enough and use color combinations that can be distinguished by most of the population.
- Test your interface with users with and without color blindness, in varying light conditions (as needed), to see if they can perceive key information without too much effort.
I am curious to hear what rules and tools do you use for designing for color blindness. Please share.