Almost 5% of the population is color blind. To put this into perspective, that’s roughly the same number of people who use Outlook.com or Yahoo! Mail. Yet despite this prevalence, remarkably little has been said about how to choose colors for accessibility.
To give you an idea of how email newsletters are seen by people with color vision deficiencies, we’ve simulated what a variety of email newsletters would look like to those with red-green color blindness and deuteranopia. Along the way, we’ll provide some practical tips to help you create more accessible email designs.
How common is color blindness?
Can you find the numbers on these six plates? If so, then you may be fortunate enough to not be one of the 2.7 million people (4.5% of the entire population) affected by color blindness as judged by the Ishihara Test, a color perception test consisting of 24 – 38 plates like the ones above.
The reason there are so many different tests is that there are several different types of color blindness. 99% of color blind people can see some color – complete color blindness (also known as monochromacy) is actually quite rare. The most common type of color blindness is red-green color blindness, also known as protanopia. People who experience this do not see a complete lack of color where reds and greens appear, but instead, they have a harder time distinguishing the two colors from each other as the reds will look like greens.
If 4.5% of the entire population is affected by color blindness, then it is definitely something you should consider in all design projects – including email design work. And it’s especially true if your target audience is male, since 8% (1 out of 12) experience red-green color blindness, compared to 1 out of 200 women. It’s one of the reasons that Facebook is blue – because founder Mark Zuckerberg experiences red-green color blindness, thus making blue the color he sees best.
How email newsletters appear to the color blind
Designing with color blindness in mind does not mean removing color completely from the picture, but it does mean taking into consideration the areas you want to truly stand out. Let’s take an example newsletter design run through a color blindness simulator. Here’s a comparison of a very-colorful email would look to those with red-green color blindness:
As you can see, the email is still legible. The only difference is the areas with red no longer pop like they did before. And speaking of a loss of pop, look at this comparison, with the example on the right as seen through the eyes of someone who cannot distinguish greens and purplish-reds – a rarer color blindness also known as deuteranopia:
Again, while it’s still legible, it loses a lot of its contrast. It’s most especially noticeable with the text that was meant to stand out in pink. These are the things you need to know when highlighting specific portions of your email content with color, on colored backgrounds.
Best practices for designing email for color blind audiences
While the differences in how your color blind audience sees your email messages can be dramatic, designing for the color blind can be done without revamping existing color schemes. Just follow these tips:
1. Do not try to convey specific messages through color alone
Considering the above, here’s an example of what red and green selection buttons would look like to someone with red-green color blindness:
The text may be helpful in distinguishing the choices, but it goes without saying that at first glance, it’s confusing as to which option you should choose. Likewise, when offering a product in a variety of colors, adding labels beneath each of the options means that someone with color blindness will have less trouble determining what to choose amongst the group.
2. Make sure text stands out on colored backgrounds.
As a general rule, you don’t want to use one shade of red text on top of another shade of red, regardless of whether you are considering design for a color blind audience. If you find the text a little difficult to read, someone who finds it difficult to distinguish reds will have troubles as well. The more contrast between your text and your background, the better for all audiences.
3. Go monochrome
While you don’t have to go black and white, sticking to one shade of color in your emails can help. Observe this original email in purple (center), with variations simulating red-green (left) and blue-yellow (right) color blindness:
As you can see, the design looks stunning. By designing monochromatically, you can easily see how well your text and calls to action stand out without wondering if one shade of color is distinguishable from another.
4. Test your email designs
In addition to the color blindness simulator that you can use to upload images to see them through the eyes of specific color blindness types, Mac users can install an app called Color Oracle. This will place a toggle at the top of your menu bar that allows you to change your entire screen resolution to that of one specific type of color blindness:
Instead of having to take screenshots, you can view your current design through a specific color blindness type and edit accordingly. It’s also a great way to preview images, especially prior to purchasing stock photography or using image backgrounds for your buttons.
Knowing how well your call to action button will stand out from your email newsletter’s background is just as important as checking the readability of your main email content. For example, if you have a green button on a red background, it will not stand out to someone with red/green color blindness. You will want to make sure, at minimum, the contrast between the button and the background are distinguishable. All it takes is adding a different color border around the button, such as the silver borders around the help and act now buttons above.
As you’re editing your emails for color accessibility, remember that the same rules can be applied to the pages you want your visitors to click through to. Don’t lose conversions because your email works for the color blind, but the landing pages they are directed to are confusing.
In summary, by considering your color blind subscribers, you’ll not only be a nice person, but increase the likelihood of everyone having the chance to read and respond to your messages as intended. Hopefully after reading this post, you’ll understand what a difference a color-accessible theme throughout your campaigns and landing pages can make.
Coming soon: Our Guide to Accessibility in Email Design
We consider accessibility to be an important topic, so have teamed up with Vision Australia on an upcoming guide on best practices for email designers. This guide will be available in the coming few weeks, so subscribe below if you’d like to be one of the first to learn how to cater for the vision impaired when creating email newsletters.