How to Design for Colorblindness: Tips For Accessibility – Litmus

You know accessibility matters. You probably wouldn’t be on this page if you didn’t already know that it’s important to make sure that everyone reading your email gets to love and appreciate your email’s contents, regardless of how they’re accessing said email. (High-five!)

Now, that said, there’s loads of ways you can work to make your emails more accessible. Accessibility, especially in design, is less about flipping a switch—although we do have a switch for that—and more about changing how you think about design in the first place. Designing intelligently with color is the beginning of it, but you can also work to take steps to reduce unnecessary movement, add more free space within an email, and more. 

Today, we’ll look at one very specific aspect of accessibility in email design: how to design for colorblindness. We’ll cover why making sure your emails are visually accessible matters, what you can do to make that happen, and look at some common errors folks may experience along the way. 

Ready? Let’s dive in. 

Why design visually accessible emails in the first place? 

Great question, we’re glad you asked. Accessibility matters because your audience matters—and with over 3 million email users worldwide, that audience views and experiences your beloved in emails in a wide variety of ways. In the same way that different subscribers view your emails in different email service providers (ESPs), subscribers all view your emails with different visual capabilities, too. And just like designing for Dark Mode or Outlook, it’s important to make sure those users have a good experience with your emails too. 

When it comes to color, there’s a range of visual impairments that can impact experience. 

Types of visual impairments

There are a range of different visual impairments that can impact a user’s ability to perceive color in different ways. Here’s a list, based on the data from the National Eye Institute. 

• Red-green color blindness, as you might guess, makes it hard to tell the difference between red and green. This is the most common type of color blindness, and there are four different varieties. 
  • Deuteranomaly is the most common, and it simply makes green look more red than it might otherwise. 
  • Protanomaly is the opposite—it makes red look more green, and less bright.
  • Protanopia and deuteranopia are more extreme versions of both of the above. These versions of colorblindness mean that you are unable to distinguish between red and green. 
• Blue-yellow color blindness is a less-common type of color blindness that blurs the line between blue and green, and the line between yellow and red. There are two different types of this variety of color blindness. 
  • Tritanomaly is the simplest type, and makes it hard to tell the difference between blue and green, and between yellow and red. 
  • Tritanopia causes you to be totally unable to tell the difference between blue and green, purple and red, and yellow and pink—as well as making colors look less bright. 
• Complete color blindness is actually quite uncommon. This type of color blindness means you cannot see colors at all, and is technically called achromatopsia. 

Image source: Wikipedia

As you can see from this list, there’s a wide variety of ways in which people with different color and vision capabilities will be reading your emails. It’s important to make sure you’re reaching this audience with content and visual design choices that communicate your messages clearly in any scenario. 

So… how do we do that? Read on to find out!

What can I do to make sure my emails are accessible to those with color blindness?

The shortest answer to this question is to use a tool that checks how your email looks to people with color blindness—but there are other steps you can take as well. You could review the WCAG standards, use color contrast plugins in design tools like Figma, and/or use other third party tools. That being said, we recognize some of these steps add time to your design process and your overall workflow. 

So ultimately, we advocate for integrating accessibility tools into the tools you already have and already use! This is both simpler, and a better way to think about designing for accessibility, whether you’re thinking about color or other accessibility features.

Three best practices for designing for subscribers with color blindness 

Okay, so that was a lot of words about what we want to accomplish by designing for color blindness and why we should do that. But, most importantly, how can we do that? 

Here are three best practices for designing for audiences with colorblindness. 

#1: Make text easy to see against any background

The first thing you can do to make your emails more accessible is to make your text easy to read against any background. (Sorry, MySpace users with your pink-on-purple pages.) High contrast text and background color combinations work the best here, like the classic black on white or Dark Mode style, white on black. 

Let’s look at an example. Here’s an email before any filters have been applied to it. 

It’s pretty simple, with black text on a white background. Now, let’s add a filter. 

This is how that same email might appear to someone with deuteranopia. Notice how the difference between red and green disappears almost entirely, and the email appears to include mostly yellows and blues. 

By using a simple background and high contrast text, however, we’ve ensured that all the text remains visible to readers with this visual impairment. And, because we have this filter tool, we can visually double check our contrast, just to make sure we’re keeping things accessible. 

#2: Use more than color to communicate

The next big thing we can do to design for color blindness is to use more than color to communicate ideas. This requires a little bit of thinking outside the box, but can be a powerful tool in your design arsenal. 

“Thinking beyond color can look like a lot of things in an email. You can use shapes, sizes, symbols, borders, hover effects, motion, fill, or stroke effects to communicate a message without using text or color.” – Hannah Tiner, Email Design & Product Specialist at Litmus

Here’s an example of what this could look like. First, let’s take a look at this email with different approaches to product stock statuses: 

Red, yellow, and green indicate when something is in stock or not, using the traffic light system. 

Now, here’s our same email as above, this time with the tritanopia filter applied. Looks a little different, right? 

We can see three iterations of a message indicating a product’s stock status—but all three aren’t created equal. When the blues and yellows in the email are significantly reduced, the meaning of each icon is clearest when the shape of the icon communicates the status of the product, not just the color of the icon. 

This is a great example of how to use shapes to communicate, rather than—or in addition to—color. 

#3: Test, test, test

Finally, just like when designing for Dark Mode, testing is the name of the game. Since there are so many different variations of color blindness, it’s important to test your emails against all of them. Each email can display a lot of different ways to a lot of different eyes! 

Plus, since different email clients can mess with color contrasts, you’ll want to not only test with visual filters, but also test for different ESPs, as well. 

Now you may be thinking, “Great, so I should do that stuff, but that sounds like a lot of work”. Never fear. We have some options that may work for you, depending on what tools you’re working with.  

Litmus offers Visual Impairment Filters

For Litmus users, we offer the Visual Impairment Filters feature across Builder, our Previews & QA checklist, and Proof. This feature gives our users the opportunity to view their email as their recipients will with color blindness related visual impairments. By utilizing this feature, you can easily check to see that text is visible against backgrounds and check your color use across ESPs. 

These Visual Impairment Filters are specifically designed to make your email design experience inclusive for all your subscribers. 

Create accessible emails for subscribers with color blindness by…

…always designing emails that can be viewed in a multitude of ways with a wide range of color detection capabilities. And if you need help finding a good tool to do so, we know some folks.

How are you and your team designing accessible emails? We love seeing examples of accessibility in action, so send any examples you have our way! We’d love to feature them.