The way to Design for Colorblindness: Ideas For Accessibility

Key takeaways

Colour blindness is a incapacity the place an individual can’t see or distinguish between sure colours, which signifies that if you design your emails, a few of your subscribers might not see the identical electronic mail that you just do.There’s a couple of type of shade blindness: Pink-green shade blindness, blue-yellow shade blindness, and full shade blindness. To design accessible emails for shade blindness, you’ll want to pay attention to how all three impression your electronic 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 electronic mail in a transparent and logical approach in your subscriber to learn.Litmus Visible Impairment filters make it straightforward to verify how your electronic mail seems for subscribers with shade blindness.

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

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

Let’s check out one very particular facet of accessibility in electronic mail design: The way 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 widespread errors of us might 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 response to 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 comprises two kinds of cells that may detect mild, known as rods (which detect mild stage) and cones (which detect shade.) Colour blindness happens when one or all the cones within the eye are lacking, broken, or understand a special shade than regular. This leads to a visible impairment the place an individual can’t distinguish between sure kinds of colours—normally reds and greens. 

Whereas nearly all of shade blindness is congenital, it’s potential 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 might use particular glasses or different visible aids, in line with the Nationwide Eye Institute. 

How widespread is shade blindness?

Colour blindness is extra widespread 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 folks world wide are colorblind (that’s roughly the inhabitants of the USA!)

What are the several types of shade blindness?

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

Picture supply: Wikipedia

Right here’s an inventory, based mostly on the information from the Nationwide Eye Institute.

1. Pink-green shade blindness

Pink-green shade blindness, as you may 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 troublesome to match. 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 would in any other case.Protanomaly is the other—it makes pink look extra inexperienced, and fewer vibrant.Protanopia and deuteranopia are extra excessive variations of each of the above. These variations of shade blindness imply that you’re unable to differentiate 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 vibrant.

Whereas much less widespread than red-green shade blindness, it’s nonetheless one thing to think about.

3. Full shade blindness

Full shade blindness is definitely fairly unusual. Any such shade blindness means you can not see colours in any respect, and is technically known as achromatopsia.

Accessibility made easy

Creating accessible emails is now not non-compulsory—it’s required. Study accessibility’s impression on manufacturers from two business specialists.

Watch now

Colorblind accessibility is non-negotiable

It’s extremely seemingly that you’ve subscribers in your electronic mail listing which are colorblind. 

Accessibility issues as a result of your viewers issues—and with over 3 million electronic mail customers worldwide, that viewers views and experiences your fastidiously crafted emails in all kinds of the way.

In the identical approach that subscribers view your emails in numerous electronic mail service suppliers (ESPs), subscribers all view your emails with completely different visible capabilities. And identical to designing for Darkish Mode or Outlook, it’s vital to create an incredible consumer expertise together with your emails.

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

Colorblind accessible emails also can enhance engagement

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

While you follow accessible electronic mail design, you enhance the client expertise for everybody—so it’s no shock that doing so can enhance engagement throughout your listing.

Rules of shade blindness accessibility 

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

“We’ve got constructed, and proceed to refine, design techniques guaranteeing that each electronic mail we ship meets accessibility requirements,” says Kinkead. “We’re commonly interested by how we are able to refine our model identification whereas nonetheless assembly these requirements and persevering with to check each time we ship to ensure we at all times ship the absolute best expertise for all of our subscribers.”

Colour is just one design aspect. After we take into consideration designing for accessibility, if we solely give attention to shade, we’ll find yourself whiffing the e-mail for colorblind customers. That’s why the largest 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 greatest challenges we’ve confronted just lately is simplifying our shade palette whereas sustaining accessibility,” says Kinkead. “We’ve got an enormous focus right here at Litmus on ensuring our emails are accessible, and even then we nonetheless bumped into hassle after we tried to replace our model colours. We caught it early in testing and adjusted them to ensure they labored in mild and darkish backgrounds.”

Chances are high, the adjustments 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 it’s worthwhile to create a separate electronic mail for shade blind customers?

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

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’ Visible Impairments Filter. Right here’s an electronic mail earlier than any filters have been utilized to it:

Whereas this electronic mail appears to be like “fantastic” 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 electronic mail design is so vital.

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

That is how that very same electronic mail may seem to somebody with deuteranopia. Discover how the distinction between pink and inexperienced disappears virtually solely, and the e-mail seems to incorporate largely yellows and blues.

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

The way 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 steadiness is what makes an electronic mail design match with a model’s general identification and leads the viewers towards the specified motion for the e-mail (ideally, conversions.)

Every one in all these components must be accessible. With shade blindness, the plain place to begin is with shade. “We’re at all times working towards a shade palette that works in grayscale, and avoids problematic shade pairings for folks with shade blindness. It must 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 in your electronic mail designs that meets accessibility tips such because the WCAG requirements. The minimal distinction ratio is 4.5:1 for regular textual content and three:1 for big textual content like headlines. 

“This offers sufficient visible distinction between foreground and background colours so textual content stays readable for everybody, together with folks 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 simpler it’s to learn. If distinction is just too low, textual content blends into the background, making it almost inconceivable for some customers to see.”

This isn’t about selecting a model new shade palette only for colorblind customers. Relatively, this train must be about taking a tough have a look at your present shade palette and remodeling it to make it possible for it’s practical for your entire 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 eventualities with out inflicting accessibility points.”

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

Key concerns in constructing your shade palette 

There isn’t a particular set of colours which are “accessible.” Relatively, it’s in regards to 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 keep on with only some colours in your electronic mail—not more than two or three on the most. Undecided the place to begin? Pull out a shade wheel and go for the colours reverse each other, like blue and orange. Or maintain it easy with darkish colours on a white background.Keep away from sure shade mixtures: Pink/inexperienced, blue/yellow, inexperienced/blue, and blue/purple are all tough mixtures. It’s not about which colours you employ, however in regards to the mixture of colours that issues in your design—and the way vital it’s to the general message of your electronic mail.

Make your textual content straightforward to learn in opposition to any background. (Sorry, MySpace customers together with your pink-on-purple pages.) Excessive distinction textual content and background shade mixtures work the perfect right here, just like the traditional black on white or Darkish Mode model, white on black.

Make accessibility a part of your workflow

Litmus Accessibility Testing Guidelines helps you establish and repair points to make sure each subscriber has an incredible electronic 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. However it’s not the one facet of your design that issues for accessibility. We’ll check out how different components of your electronic 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 electronic mail designs holistically

Are you utilizing each design aspect successfully in your emails? 

With one thing as highly effective as shade, it’s vital to cease and suppose by the use circumstances in your design. It’s not simply in regards to the aesthetic—although in fact that’s vital—however matching the proper shade mixtures to the place they’ll be within the electronic mail. Additionally take into account whether or not or not there’s sufficient selection to successfully differentiate your information factors. 

Says Kinkead, “In late 2024, we began utilizing fewer colours general to create a extra cohesive, intentional design system. This really 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 complicated palette that may not work for everybody.”

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

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 vital for colorblind customers, however it’s additionally related for display screen reader accessibility, which reads emails aloud for subscribers with visible impairments. Each aspect of your electronic mail design can convey info—now it’s time to make use of that actual property. This requires just a little little bit of pondering outdoors the field, however will likely be a robust instrument in your design arsenal.

Incorporate icons or shapes into your design

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

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

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

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

Now, right here’s our similar electronic mail as above, this time with the tritanopia filter utilized. Seems 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 electronic mail are considerably diminished, 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 find out how to use shapes to speak, fairly than—or along with—shade.

3. Arrange your electronic mail in a transparent and logical order

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

Supply: Actually Good Emails

This electronic 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: Actually Good Emails

You may also select a traditional S-curve design like this electronic mail from Krispy Kreme. This retains the attention transferring backward and forward, pulling the subscriber all the way down to the CTA.

4. Consider your textual content as visible, too

We regularly consider copy as separate from design, however the way in which you prepare the textual content in your electronic mail is its personal design aspect, and one you can optimize for accessibility, too. Utilizing massive textual content, simply readable fonts, and loads of detrimental area goes a great distance for readability. 

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

Really use textual content in your emails

Certainly one of our greatest pet peeves in electronic mail design is the development of image-only emails. Not solely are they not accessible for visually impaired customers, they usually break in funky methods throughout completely different electronic mail shoppers and units, making that modern picture your graphic designer labored exhausting on disappear. Your emails have to be a couple of large assortment of pictures so anybody (shade blind or not) can perceive what you’re making an attempt 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 proper expertise in your subscribers. Including a plain-text model of your electronic mail is one other approach 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 approach to have the ability to have interaction together with your campaigns while not having to determine why you’re sending a picture awash in grey.

Don’t neglect your alt textual content

Alt textual content is a type of electronic mail components that is really easy so as to add for accessibility however usually will get ignored. And it’s not only for shade blindness. Extra customers are blocking pictures or having a wise speaker learn their emails outloads, so it’s a helpful addition to your electronic mail for everybody. Good alt textual content clearly describes a picture in order that, if a reader can’t see it (for no matter motive) ,they nonetheless perceive what you had been making an attempt to convey.

5. Use Visible Impairment Filters

The easiest way to make sure your emails are accessible to these with shade blindness is to make use of a instrument that checks how your electronic mail appears to be like to folks with shade blindness. You could possibly additionally overview the WCAG requirements, use shade distinction plugins in design instruments like Figma, or use different third social gathering instruments for every electronic mail marketing campaign. However these can add time to your design course of and your general 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 easier, and a greater approach to consider designing for accessibility, whether or not you’re interested by shade or different accessibility options.

Since there are such a lot of completely different variations of shade blindness, it’s vital to check your emails in opposition to all of them. Every electronic mail can show a variety of other ways to a variety of completely different eyes. I imply…

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

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

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

Study from the perfect

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

Discover Case Research

Business-specific ideas to make sure emails are colorblind accessible 

Usually, Kinkead advises sticking to the identical basic ideas above. “Whether or not it’s monetary providers, healthcare, e-commerce, or SaaS, the secret is to pair shade with further 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 seem like in your business? Listed below are a number of examples:

Transcend pink and inexperienced with monetary providers experiences

In emails containing monetary summaries, keep away from relying solely on pink and inexperienced to indicate positive factors or losses. As an alternative, embody symbols, like ↑ for development, ↓ for decline, and textual content explanations subsequent to any charts you embody.

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

Be sure to get vital messages throughout with healthcare emails

Equally, for those who’re sending emails that embody charts, information, or every other vital info like appointment day/time, just remember to’re not relying solely on shade to get your level throughout.

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

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

As a result of e-commerce is so visible, many manufacturers usually skip the e-mail coding and ship all-image emails. Don’t fall into this lure! When you embody 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 a substitute of shade.

With e-commerce, you wish to be certain that somebody can really purchase your merchandise. With out alt textual content right here on this images-off electronic 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 electronic mail within the first place.

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

In case your model makes use of a extra animated model, consider your shade palette to be sure you’re utilizing high-contrast shade mixtures 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 electronic mail. We wished to carry again all of our favourite ‘90s tendencies—I imply, simply have a look at that Comedian Sans typography—however with a contemporary method to accessibility. You possibly can see the total how-to right here.

Create extra accessible emails for subscribers at present 

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 electronic mail design is a vital a part of an electronic mail entrepreneurs’ job—as a result of what makes an electronic mail higher in your viewers with visible impairment usually makes the e-mail higher for everybody. With Accessibility Testing in Litmus Guidelines, you may immediately see by your electronic mail testing whether or not your electronic mail is accessible for all of your subscribers and get actionable recommendation on how one can make your emails extra inclusive.

Frequent 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 an alternative, be certain that the mixtures of colours you select have sufficient distinction between them that they are often seen by colorblind customers. Frequent mixtures to keep away from for shade blindness embody pink/inexperienced and blue/yellow. 

Can shade blindness be thought of a incapacity?

Sure, shade blindness is taken into account a incapacity below the Individuals with Disabilities Act (ADA) in the USA, which signifies that legally, for those who ship to subscribers situated in the USA, you could comply with Net Content material Accessibility Pointers (WCAG) to stay compliant. Comparable accessibility legal guidelines exist within the E.U. and Canada.

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

In response to WCAG requirements, the minimal distinction ratio for textual content and background colours is 4.5:1 for regular textual content and three:1 for big textual content like headlines. 

What’s shade blind vs shade poor? 

Colour imaginative and prescient deficiency, in any other case often called shade blindness, is a situation the place a person perceives colours in a different way. There are three kinds of shade blindness: Pink/inexperienced, blue/yellow, and achromatopsia, when an individual can’t understand shade in any respect.