When you think “design,” one of the first places your mind probably jumps is color. Although there are many other elements to a good design, the colors you choose can have a huge impact on the way viewers respond. But what if they can’t see those colors properly?
As light enters your eye, it passes through your retina and is translated into signals that your brain can understand. Inside the retina are three different kinds of cones, each of which can pick up a different color: red, green, or blue. If you have all three kinds of cones in functioning order, you have what is known as trichromacy – the ability to see colors “normally.”
One of the most common kinds of colorblindness is dichromacy, or only two functioning sets of cones. You can have protanopia, or the inability to perceive red; deuteranopia, the inability to perceive green; or tritanopia, the inability to perceive blue. Protanopia and deuteranopia are actually hard to tell apart since they make reds and greens look almost exactly the same.
You don’t have to be missing a set of cones to still be color blind. Anomalous trichromacy occurs when each set of cones works, but one is misaligned. This makes you less sensitive to one kind of light, but not completely unable to see it. So you could have a hard time seeing reds (protanomaly), greens (deuteranomaly), or blues (tritanomaly). This condition has varying degrees of severity, which means it can range from nearly normal vision to complete inability to see one color.
Monochromacy is a total absence of color; the world appears to be in black and white. This is an incredibly rare form of colorblindness, appearing in only one out of ever 330,000 people. You’re far more likely to encounter one of the other kinds of colorblindness instead.
Designing with Colorblindness in Mind
1 person out of every 12 is color blind in some form or fashion. That doesn’t mean they can’t see color at all – it just means the colors look different. And if you keep those differences in mind, you can make sure that your designs work for everyone.
One of the first things to consider is whether colors are being used to signify or mark something important. In-text links are a good example; normally, the links are blue, which is visible even with most kinds of color blindness. But if you have dark green text and you decide to have a red link, someone with colorblindness might not be able to see it. Other places to look are colors for different teams, lines on maps, or even differences in graphs and infographics.
A good workaround for this is to vary the saturation, hue, and brightness of the colors you use. If your red is very light and your green is very dark, it won’t matter what colors they are perceived as – they’ll still be visible. You can also try adding textures or other elements that don’t depend on color; a drop shadow or border on that link can do wonders.
Usability aside, it’s also important to make sure that your design doesn’t look completely terrible if the colors aren’t visible. This colorblind filter converts the colors on your website to the way someone with colorblindness might see them. Here’s what our logo looks like using the three main filters:
So no, you don’t have to completely revamp your designs to make sure the colors match from every point of view. (Realistically, the only way to do that is to keep things black and white.) But with a little care and effort, you can keep your logo from looking exactly like a colorblindness test (and yes, these are real):
For someone with red/green colorblindness, the iguana in design #1 will look like a compilation of grey dots. Not very pretty, but at least you can tell what it is; the same goes for the moon in the fourth logo. The real problems come from the second and third logos – without the ability to differentiate between colors, the logos are literally invisible.
The Colorblind-Friendly Cheat Sheet
Good designs should work with or without color in mind. But just to be safe, you can use these tips to keep everything visible:
- To signify something important in an image, use textures, borders, and other elements that don’t rely on color.
- Try varying the saturation, brightness, and contrast of the colors you use.
- Label any color-coded items to provide an additional level of clarity.
- Make sure your logo is legible, even if all color differences are removed.
So if your designs are clean, well labeled, and easy on the eyes, you’re probably already colorblind-friendly!