How to Design for Colorblindness: Tips For Accessibility

Key takeaways

• Colour blindness is a incapacity the place an individual can’t see or distinguish between sure colours, which implies that whenever you design your emails, a few of your subscribers could not see the identical e mail that you just do.
• There’s multiple type of shade blindness: Purple-green shade blindness, blue-yellow shade blindness, and full shade blindness. To design accessible emails for shade blindness, you’ll want to concentrate on how all three affect your e mail design.
• When designing emails for shade blindness, select a high-contrast shade palette, keep away from utilizing solely pictures or colours to convey that means, and manage your e mail in a transparent and logical means to your subscriber to learn.
• Litmus Visual Impairment filters make it straightforward to examine how your e mail seems for subscribers with shade blindness.

You already know email accessibility issues. As e mail entrepreneurs, ensuring that everybody studying your e mail will get to like and admire it’s *chef’s kiss.* 👌

For no matter purpose, accessible design has this status as being “numerous additional work.” (Spoiler: It’s not.) Accessibility, particularly in design, is much less about flipping a swap—though we do have a switch for that—and extra about altering how you concentrate on design within the first place. Colour, spacing, font, and structure all matter.

Let’s check out one very particular side of accessibility in e mail design: Find out how to design for readers with shade blindness. We’ll cowl why making your emails visually accessible issues, what you are able to do to make that occur, and have a look at some frequent errors of us could expertise alongside the way in which.

What’s shade blindness?

Colour blindness (additionally known as shade imaginative and prescient deficiency) doesn’t imply an individual can’t see. In line with the American Academy of Ophthalmology, shade blindness is a incapacity the place an individual is unable to see or distinguish between sure colours. 

Each eye accommodates two forms of cells that may detect gentle, referred to as rods (which detect gentle stage) and cones (which detect shade.) Colour blindness happens when one or the entire cones within the eye are lacking, broken, or understand a distinct shade than regular. This leads to a visible impairment the place an individual can’t distinguish between sure forms of colours—normally reds and greens. 

Whereas the vast majority of shade blindness is congenital, it’s doable for shade imaginative and prescient points to happen later in life as the results of illness or eye trauma. These with shade imaginative and prescient deficiency could use particular glasses or different visible aids, according to the National Eye Institute. 

How frequent is shade blindness?

Colour blindness is extra frequent in males than in girls. It happens in about one in twelve males (8%), and about one in 200 girls. In whole, about 300 million people world wide are colorblind (that’s roughly the inhabitants of america!)

What are the several types of shade blindness?

There are a selection of visible impairments that may affect a consumer’s potential to understand shade in numerous methods.

Picture supply: Wikipedia

Right here’s an inventory, primarily based on the data from the National Eye Institute.

1. Purple-green shade blindness

Purple-green shade blindness, as you would possibly guess, makes it exhausting to inform the distinction between pink and inexperienced. It doesn’t imply an individual can’t see the colours in any respect, simply that they’re tough to check. That is the commonest sort of shade blindness, and there are 4 completely different varieties:

• Deuteranomaly is the commonest, and it merely makes inexperienced look extra pink than it’d in any other case.
• Protanomaly is the alternative—it makes pink look extra inexperienced, and fewer vivid.
• Protanopia and deuteranopia are extra excessive variations of each of the above. These variations of shade blindness imply that you’re unable to tell apart between pink and inexperienced.

2. Blue-yellow shade blindness

Blue-yellow shade blindness is a less-common sort of shade blindness that blurs the road between blue and inexperienced, and the road between yellow and pink. There are two several types of this number of shade blindness:

• Tritanomaly is the best sort, and makes it exhausting to inform the distinction between blue and inexperienced, and between yellow and pink.
• Tritanopia causes you to be completely unable to inform the distinction between blue and inexperienced, purple and pink, and yellow and pink—in addition to making colours look much less vivid.

Whereas much less frequent than red-green shade blindness, it’s nonetheless one thing to contemplate.

3. Full shade blindness

Full shade blindness is definitely fairly unusual. The sort of shade blindness means you can’t see colours in any respect, and is technically referred to as achromatopsia.

Accessibility made easy

Creating accessible emails is now not non-compulsory—it’s required. Find out about accessibility’s affect on manufacturers from two trade specialists.

Watch now

Colorblind accessibility is non-negotiable

It’s extremely seemingly that you’ve subscribers in your e mail listing which might be colorblind. 

Accessibility issues as a result of your viewers issues—and with over 3 million email users worldwide, that viewers views and experiences your rigorously crafted emails in all kinds of the way.

In the identical means that subscribers view your emails in numerous e mail service suppliers (ESPs), subscribers all view your emails with completely different visible capabilities. And identical to designing for Dark Mode or Outlook, it’s essential to create an awesome consumer expertise together with your emails.

It may be straightforward to consider your subscribers as numbers on a display screen, however they’re individuals, too. Your job as an e mail marketer is to make lasting connections with individuals, not simply hit the numbers. Ensuring your emails could be learn by the individuals you wish to attain issues.

Colorblind accessible emails may also enhance engagement

Designing accessible emails for colorblind customers isn’t simply the precise factor to do. It’s additionally good enterprise sense, given how frequent shade blindness is within the basic inhabitants. If you need somebody to interact together with your e mail, they’ve to have the ability to discover your textual content and CTAs—normally the primary visible components of an e mail that get hidden with low-contrast colours or shade combos that may’t be perceived effectively with shade blindness.

If you follow accessible e mail design, you enhance the shopper expertise for everybody—so it’s no shock that doing so can improve engagement throughout your listing.

Rules of shade blindness accessibility 

Accessible design rules revolve round your design programs at massive, fairly than coding for accessibility on particular campaigns.

“We’ve constructed, and proceed to refine, design programs guaranteeing that each e mail we ship meets accessibility requirements,” says Kinkead. “We’re commonly desirous about how we are able to refine our model identification whereas nonetheless assembly these requirements and persevering with to check each time we ship to verify we all the time ship the very best expertise for all of our subscribers.”

Colour is just one design ingredient. After we take into consideration designing for accessibility, if we solely concentrate on shade, we’ll find yourself whiffing the e-mail for colorblind customers. That’s why the most important precept for shade blindness accessibility is to depend on greater than shade to convey your message.

Then we check, check, and check once more. “One of many largest challenges we’ve confronted not too long ago is simplifying our shade palette whereas sustaining accessibility,” says Kinkead. “We’ve an enormous focus right here at Litmus on ensuring our emails are accessible, and even then we nonetheless bumped into hassle once we tried to replace our model colours. We caught it early in testing and adjusted them to verify they labored in gentle and darkish backgrounds.”

Chances are high, the modifications you make for accessibility functions make your emails simpler to learn for all of your customers, not simply these with shade blindness or low imaginative and prescient.

Do you want to create a separate e mail for shade blind customers?

No, you don’t must create a separate e mail for shade blind customers. That’s as a result of optimizing your e mail for shade blindness truly makes your e mail campaigns extra accessible to everybody—whether or not or not they’ve a visible impairment. We’ll speak extra about how to try this beneath.

How accessible emails seem to paint blind readers

Let’s have a look at an instance of how accessible emails seem to paint blind readers utilizing Litmus’ Visual Impairments Filter. Right here’s an e mail earlier than any filters have been utilized to it:

Whereas this e mail seems to be “nice” to somebody with out shade blindness, activate a filter and you may see that a few of the that means is misplaced. That’s why accessible e mail design is so essential.

It’s fairly easy, with black textual content on a white background. Now, let’s add a filter.

That is how that very same e mail would possibly seem to somebody with deuteranopia. Discover how the distinction between pink and inexperienced disappears nearly fully, and the e-mail seems to incorporate principally yellows and blues.

By utilizing a easy background and excessive distinction textual content, nevertheless, we’ve ensured that each one the textual content stays seen to readers with visible impairments. We’ll speak extra about accessible e mail design finest practices in a second.

Find out how to create an accessible shade palette 

As a designer, Kinkead focuses on crafting simply the correct mix of design components like shade, form, line, area, and typography. This stability is what makes an e mail design match with a model’s total identification and leads the viewers towards the specified motion for the e-mail (ideally, conversions.)

Every one among these components must be accessible. With shade blindness, the plain place to begin is with shade. “We’re all the time working towards a shade palette that works in grayscale, and avoids problematic shade pairings for individuals with shade blindness. It ought to be versatile sufficient to make sure that nobody is excluded from understanding the content material, whether or not it’s UI components, charts, or textual content,” says Kinkead.

What’s an accessible shade palette?

An accessible shade palette is a collection of colours used to your e mail designs that meets accessibility tips such because the WCAG standards. The minimal distinction ratio is 4.5:1 for regular textual content and three:1 for giant textual content like headlines. 

“This provides sufficient visible distinction between foreground and background colours so textual content stays readable for everybody, together with individuals with low imaginative and prescient and shade blindness,” says Kinkead. “Distinction ratio is mainly a measure of how completely different two colours are in brightness. The upper the ratio, the better it’s to learn. If distinction is simply too low, textual content blends into the background, making it practically unattainable for some customers to see.”

This isn’t about selecting a model new shade palette only for colorblind customers. Somewhat, this train ought to be about taking a tough have a look at your current shade palette and remodeling it to make it possible for it’s practical for all your subscribers or web site guests.

“You need it to be versatile,” provides Kinkead. “I like having impartial and accent colours that may work in numerous situations with out inflicting accessibility points.”

Your shade selections are a very powerful side of designing emails for readers with shade blindness. Work together with your design group to translate the visible language of your model into an accessible shade palette.

Key concerns in constructing your shade palette 

There isn’t a selected set of colours which might be “accessible.” Somewhat, it’s concerning the mixture of colours and the way they work together with each other. 

As you construct an accessible shade palette, select colours that make the textual content readable.

• The extra excessive distinction you can also make your emails, the extra accessible they’ll be. Distinction refers back to the distinction between shade hues (various shades of a shade). It doesn’t matter what your model colours are, you’ll wish to persist with only some colours in your e mail—not more than two or three on the most. Unsure the place to begin? Pull out a shade wheel and go for the colours reverse each other, like blue and orange. Or hold it easy with darkish colours on a white background.
• Keep away from sure shade combos: Purple/inexperienced, blue/yellow, inexperienced/blue, and blue/purple are all difficult combos. It’s not about which colours you employ, however concerning the mixture of colours that issues in your design—and the way essential it’s to the general message of your e mail.

Make your textual content straightforward to learn towards any background. (Sorry, MySpace customers together with your pink-on-purple pages.) Excessive distinction textual content and background shade combos work the most effective right here, just like the traditional black on white or Darkish Mode type, white on black.

Make accessibility a part of your workflow

Litmus Accessibility Testing Guidelines helps you determine and repair points to make sure each subscriber has an awesome e mail expertise.

Make Your Emails Accessible

5 finest practices for designing emails for subscribers with shade blindness 

When designing for readers with shade blindness, it’s pure to begin with shade. But it surely’s not the one side of your design that issues for accessibility. We’ll check out how different components of your e mail design assist convey your message extra clearly or make it extra complicated for these with shade blindness. Right here’s what you want to remember:

1. Take into consideration your e mail designs holistically

Are you utilizing each design ingredient successfully in your emails? 

With one thing as highly effective as shade, it’s essential to cease and suppose by means of the use circumstances to your design. It’s not simply concerning the aesthetic—although in fact that’s essential—however matching the precise shade combos to the place they’ll be within the e mail. Additionally take into account whether or not or not there’s sufficient selection to successfully differentiate your knowledge factors. 

Says Kinkead, “In late 2024, we began utilizing fewer colours total to create a extra cohesive, intentional design system. This truly helps with accessibility as a result of it forces us to be extra considerate about distinction, hierarchy, and the way we use shade meaningfully fairly than counting on a very advanced palette which may not work for everybody.”

2. Don’t solely depend on shade to convey data

The following large factor we are able to do to design for shade blindness is to make use of greater than shade to speak concepts. That is essential for colorblind customers, however it’s additionally related for screen reader accessibility, which reads emails aloud for subscribers with visible impairments. Each ingredient of your e mail design can convey data—now it’s time to make use of that actual property. This requires just a little little bit of pondering exterior the field, however shall be a robust instrument in your design arsenal.

Incorporate icons or shapes into your design

Including icons or shapes into your e mail design can add a backup layer of communication to your message with out counting on shade.

Right here’s an instance of what this might appear like utilizing icons or shapes along with shade to speak a message. First, let’s check out this e mail with completely different approaches to product inventory statuses:

With accessible design, you’ll be able to’t depend on shade alone to get your that means throughout.

Purple, yellow, and inexperienced point out when one thing is in inventory or not, utilizing the site visitors gentle system.

Now, right here’s our identical e mail as above, this time with the tritanopia filter utilized. Appears just a little completely different, proper?

We are able to see three iterations of a message indicating a product’s inventory standing—however all three aren’t created equal. When the blues and yellows within the e mail are considerably lowered, the that means of every icon is clearest when the form of the icon communicates the standing of the product, not simply the colour of the icon.

It is a nice instance of use shapes to speak, fairly than—or along with—shade.

3. Set up your e mail in a transparent and logical order

When a subscriber opens your e mail, they wish to get the message as shortly as doable. Utilizing a easy, clear structure makes this doable, whether or not you’re sending a e-newsletter that’s principally textual content or a sales-driven marketing campaign that’s showcasing new product pictures. Most emails observe the identical sample: a header that introduces your e mail marketing campaign, physique copy that provides extra element, after which a call-to-action.

Supply: Really Good Emails

This e mail is a good instance of a one-column design. A transparent picture, high-contrast textual content, and a CTA button make it straightforward to grasp.

Supply: Really Good Emails

You may also select a traditional S-curve design like this e mail from Krispy Kreme. This retains the attention transferring back and forth, pulling the subscriber right down to the CTA.

4. Consider your textual content as visible, too

We frequently consider copy as separate from design, however the way in which you prepare the textual content in your e mail is its personal design ingredient, and one you could optimize for accessibility, too. Utilizing massive textual content, easily readable fonts, and loads of detrimental area goes a good distance for readability. 

At Litmus, we use not less than 18px for physique copy, and the smallest textual content in our emails (like footer copy or captions) is 14px. We additionally all the time left-align our textual content so it’s simpler to learn.

Really use textual content in your emails

Certainly one of our largest pet peeves in e mail design is the development of image-only emails. Not solely are they not accessible for visually impaired customers, they typically break in funky methods throughout completely different e mail shoppers and gadgets, making that modern picture your graphic designer labored exhausting on disappear. Your emails have to be multiple large assortment of pictures so anybody (shade blind or not) can perceive what you’re attempting to say.

Add a plain-text choice for colorblind readers

Writing for accessibility means utilizing clear, considerate language, however it’s additionally about engineering the precise expertise to your subscribers. Including a plain-text version of your e mail is one other means so as to add extra textual content. Most ESPs have the choice so as to add or edit a plain textual content model of your HTML earlier than you ship. Checking this field provides your shade blind readers yet another means to have the ability to interact together with your campaigns while not having to determine why you’re sending a picture awash in grey.

Don’t overlook your alt textual content

Alt textual content is a kind of e mail components that is very easy so as to add for accessibility however typically will get neglected. And it’s not only for shade blindness. Extra customers are blocking pictures or having a sensible speaker learn their emails outloads, so it’s a helpful addition to your e mail for everybody. Good alt textual content clearly describes a picture in order that, if a reader can’t see it (for no matter purpose) ,they nonetheless perceive what you had been attempting to convey.

5. Use Visible Impairment Filters

One of the simplest ways to make sure your emails are accessible to these with shade blindness is to make use of a instrument that checks how your e mail seems to be to individuals with shade blindness. You possibly can additionally overview the WCAG standards, use shade distinction plugins in design instruments like Figma, or use different third social gathering instruments for every e mail marketing campaign. However these can add time to your design course of and your total workflow.

That’s why we advocate for integrating accessibility instruments into the instruments you have already got and already use (pssst…like Litmus!) That is each less complicated, and a greater means to consider designing for accessibility, whether or not you’re desirous about shade or different accessibility options.

Since there are such a lot of completely different variations of shade blindness, it’s essential to check your emails towards all of them. Every e mail can show numerous alternative ways to numerous completely different eyes. I imply…

Plus, since completely different e mail shoppers can mess with shade contrasts, you’ll wish to not solely check with visible filters, but in addition check for various ESPs, as effectively. You possibly can really feel the headache approaching, proper?

For Litmus customers, we provide the Visual Impairment Filters function throughout Litmus Builder, our Previews and QA checklist, and Proof. This function provides clients the chance to view their e mail as their recipients will with shade blindness associated visible impairments.

By using this function, you’ll be able to simply examine to see that textual content is seen towards backgrounds and examine your shade use throughout ESPs. With Litmus, it’s straightforward to design emails that may be considered in a mess of the way with a variety of shade detection capabilities.

Be taught from the most effective

Your favourite manufacturers use Litmus to ship flawless e mail experiences. Uncover the ROI your emails can obtain with Litmus.

Explore Case Studies

Trade-specific suggestions to make sure emails are colorblind accessible 

Typically, Kinkead advises sticking to the identical basic rules above. “Whether or not it’s monetary companies, healthcare, e-commerce, or SaaS, the secret’s to pair shade with extra visible cues like icons, patterns, or textual content labels so the that means continues to be clear for customers with shade blindness or low imaginative and prescient,” she says.

What does accessibility appear like to your trade? Listed below are just a few examples:

Transcend pink and inexperienced with monetary companies stories

In emails containing monetary summaries, keep away from relying solely on pink and inexperienced to indicate features or losses. As a substitute, embrace symbols, like ↑ for development, ↓ for decline, and textual content explanations subsequent to any charts you embrace.

This e mail from TurboTax is a good instance of excessive distinction and vivid colours, utilizing orange, blue, and black in a Halloween-themed e mail marketing campaign.

Be sure to get essential messages throughout with healthcare emails

Equally, in case you’re sending emails that embrace charts, knowledge, or another essential data like appointment day/time, just be sure you’re not relying solely on shade to get your level throughout.

If it’s an e mail about check outcomes or appointments, hold it tremendous easy so that everybody can get the message. Even higher, use a plain textual content model that features the entire textual content on a easy background, and all the time use alt textual content.

Embrace alt textual content with image-heavy e-commerce emails

As a result of e-commerce is so visible, many manufacturers typically skip the e-mail coding and ship all-image emails. Don’t fall into this entice! If you happen to embrace a picture of your product, use descriptive alt textual content that helps display screen readers and people with shade blindness perceive what they’re shopping for.

It is a nice use of alt textual content to inform a narrative as an alternative of shade.

With e-commerce, you wish to ensure that somebody can truly purchase your merchandise. With out alt textual content right here on this images-off e mail from Ace {Hardware}, somebody with low imaginative and prescient or shade blindness would don’t know what the e-mail is about. You possibly can’t get these {dollars} if somebody can’t work together together with your e mail within the first place.

B2B SaaS emails don’t need to be boring to be accessible

In case your model makes use of a extra animated type, consider your shade palette to be sure you’re utilizing high-contrast shade combos between your background shade, your headlines, and your physique copy.

We’re nonetheless obsessive about this April Idiot’s marketing campaign we despatched in honor of the fiftieth anniversary of e mail. We wished to convey again all of our favourite ‘90s tendencies—I imply, simply have a look at that Comedian Sans typography—however with a contemporary strategy to accessibility. You can see the full how-to here.

Create extra accessible emails for subscribers right now 

Designing for accessibility isn’t about checking a field. It’s about making your emails simpler to learn and perceive for everybody, whether or not they have a visible impairment or not. At Litmus, we consider that accessible e mail design is a crucial a part of an e mail entrepreneurs’ job—as a result of what makes an e mail higher to your viewers with visible impairment typically makes the e-mail higher for everybody. With Accessibility Testing in Litmus Guidelines, you’ll be able to immediately see by means of your email testing whether or not your e mail is accessible for all of your subscribers and get actionable recommendation on how one can make your emails extra inclusive.

Widespread colorblind accessibility FAQs 

Nonetheless have questions? Check out our colorblind accessibility FAQs:

What are the colours to keep away from for shade blindness?

There are not any particular colours to keep away from for shade blindness. As a substitute, ensure that the combos of colours you select have sufficient distinction between them that they are often seen by colorblind customers. Widespread combos to keep away from for shade blindness embrace pink/inexperienced and blue/yellow. 

Can shade blindness be thought of a incapacity?

Sure, shade blindness is taken into account a incapacity below the Americans with Disabilities Act (ADA) in america, which implies that legally, in case you ship to subscribers situated in america, you have to observe Web Content Accessibility Guidelines (WCAG) to stay compliant. Related accessibility legal guidelines exist within the E.U. and Canada.

What’s the minimal distinction ratio for textual content and background colours?

In line with WCAG standards, the minimal distinction ratio for textual content and background colours is 4.5:1 for regular textual content and three:1 for giant textual content like headlines. 

What’s shade blind vs shade poor? 

Colour imaginative and prescient deficiency, in any other case generally known as shade blindness, is a situation the place a person perceives colours otherwise. There are three forms of shade blindness: Purple/inexperienced, blue/yellow, and achromatopsia, when an individual can’t understand shade in any respect.