{"id":72513,"date":"2025-02-26T11:18:20","date_gmt":"2025-02-26T16:18:20","guid":{"rendered":"https:\/\/www.litmus.com\/?p=72513"},"modified":"2025-09-03T14:33:55","modified_gmt":"2025-09-03T18:33:55","slug":"how-to-design-for-colorblindness","status":"publish","type":"post","link":"https:\/\/www.litmus.com\/blog\/how-to-design-for-colorblindness","title":{"rendered":"The Ultimate Guide to Colorblindness Accessibility in Email"},"content":{"rendered":"\n\n\t<div id=\"simple-text-block-block_4d1dbbcc723cdef963bb8d9f9154784e\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<h3><span style=\"font-weight: 400;\">Key takeaways<\/span><\/h3>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Color blindness is a disability where a person can\u2019t see or distinguish between certain colors, which means that when you design your emails, some of your subscribers may not see the same email that you do.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">There is more than one form of color blindness: Red-green color blindness, blue-yellow color blindness, and complete color blindness. To design accessible emails for color blindness, you\u2019ll need to be aware of how all three impact your email design.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">When designing emails for color blindness, choose a high-contrast color palette, avoid using only images or colors to convey meaning, and organize your email in a clear and logical way for your subscriber to read.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\"><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/accessible-email-made-easy-introducing-accessibility-checks-in-litmus\">Litmus Visual Impairment filters<\/a> make it easy to check how your email appears for subscribers with color blindness.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">You already know <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/ultimate-guide-accessible-emails\"><span style=\"font-weight: 400;\">email accessibility<\/span><\/a><span style=\"font-weight: 400;\"> matters. As email marketers, making sure that everyone reading your email gets to love and appreciate it is *chef\u2019s kiss.* \ud83d\udc4c<\/span><\/p>\n<p><span style=\"font-weight: 400;\">For whatever reason, <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/email-accessibility-for-designers-8-best-practices-you-should-follow\"><span style=\"font-weight: 400;\">accessible design<\/span><\/a><span style=\"font-weight: 400;\"> has this reputation as being \u201ca lot of extra work.\u201d (Spoiler: It\u2019s not.) Accessibility, especially in design, is less about flipping a switch\u2014although <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/new-dark-mode-visual-impairment\/\"><span style=\"font-weight: 400;\">we do have a switch for that<\/span><\/a><span style=\"font-weight: 400;\">\u2014and more about changing how you think about design in the first place. Color, spacing, font, and layout all matter.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Let\u2019s take a look at one very specific aspect of accessibility in email design: How to design for readers with color blindness. We\u2019ll cover why making your emails visually accessible matters, what you can do to make that happen, and look at some common errors folks may experience along the way.<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a rel=\"noopener\" href=\"#blindness\"><span style=\"font-weight: 400;\">What is color blindness?<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a rel=\"noopener\" href=\"#common\"><span style=\"font-weight: 400;\">How common is color blindness?<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a rel=\"noopener\" href=\"#kinds\"><span style=\"font-weight: 400;\">Different kinds of color blindness<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a rel=\"noopener\" href=\"#non-negotiable\"><span style=\"font-weight: 400;\">Colorblind accessibility is non-negotiable<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a rel=\"noopener\" href=\"#principles\"><span style=\"font-weight: 400;\">Principles of color blindness accessibility<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a rel=\"noopener\" href=\"#appear\"><span style=\"font-weight: 400;\">How accessible emails appear to color blind readers<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a rel=\"noopener\" href=\"#color-palette\"><span style=\"font-weight: 400;\">How to create an accessible color palette<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a rel=\"noopener\" href=\"#designing-emails\"><span style=\"font-weight: 400;\">5 best practices for designing emails for subscribers with color blindness<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a rel=\"noopener\" href=\"#tips\"><span style=\"font-weight: 400;\">Industry-specific tips for color blind accessible emails<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a rel=\"noopener\" href=\"#faqs\"><span style=\"font-weight: 400;\">Common colorblind accessibility FAQs<\/span><\/a><\/li>\n<\/ul>\n<h2><span id=\"blindness\" style=\"font-weight: 400;\">What is color blindness?<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Color blindness (also referred to as color vision deficiency) doesn\u2019t mean a person can\u2019t see. According to the <\/span><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/www.aao.org\/eye-health\/diseases\/what-is-color-blindness\"><span style=\"font-weight: 400;\">American Academy of Ophthalmology<\/span><\/a><span style=\"font-weight: 400;\">, color blindness is a disability where a person is unable to see or distinguish between certain colors.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Every eye contains two types of cells that can detect light, called rods (which detect light level) and cones (which detect color.) Color blindness occurs when one or all of the cones in the eye are missing, damaged, or perceive a different color than normal. This results in a visual impairment where a person cannot distinguish between certain types of colors\u2014usually reds and greens.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">While the majority of color blindness is congenital, it is possible for color vision issues to occur later in life as the result of disease or eye trauma. Those with color vision deficiency may use special glasses or other visual aids, <\/span><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/www.nei.nih.gov\/learn-about-eye-health\/eye-conditions-and-diseases\/color-blindness\"><span style=\"font-weight: 400;\">according to the National Eye Institute.<\/span><\/a><span style=\"font-weight: 400;\">\u00a0<\/span><\/p>\n<h3><span id=\"common\" style=\"font-weight: 400;\">How common is color blindness?<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Color blindness is more common in men than in women. It occurs in about one in twelve men (8%), and about one in 200 women. In total, <\/span><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/my.clevelandclinic.org\/health\/diseases\/11604-color-blindness\"><span style=\"font-weight: 400;\">about 300 million people<\/span><\/a><span style=\"font-weight: 400;\"> around the world are colorblind (that\u2019s roughly the population of the United States!)<\/span><\/p>\n<h2><span id=\"kinds\" style=\"font-weight: 400;\">What are the different types of color blindness?<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">There are a range of visual impairments that can impact a user\u2019s ability to perceive color in different ways.<\/span><\/p>\n<figure id=\"attachment_72521\" aria-describedby=\"caption-attachment-72521\" style=\"width: 1024px\" class=\"wp-caption alignnone\"><img decoding=\"async\" class=\"wp-image-72521 size-large\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/06\/Visual-Color-Spectrum-1024x466.png\" alt=\"Visual-Color-Spectrums for normal vision, deuteranomalo, protanomaly, protanopia, deuteranopia, tritanopia, tritanomaly, achromatopsia and the percent of the population affected. \" width=\"1024\" height=\"466\" srcset=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/06\/Visual-Color-Spectrum-1024x466.png 1024w, https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/06\/Visual-Color-Spectrum-300x137.png 300w, https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/06\/Visual-Color-Spectrum-768x350.png 768w, https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/06\/Visual-Color-Spectrum-700x319.png 700w, https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/06\/Visual-Color-Spectrum.png 1441w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption id=\"caption-attachment-72521\" class=\"wp-caption-text\">This chart shows the wide range of colors that can and can\u2019t be perceived by colorblind people.<\/figcaption><\/figure>\n<p style=\"text-align: center;\"><span style=\"font-weight: 400;\">Image source: <\/span><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/en.wikipedia.org\/wiki\/File:Color_blindness.svg\"><span style=\"font-weight: 400;\">Wikipedia<\/span><\/a><\/p>\n<p><span style=\"font-weight: 400;\">Here\u2019s a list, based on the <\/span><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/www.nei.nih.gov\/learn-about-eye-health\/eye-conditions-and-diseases\/color-blindness\/types-color-blindness\"><span style=\"font-weight: 400;\">data from the National Eye Institute.<\/span><\/a><\/p>\n<h3><span style=\"font-weight: 400;\">1. Red-green color blindness<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Red-green color blindness, as you might guess, makes it hard to tell the difference between red and green. It doesn\u2019t mean a person can\u2019t see the colors at all, just that they are difficult to compare. This is the most common type of color blindness, and there are four different varieties:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\"><strong>Deuteranomaly<\/strong> is the most common, and it simply makes green look more red than it might otherwise.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\"><strong>Protanomaly<\/strong> is the opposite\u2014it makes red look more green, and less bright.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\"><strong>Protanopia and deuteranopia<\/strong> are more extreme versions of both of the above. These versions of color blindness mean that you are unable to distinguish between red and green.<\/span><\/li>\n<\/ul>\n<h3><span style=\"font-weight: 400;\">2. Blue-yellow color blindness<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">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:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Tritanomaly is the simplest type, and makes it hard to tell the difference between blue and green, and between yellow and red.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Tritanopia causes you to be totally unable to tell the difference between blue and green, purple and red, and yellow and pink\u2014as well as making colors look less bright.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">While less common than red-green color blindness, it\u2019s still something to consider.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">3. Complete color blindness<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Complete color blindness is actually quite uncommon. This type of color blindness means you cannot see colors at all, and is technically called achromatopsia.<\/span><\/p>\n\n<div class=\"container pt-3 pb-5 px-1\">\n\t<div class=\"row blog-cta-green rounded-5 p-4\">\n\t\t<div class=\"mx-auto col-12\">\n\t\t\t<div class=\"row d-flex align-items-center\">\n\t\t\t<div class=\"col-12 text-center\">\n\t\t\t\t<p class=\"bold fs-4\">Accessibility made simple<\/p>\n\t\t\t\t<p>Creating accessible emails is no longer optional\u2014it\u2019s required. Learn about accessibility\u2019s impact on brands from two industry experts.<\/p>\n\t\t\t\t<button class=\"button-blue arrow\"><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/resources\/why-businesses-must-embrace-email-accessibility\" class=\"text-white text-decoration-none\">Watch now<\/a><\/button>\n\t\t\t<\/div><!--col-6-->\n\t\t\t<div class=\"d-none\">\n\t\t\t\t<img decoding=\"async\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2024\/07\/blog-cta-email-guardian-07292024.svg\" width=\"210\" height=\"180\" alt=\"\">\n\t\t\t<\/div><!--col-6-->\n\t\t\t<\/div> <!--row-->\n\t\t<\/div><!--col-12-->\n\t<\/div><!--row-->\n<\/div><!--container-->\n\t\n\t\n\t\n\t\n\n<h2><span id=\"non-negotiable\" style=\"font-weight: 400;\">Colorblind accessibility is non-negotiable<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">It\u2019s highly likely that you have subscribers on your email list that are colorblind.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Accessibility matters because your audience matters\u2014and with <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/resources\/ultimate-guide-to-email-accessibility\/\"><span style=\"font-weight: 400;\">over 3 million email users worldwide<\/span><\/a><span style=\"font-weight: 400;\">, that audience views and experiences your carefully crafted emails in a wide variety of ways.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">In the same way that subscribers view your emails in different email service providers (ESPs), subscribers all view your emails with different visual capabilities. And just like <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-dark-mode-for-email-marketers\/\"><span style=\"font-weight: 400;\">designing for Dark Mode<\/span><\/a><span style=\"font-weight: 400;\"> or <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/a-guide-to-rendering-differences-in-microsoft-outlook-clients\/\"><span style=\"font-weight: 400;\">Outlook<\/span><\/a><span style=\"font-weight: 400;\">, it\u2019s important to create a great user experience with your emails.<\/span><\/p>\n<figure class=\"row p-5 my-5 background-light-gray rounded-5\">\n<blockquote class=\"blockquote\"><p>\u201cIf color is the only way you&#8217;re conveying meaning such as using red for errors and green for success, users experiencing color blindness might not be able to interpret your design at all. Accessibility is about making sure the experience works for everyone.\u201d<\/blockquote><figcaption class=\"blockquote-footer\"><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/www.linkedin.com\/in\/beckykinkead\/\" target=\"_blank\" rel=\"noopener\">Becky Kinkead<\/a>, Marketing Design and UX Manager at Litmus<\/figcaption><\/figure>\n<p><span style=\"font-weight: 400;\">It can be easy to think of your subscribers as numbers on a screen, but they\u2019re people, too. Your job as an email marketer is to make lasting connections with people, not just hit the numbers. Making sure your emails can be read by the people you want to reach matters.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Colorblind accessible emails can also improve engagement<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Designing accessible emails for colorblind users isn\u2019t just the right thing to do. It\u2019s also smart business sense, given how common color blindness is in the general population. If you want someone to engage with your email, they have to be able to find your text and CTAs\u2014usually the first visual elements of an email that get hidden with low-contrast colors or color combinations that can\u2019t be perceived well with color blindness.<\/span><\/p>\n<figure class=\"row p-5 my-5 background-light-gray rounded-5\">\n<blockquote class=\"blockquote\"><p>\u201cWe&#8217;re not just making something accessible so we feel good about ourselves. Americans with disabilities collectively have twenty one billion dollars per year in disposable income after taxes and necessities. We&#8217;re really focusing on making something accessible because users with disabilities won\u2019t spend that money with the companies that don\u2019t follow these accessible best practices. We see the difference in our performance.\u201d<\/blockquote><figcaption class=\"blockquote-footer\"><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/www.linkedin.com\/in\/lcastady\/\" target=\"_blank\" rel=\"noopener\">Lauren Castady<\/a>, Associative Creative Director at Oracle Digital Experience Agency<\/figcaption><\/figure>\n<p><span style=\"font-weight: 400;\">When you practice accessible email design, you improve the customer experience for everyone\u2014so it\u2019s no surprise that doing so can increase engagement across your list.<\/span><\/p>\n<h2><span id=\"principles\" style=\"font-weight: 400;\">Principles of color blindness accessibility\u00a0<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Accessible design principles revolve around your design systems at large, rather than <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/7-simple-tricks-to-make-your-email-code-more-accessible\"><span style=\"font-weight: 400;\">coding for accessibility<\/span><\/a><span style=\"font-weight: 400;\"> on specific campaigns.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u201cWe have built, and continue to refine, design systems ensuring that every email we send meets accessibility standards,\u201d says Kinkead. \u201cWe\u2019re regularly thinking about how we can refine our brand identity while still meeting these standards and continuing to test every time we send to make sure we always deliver the best possible experience for all of our subscribers.\u201d<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Color is only one design element. When we think about designing for accessibility, if we only focus on color, we\u2019ll end up whiffing the email for colorblind users. That\u2019s why the biggest principle for color blindness accessibility is to <\/span><b>rely on more than color to convey your message.<\/b><\/p>\n<p><span style=\"font-weight: 400;\">Then we test, test, and test again. \u201cOne of the biggest challenges we\u2019ve faced recently is simplifying our color palette while maintaining accessibility,\u201d says Kinkead. \u201cWe have a huge focus here at Litmus on making sure our emails are accessible, and even then we still ran into trouble when we tried to update our brand colors. We caught it early in testing and adjusted them to make sure they worked in light and dark backgrounds.\u201d<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Chances are, the changes you make for accessibility purposes make your emails easier to read for all your users, not just those with color blindness or low vision.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Do you need to create a separate email for color blind users?<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">No, you don\u2019t need to create a separate email for color blind users. That\u2019s because optimizing your email for color blindness actually makes your email campaigns more accessible to everyone\u2014whether or not they have a visual impairment. We\u2019ll talk more about how to do that below.<\/span><\/p>\n<h2><span id=\"appear\" style=\"font-weight: 400;\">How accessible emails appear to color blind readers<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Let\u2019s look at an example of how accessible emails appear to color blind readers using Litmus\u2019 <\/span><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/help.litmus.com\/article\/660-visual-impairment-filters\"><span style=\"font-weight: 400;\">Visual Impairments Filter<\/span><\/a><span style=\"font-weight: 400;\">. Here\u2019s an email before any filters have been applied to it:<\/span><\/p>\n<div class=\"image-scroll mb-3\"><img decoding=\"async\" class=\"alignnone\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/06\/text-BG-color.png\" alt=\"\" \/><\/div>\n\n<p><span style=\"font-weight: 400;\">While this email looks \u201cfine\u201d to someone without color blindness, turn on a filter and you can see that some of the meaning is lost. That\u2019s why accessible email design is so important.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">It\u2019s pretty simple, with black text on a white background. Now, let\u2019s add a filter.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">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.<\/span><\/p>\n<div class=\"image-scroll mb-3\"><img decoding=\"async\" class=\"alignnone\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/06\/text-BG-colorblind.png\" alt=\"\" \/><\/div>\n\n<p><span style=\"font-weight: 400;\">By using a simple background and high contrast text, however, we\u2019ve ensured that all the text remains visible to readers with visual impairments. We\u2019ll talk more about accessible email design best practices in a moment.<\/span><\/p>\n<h2><span id=\"color-palette\" style=\"font-weight: 400;\">How to create an accessible color palette\u00a0<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">As a designer, Kinkead focuses on crafting just the right mix of design elements like color, shape, line, space, and typography. This balance is what makes an email design fit with a brand\u2019s overall identity and leads the audience toward the desired action for the email (ideally, conversions.)<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Each one of these elements needs to be accessible. With color blindness, the obvious place to start is with color. \u201c<\/span><span style=\"font-weight: 400;\">We\u2019re always working toward a color palette that works in grayscale, and avoids problematic color pairings for people with color blindness. It should be flexible enough to ensure that no one is excluded from understanding the content, whether it\u2019s UI elements, charts, or text,\u201d says Kinkead.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">What is an accessible color palette?<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">An accessible color palette is a series of colors used for your email designs that meets accessibility guidelines such as the <\/span><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/webaim.org\/resources\/contrastchecker\/\"><span style=\"font-weight: 400;\">WCAG standards<\/span><\/a><span style=\"font-weight: 400;\">. <\/span><span style=\"font-weight: 400;\">The minimum contrast ratio is 4.5:1 for normal text and 3:1 for large text like headlines.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u201cThis gives enough visual distinction between foreground and background colors so text remains readable for everyone, including people with low vision and color blindness,\u201d says Kinkead. \u201cContrast ratio is basically a measure of how different two colors are in brightness. The higher the ratio, the easier it is to read. If contrast is too low, text blends into the background, making it nearly impossible for some users to see.\u201d<\/span><\/p>\n<figure id=\"attachment_108751\" aria-describedby=\"caption-attachment-108751\" style=\"width: 1024px\" class=\"wp-caption alignnone\"><img decoding=\"async\" class=\"wp-image-108751 size-large\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2025\/02\/Colour-Palette-1024x278.png\" alt=\"Comparison of vibrant and monochromatic color pallets in green, blue, and purple.\" width=\"1024\" height=\"278\" srcset=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2025\/02\/Colour-Palette-1024x278.png 1024w, https:\/\/www.litmus.com\/wp-content\/uploads\/2025\/02\/Colour-Palette-300x82.png 300w, https:\/\/www.litmus.com\/wp-content\/uploads\/2025\/02\/Colour-Palette-768x209.png 768w, https:\/\/www.litmus.com\/wp-content\/uploads\/2025\/02\/Colour-Palette-1536x418.png 1536w, https:\/\/www.litmus.com\/wp-content\/uploads\/2025\/02\/Colour-Palette-1800x489.png 1800w, https:\/\/www.litmus.com\/wp-content\/uploads\/2025\/02\/Colour-Palette.png 1850w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption id=\"caption-attachment-108751\" class=\"wp-caption-text\">Examples of what an accessible color palette could look like. | Source: Venngage<\/figcaption><\/figure>\n<p><span style=\"font-weight: 400;\">This isn\u2019t about choosing a brand new color palette just for colorblind users. Rather, this exercise should be about taking a hard look at your existing color palette and reworking it to make sure that it is functional for all of your subscribers or website visitors.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u201cYou want it to be flexible,\u201d adds Kinkead. \u201c<\/span><span style=\"font-weight: 400;\">I like having neutral and accent colors that can work in different scenarios without causing accessibility issues.\u201d<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Your color choices are the most important aspect of designing emails for readers with color blindness. Work with your design team to translate the visual language of your brand into an accessible color palette.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Key considerations in building your color palette\u00a0<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">There isn\u2019t a specific set of colors that are \u201caccessible.\u201d Rather, it\u2019s about the combination of colors and how they interact with one another.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">As you build an accessible color palette, choose colors that make the text readable.<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>The more high contrast you can make your emails, the more accessible they\u2019ll be.<\/b><span style=\"font-weight: 400;\"> Contrast refers to the difference between color hues (varying shades of a color). No matter what your brand colors are, you\u2019ll want to stick with only a few colors in your email\u2014no more than two or three at the most. Not sure where to start? Pull out a color wheel and go for the colors opposite one another, like blue and orange. Or keep it simple with dark colors on a white background.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Avoid certain color combinations: <\/b><span style=\"font-weight: 400;\">Red\/green, blue\/yellow, green\/blue, and blue\/purple are all tricky combinations. It\u2019s not about which colors you use, but about the combination of colors that matters in your design\u2014and how important it is to the overall message of your email.<\/span><\/li>\n<\/ul>\n<p><b>Make your text easy to read against any background.<\/b><span style=\"font-weight: 400;\"> (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.<\/span><\/p>\n\n<div class=\"container pt-3 pb-5 px-1\">\n\t<div class=\"row blog-cta-green rounded-5 p-4\">\n\t\t<div class=\"mx-auto col-12\">\n\t\t\t<div class=\"row d-flex align-items-center\">\n\t\t\t<div class=\"col-12 text-center\">\n\t\t\t\t<p class=\"bold fs-4\">Make accessibility part of your workflow<\/p>\n\t\t\t\t<p>Litmus Accessibility Testing Checklist helps you identify and fix issues to ensure every subscriber has a great email experience. <\/p>\n\t\t\t\t<button class=\"button-blue arrow\"><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/email-testing\" class=\"text-white text-decoration-none\">Make Your Emails Accessible<\/a><\/button>\n\t\t\t<\/div><!--col-6-->\n\t\t\t<div class=\"d-none\">\n\t\t\t\t<img decoding=\"async\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2024\/07\/blog-cta-email-guardian-07292024.svg\" width=\"210\" height=\"180\" alt=\"\">\n\t\t\t<\/div><!--col-6-->\n\t\t\t<\/div> <!--row-->\n\t\t<\/div><!--col-12-->\n\t<\/div><!--row-->\n<\/div><!--container-->\n\t\n\t\n\t\n\t\n\n<h2><span id=\"designing-emails\" style=\"font-weight: 400;\">5 best practices for designing emails for subscribers with color blindness\u00a0<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">When designing for readers with color blindness, it\u2019s natural to start with color. But it\u2019s not the only aspect of your design that matters for accessibility. We\u2019ll take a look at how other elements of your email design help convey your message more clearly or make it more confusing for those with color blindness. Here\u2019s what you need to keep in mind:<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">1. Think about your email designs holistically<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Are you using every design element effectively in your emails?\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">With something as powerful as color, it\u2019s important to stop and think through the use cases for your design. It\u2019s not just about the aesthetic\u2014though of course that\u2019s important\u2014but matching the right color combinations to where they\u2019ll be in the email. Also consider whether or not there\u2019s enough variety to effectively differentiate your data points.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Says Kinkead, \u201cIn late 2024, we started using fewer colors overall to create a more cohesive, intentional design system. This actually helps with accessibility because it forces us to be more thoughtful about contrast, hierarchy, and how we use color meaningfully rather than relying on an overly complex palette that might not work for everyone.\u201d<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">2. Don\u2019t solely rely on color to convey information<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">The next big thing we can do to design for color blindness is to use more than color to communicate ideas. This is important for colorblind users, but it\u2019s also relevant for <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/special-characters-emojis-line-breaks-more-tricks-for-optimizing-your-emails-for-screen-readers\"><span style=\"font-weight: 400;\">screen reader accessibility<\/span><\/a><span style=\"font-weight: 400;\">, which <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/how-does-your-email-sound\"><span style=\"font-weight: 400;\">reads emails aloud<\/span><\/a><span style=\"font-weight: 400;\"> for subscribers with visual impairments. Every element of your email design can convey information\u2014now it\u2019s time to use that real estate. This requires a little bit of thinking outside the box, but will be a powerful tool in your design arsenal.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Incorporate icons or shapes into your design<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Adding icons or shapes into your email design can add a backup layer of communication for your message without relying on color. <\/span><\/p>\n<figure class=\"row p-5 my-5 background-light-gray rounded-5\">\n<blockquote class=\"blockquote\"><p>\u201cThe possibilities are endless when icons and shapes in an email. They are a great way to get the message across without having to rely on the use of colors or text\u201d<\/blockquote><figcaption class=\"blockquote-footer\">Martyn Lee, Marketing and Email Design Specialist at Litmus<\/figcaption><\/figure>\n<p><span style=\"font-weight: 400;\">Here\u2019s an example of what this could look like using icons or shapes in addition to color to communicate a message. First, let\u2019s take a look at this email with different approaches to product stock statuses:<\/span><\/p>\n<div class=\"image-scroll mb-3\"><img decoding=\"async\" class=\"alignnone\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/06\/builder-original.png\" alt=\"\" \/><\/div>\n\n<p><i><span style=\"font-weight: 400;\">With accessible design, you can\u2019t rely on color alone to get your meaning across.<\/span><\/i><\/p>\n<p><span style=\"font-weight: 400;\">Red, yellow, and green indicate when something is in stock or not, using the traffic light system.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Now, here\u2019s our same email as above, this time with the tritanopia filter applied. Looks a little different, right?<\/span><\/p>\n<div class=\"image-scroll mb-3\"><img decoding=\"async\" class=\"alignnone\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/06\/builder-tritanopia.png\" alt=\"\" \/><\/div>\n\n<p><span style=\"font-weight: 400;\">We can see three iterations of a message indicating a product\u2019s stock status\u2014but all three aren\u2019t 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.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">This is a great example of how to use shapes to communicate, rather than\u2014or in addition to\u2014color.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">3. Organize your email in a clear and logical order<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">When a subscriber opens your email, they want to get the message as quickly as possible. Using a simple, clear layout makes this possible, whether you\u2019re sending a newsletter that\u2019s mostly text or a sales-driven campaign that\u2019s showcasing new product images. Most emails follow the same pattern: a header that introduces your email campaign, body copy that adds more detail, and then a call-to-action.<\/span><\/p>\n<div class=\"image-scroll mb-3\"><img decoding=\"async\" class=\"alignnone\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2024\/11\/1l.png\" alt=\"\" \/><\/div>\n\n<p>Source: <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/reallygoodemails.com\/emails\/introducing-the-limited-edition-demande-spciale-v\">Really Good Emails<\/a><\/p>\n<p><span style=\"font-weight: 400;\">This email is a great example of a one-column design. A clear image, high-contrast text, and a CTA button make it easy to understand.<\/span><\/p>\n<div class=\"image-scroll mb-3\"><img decoding=\"async\" class=\"alignnone\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2024\/11\/2l-scaled.jpg\" alt=\"\" \/><\/div>\n\n<p>Source: <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/reallygoodemails.com\/emails\/biscoff-is-back\">Really Good Emails<\/a><\/p>\n<p><span style=\"font-weight: 400;\">You can also choose a classic S-curve design like this email from Krispy Kreme. This keeps the eye moving from side to side, pulling the subscriber down to the CTA.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">4. Think of your text as visual, too<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">We often think of copy as separate from design, but the way you arrange the text in your email is its own design element, and one that you can optimize for accessibility, too. Make sure you&#8217;re <a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/email-accessibility-5-tips-for-writing-email-copy-for-everyone\" target=\"_blank\">writing with accessible language<\/a> by using large text, <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/email-typography-fonts\"><span style=\"font-weight: 400;\">easily readable fonts<\/span><\/a><span style=\"font-weight: 400;\">, and plenty of negative space goes a long way for readability.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">At Litmus, we use at least 18px for body copy, and the smallest text in our emails (like footer copy or captions) is 14px. We also always left-align our text so it\u2019s easier to read.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Actually use text in your emails<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">One of our biggest pet peeves in email design is the trend of image-only emails. Not only are they not accessible for visually impaired users, they often break in funky ways across different email clients and devices, making that sleek image your graphic designer worked hard on disappear. Your emails must be more than one big collection of images so anyone (color blind or not) can understand what you\u2019re trying to say.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Add a plain-text option for colorblind readers<\/span><\/h4>\n<a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/email-accessibility-5-tips-for-writing-email-copy-for-everyone\"><span style=\"font-weight: 400;\">Writing for accessibility<\/span><\/a><span style=\"font-weight: 400;\"> means using clear, thoughtful language, but it\u2019s also about engineering the right experience for your subscribers. Adding a<\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/best-practices-for-plain-text-emails-a-look-at-why-theyre-important\"><span style=\"font-weight: 400;\"> plain-text version<\/span><\/a><span style=\"font-weight: 400;\"> of your email is another way to add more text. Most ESPs have the option to add or edit a plain text version of your HTML before you send. Checking this box gives your color blind readers one more way to be able to engage with your campaigns without needing to figure out why you\u2019re sending an image awash in gray.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Don\u2019t forget your alt text<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Alt text is one of those email elements that is so easy to add for accessibility but often gets overlooked. And it\u2019s not just for color blindness. More users are blocking images or having a smart speaker read their emails outloads, so it\u2019s a useful addition to your email for everyone. Good alt text clearly describes an image so that, if a reader can\u2019t see it (for whatever reason) ,they still understand what you were trying to convey.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">5. Use Visual Impairment Filters<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">The best way to ensure your emails are accessible to those with color blindness is to use a tool that checks how your email looks to people with color blindness. You could also review the <\/span><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/webaim.org\/resources\/contrastchecker\/\"><span style=\"font-weight: 400;\">WCAG standards<\/span><\/a><span style=\"font-weight: 400;\">, use color contrast plugins in design tools like Figma, or use other third party tools for each email campaign. But these can add time to your design process and your overall workflow.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">That\u2019s why we advocate for integrating accessibility tools into the tools you already have and already use (<\/span><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/help.litmus.com\/article\/253-accessibility-testing-in-litmus\"><span style=\"font-weight: 400;\">pssst\u2026like Litmus<\/span><\/a><span style=\"font-weight: 400;\">!) This is both simpler, and a better way to think about designing for accessibility, whether you\u2019re thinking about color or other accessibility features.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Since there are so many different variations of color blindness, it\u2019s important to test your emails against all of them. Each email can display a lot of different ways to a lot of different eyes. I mean\u2026<\/span><\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-72542 size-large\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/06\/builder-1024x320.png\" alt=\"\" width=\"1024\" height=\"320\" srcset=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/06\/builder-1024x320.png 1024w, https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/06\/builder-300x94.png 300w, https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/06\/builder-768x240.png 768w, https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/06\/builder-700x219.png 700w, https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/06\/builder.png 1441w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Plus, since different email clients can mess with color contrasts, you\u2019ll want to not only test with visual filters, but also test for different ESPs, as well. You can feel the headache coming on, right?<\/span><\/p>\n<p><span style=\"font-weight: 400;\">For Litmus users, we offer the <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/new-dark-mode-visual-impairment\/\"><span style=\"font-weight: 400;\">Visual Impairment Filters<\/span><\/a><span style=\"font-weight: 400;\"> feature across <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/email-builder\"><span style=\"font-weight: 400;\">Litmus Builder,<\/span><\/a><span style=\"font-weight: 400;\"> our <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/email-testing\"><span style=\"font-weight: 400;\">Previews and QA checklist<\/span><\/a><span style=\"font-weight: 400;\">, and <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/collaboration\"><span style=\"font-weight: 400;\">Proof<\/span><\/a><span style=\"font-weight: 400;\">. This feature gives customers the opportunity to view their email as their recipients will with color blindness related visual impairments.<\/span><\/p>\n<p><img decoding=\"async\" class=\"size-medium aligncenter\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/manual\/03242023-1.gif\" width=\"800\" height=\"450\" \/><\/p>\n<p>By utilizing this feature, you can easily check to see that text is visible against backgrounds and check your color use across ESPs. With Litmus, it\u2019s easy to design emails that can be viewed in a multitude of ways with a wide range of color detection capabilities.<\/p>\n\n<div class=\"container pt-3 pb-5\">\n\t<div class=\"row blog-cta-blue rounded-5 p-4\">\n\t\t<div class=\"col-12 mx-auto\">\n\t\t\t<div class=\"row d-flex align-items-center\">\n\t\t\t<div class=\"col-lg-6 col-12\">\n\t\t\t\t<p class=\"bold fs-4\">Learn from the best<\/p>\n\t\t\t\t<p>Your favorite brands use Litmus to deliver flawless email experiences. Discover the ROI your emails can achieve with Litmus.<\/p>\n\t\t\t\t<button class=\"button-blue arrow\"><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/customers\" class=\"text-white text-decoration-none\">Explore Case Studies<\/a><\/button>\n\t\t\t<\/div><!--col-6-->\n\t\t\t<div class=\"col-6 d-none d-lg-block\">\n\t\t\t\t<img decoding=\"async\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2024\/12\/blog-cta-12172024.svg\" width=\"208\" height=\"171\" alt=\"\">\n\t\t\t<\/div><!--col-6-->\n\t\t\t<\/div> <!--row-->\n\t\t<\/div><!--col-12-->\n\t<\/div><!--row-->\n<\/div><!--container-->\n\t\n\t\t\n\t\n\t\n\t\n\n<h2><span id=\"tips\" style=\"font-weight: 400;\">Industry-specific tips to ensure emails are colorblind accessible\u00a0<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Generally, Kinkead advises sticking to the same general principles above. \u201cWhether it\u2019s financial services, healthcare, e-commerce, or SaaS, the key is to pair color with additional visual cues like icons, patterns, or text labels so the meaning is still clear for users with color blindness or low vision,\u201d she says.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">What does accessibility look like for your industry? Here are a few examples:<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Go beyond red and green with financial services reports<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">In emails containing financial summaries, avoid relying solely on red and green to show gains or losses. Instead, include symbols, like \u2191 for growth, \u2193 for decline, and text explanations next to any charts you include.<\/span><\/p>\n<div class=\"image-scroll mb-3\"><img decoding=\"async\" class=\"alignnone\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2025\/02\/Intuit-Email-Example.png\" alt=\"\" \/><\/div>\n\n<p><span style=\"font-weight: 400;\">This email from TurboTax is a great example of high contrast and bright colors, using orange, blue, and black in a Halloween-themed email campaign.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Make sure you get important messages across with healthcare emails<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Similarly, if you\u2019re sending emails that include charts, data, or any other important information like appointment day\/time, make sure that you\u2019re not relying solely on color to get your point across.<\/span><\/p>\n<div class=\"image-scroll mb-3\"><img decoding=\"async\" class=\"alignnone\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2025\/02\/Mynlift-Email-Example-3.png\" alt=\"\" \/><\/div>\n\n<p><span style=\"font-weight: 400;\">If it\u2019s an email about test results or appointments, keep it super simple so that everyone can get the message. Even better, use a plain text version that includes all of the text on a simple background, and always use alt text.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Include alt text with image-heavy e-commerce emails<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Because e-commerce is so visual, many brands often skip the email coding and send all-image emails. Don\u2019t fall into this trap! If you include an image of your product, use descriptive alt text that helps screen readers and those with color blindness understand what they\u2019re buying.<\/span><\/p>\n<div class=\"image-scroll mb-3\"><img decoding=\"async\" class=\"alignnone\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2017\/10\/Ace-Hardware-email-with-images-off.png.webp\" alt=\"\" \/><\/div>\n\n<p><i><span style=\"font-weight: 400;\">This is a great use of alt text to tell a story instead of color.<\/span><\/i><\/p>\n<p><span style=\"font-weight: 400;\">With e-commerce, you want to make sure someone can actually buy your products. Without alt text here in this images-off email from Ace Hardware, someone with low vision or color blindness would have no idea what the email is about. You can\u2019t get those dollars if someone can\u2019t interact with your email in the first place.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">B2B SaaS emails don\u2019t have to be boring to be accessible<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">If your brand uses a more animated style, evaluate your color palette to make sure you\u2019re using high-contrast color combinations between your <a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/background-colors-html-email\" target=\"_blank\">email background color<\/a>, your headlines, and your body copy.<\/span><\/p>\n<p><script type=\"text\/javascript\" src=\"https:\/\/litmus.com\/builder\/embed\/v1.js\" class=\"builder-embed\" data-token=\"268e46c\"><\/script><\/p>\n<p><span style=\"font-weight: 400;\">We\u2019re still obsessed with this April Fool\u2019s campaign we sent in honor of the 50th anniversary of email. We wanted to bring back all of our favorite \u201890s trends\u2014I mean, just look at that Comic Sans typography\u2014but with a modern approach to accessibility. <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/how-to-make-the-worlds-worst-or-best-email-accessible\"><span style=\"font-weight: 400;\">You can see the full how-to here.<\/span><\/a>\n<h2><span style=\"font-weight: 400;\">Create more accessible emails for subscribers today\u00a0<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Designing for accessibility isn\u2019t about checking a box. It\u2019s about making your emails easier to read and understand for everyone, whether they have a visual impairment or not.\u00a0<\/span><span style=\"font-weight: 400;\">At Litmus, we believe that accessible email design is an important part of an email marketers\u2019 job\u2014because what makes an email better for your audience with visual impairment often makes the email better for everyone. With Accessibility Testing in Litmus Checklist, you can instantly see through your <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/email-testing\"><span style=\"font-weight: 400;\">email testing<\/span><\/a><span style=\"font-weight: 400;\"> or our <a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/accessible-email-made-easy-introducing-accessibility-checks-in-litmus\" target=\"_blank\">email accessibility checker<\/a> whether your email is accessible for all your subscribers and get actionable advice on how you can make your emails more inclusive. <\/span><\/p>\n<h2><span id=\"faqs\" style=\"font-weight: 400;\">Common colorblind accessibility FAQs\u00a0<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Still have questions? Take a look at our colorblind accessibility FAQs:<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">What are the colors to avoid for color blindness?<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">There are no specific colors to avoid for color blindness. Instead, make sure the combinations of colors you choose have enough contrast between them that they can be seen by colorblind users. Common combinations to avoid for color blindness include red\/green and blue\/yellow.\u00a0<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Can color blindness be considered a disability?<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Yes, color blindness is considered a disability under the <\/span><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/adasitecompliance.com\/color-blind-website-accessibility\/\"><span style=\"font-weight: 400;\">Americans with Disabilities Act (ADA)<\/span><\/a><span style=\"font-weight: 400;\"> in the United States, which means that legally, if you send to subscribers located in the United States, you must follow<\/span><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/www.w3.org\/TR\/WCAG\/\"><span style=\"font-weight: 400;\"> Web Content Accessibility Guidelines (WCAG)<\/span><\/a><span style=\"font-weight: 400;\"> to remain compliant. Similar accessibility laws exist in the E.U. and Canada.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">What is the minimum contrast ratio for text and background colors?<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">According to <\/span><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/webaim.org\/resources\/contrastchecker\/\"><span style=\"font-weight: 400;\">WCAG standards<\/span><\/a><span style=\"font-weight: 400;\">, the minimum contrast ratio for text and background colors is 4.5:1 for normal text and 3:1 for large text like headlines.\u00a0<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">What is color blind vs color deficient?\u00a0<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Color vision deficiency, otherwise known as color blindness, is a condition where an individual perceives colors differently. There are three types of color blindness: Red\/green, blue\/yellow, and achromatopsia, when a person can\u2019t perceive color at all.<\/span><\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n<div id=\"post-cta-buttonblock_66f237ff4b7c2e639ed94341d9dfb85d\" class=\"block-post-cta-button mt-5\">\n  <div class=\"container px-0\">\n    <div class=\"row\">\n      <div class=\"blog-post-cta-button-wrapper col-12 col-lg-10 mx-auto p-4 d-block d-lg-flex align-items-lg-center align-items-start\">\n\t\t  \t\t  \t\t  \t\t  \t\t  \t\t  \t\t  \t\t \t\t\t  \t\t  \t\t  <div class=\"blog-post-cta-button-icon col-2 float-start mx-auto float-lg-start float-none background-white d-flex flex-column justify-content-center align-items-center text-center\">\n\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2022\/07\/blog-cta-buttons-design.svg\" alt=\"illustration of a mountain and sun with a checkmark\" width=\"59\" height=\"55\"\/>\n\t\t\t\t\t  \t\t  <\/div><!--blog-post-cta-button-icon-->\n\t\t\t\t\t\t\t\t  \t\t  <div class=\"col-12 col-lg-9 ps-lg-4 ps-0 text-center text-lg-start mt-3 mt-lg-0\">\t\t\t  \t\t\t  <h2 class=\"h-sm\"><strong>Start making a difference today<\/strong><\/h2>\n\t\t\t   \n\t\t\t  \t\t\t\t\t<p>Maximize your email\u2019s impact with Litmus to ensure accessibility and inclusivity for all subscribers \u2014 no matter their abilities.<\/p>\n\t\t\t\t\t \n\t\t\t  \t\t  <\/div><!--col-12 col-lg-9 ps-lg-4 ps-0 text-center text-lg-start mt-3 mt-lg-0-->\t\t\t  \t\t  <div class=\"text-center text-lg-end col-12 col-lg-1 ms-lg-2 ms-0\">\n\t\t\t\t\t\t\t\t\t\t<a class=\"btn btn-primary\" rel=\"noopener\" href=\"https:\/\/www.litmus.com\/email-testing\">\n\t\t\t\t\t\tCreate inclusive emails\t\t\t\t\t\t<\/a>\n\t\t\t  \t\t  <\/div><!--text-center text-lg-end col-12 col-lg-1 ms-lg-2 ms-0-->\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t        <\/div><!--blog-post-cta-button-wrapper-->\n    <\/div><!--row-->\n  <\/div><!--container-->\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Learn how to design colorblind-friendly emails with accessible color palettes, actionable tips, and tools to create inclusive email experiences.<\/p>\n","protected":false},"author":54,"featured_media":69955,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"tags":[478,520,10351],"blog_category":[10303],"class_list":["post-72513","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-design","tag-email-accessibility","tag-email-design","blog_category-email-design"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.5 (Yoast SEO v27.7) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>How to Design for Colorblindness: Tips For Accessibility - Litmus<\/title>\n<meta name=\"description\" content=\"Today, we\u2019ll look at one very specific aspect of accessibility in email design: how to design for colorblindness. Ready? Let\u2019s dive in.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.litmus.com\/blog\/how-to-design-for-colorblindness\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"The Ultimate Guide to Colorblindness Accessibility in Email\" \/>\n<meta property=\"og:description\" content=\"Learn how to design colorblind-friendly emails with accessible color palettes, actionable tips, and tools to create inclusive email experiences.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.litmus.com\/blog\/how-to-design-for-colorblindness\" \/>\n<meta property=\"og:site_name\" content=\"Litmus\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/litmusapp\" \/>\n<meta property=\"article:published_time\" content=\"2025-02-26T16:18:20+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-09-03T18:33:55+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/05\/Visual-Impairment-Header2.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1380\" \/>\n\t<meta property=\"og:image:height\" content=\"725\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@litmusapp\" \/>\n<meta name=\"twitter:site\" content=\"@litmusapp\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Design for Colorblindness: Tips For Accessibility - Litmus","description":"Today, we\u2019ll look at one very specific aspect of accessibility in email design: how to design for colorblindness. Ready? Let\u2019s dive in.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.litmus.com\/blog\/how-to-design-for-colorblindness","og_locale":"en_US","og_type":"article","og_title":"The Ultimate Guide to Colorblindness Accessibility in Email","og_description":"Learn how to design colorblind-friendly emails with accessible color palettes, actionable tips, and tools to create inclusive email experiences.","og_url":"https:\/\/www.litmus.com\/blog\/how-to-design-for-colorblindness","og_site_name":"Litmus","article_publisher":"https:\/\/www.facebook.com\/litmusapp","article_published_time":"2025-02-26T16:18:20+00:00","article_modified_time":"2025-09-03T18:33:55+00:00","og_image":[{"width":1380,"height":725,"url":"https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/05\/Visual-Impairment-Header2.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_creator":"@litmusapp","twitter_site":"@litmusapp","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.litmus.com\/blog\/how-to-design-for-colorblindness#article","isPartOf":{"@id":"https:\/\/www.litmus.com\/blog\/how-to-design-for-colorblindness"},"author":{"name":"","@id":""},"headline":"The Ultimate Guide to Colorblindness Accessibility in Email","datePublished":"2025-02-26T16:18:20+00:00","dateModified":"2025-09-03T18:33:55+00:00","mainEntityOfPage":{"@id":"https:\/\/www.litmus.com\/blog\/how-to-design-for-colorblindness"},"wordCount":8,"publisher":{"@id":"https:\/\/www.litmus.com\/#organization"},"image":{"@id":"https:\/\/www.litmus.com\/blog\/how-to-design-for-colorblindness#primaryimage"},"thumbnailUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/05\/Visual-Impairment-Header2.png","keywords":["Design","Email Accessibility","Email Design"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.litmus.com\/blog\/how-to-design-for-colorblindness","url":"https:\/\/www.litmus.com\/blog\/how-to-design-for-colorblindness","name":"How to Design for Colorblindness: Tips For Accessibility - Litmus","isPartOf":{"@id":"https:\/\/www.litmus.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.litmus.com\/blog\/how-to-design-for-colorblindness#primaryimage"},"image":{"@id":"https:\/\/www.litmus.com\/blog\/how-to-design-for-colorblindness#primaryimage"},"thumbnailUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/05\/Visual-Impairment-Header2.png","datePublished":"2025-02-26T16:18:20+00:00","dateModified":"2025-09-03T18:33:55+00:00","description":"Today, we\u2019ll look at one very specific aspect of accessibility in email design: how to design for colorblindness. Ready? Let\u2019s dive in.","breadcrumb":{"@id":"https:\/\/www.litmus.com\/blog\/how-to-design-for-colorblindness#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.litmus.com\/blog\/how-to-design-for-colorblindness"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.litmus.com\/blog\/how-to-design-for-colorblindness#primaryimage","url":"https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/05\/Visual-Impairment-Header2.png","contentUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2023\/05\/Visual-Impairment-Header2.png","width":1380,"height":725,"caption":"how to design for colorblindness header litmus"},{"@type":"BreadcrumbList","@id":"https:\/\/www.litmus.com\/blog\/how-to-design-for-colorblindness#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.litmus.com\/"},{"@type":"ListItem","position":2,"name":"The Ultimate Guide to Colorblindness Accessibility in Email"}]},{"@type":"WebSite","@id":"https:\/\/www.litmus.com\/#website","url":"https:\/\/www.litmus.com\/","name":"Litmus","description":"Are you getting the most out of your email marketing?","publisher":{"@id":"https:\/\/www.litmus.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.litmus.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.litmus.com\/#organization","name":"Litmus Software","url":"https:\/\/www.litmus.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.litmus.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.litmus.com\/wp-content\/uploads\/2025\/04\/featured-image.png","contentUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2025\/04\/featured-image.png","width":600,"height":314,"caption":"Litmus Software"},"image":{"@id":"https:\/\/www.litmus.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/litmusapp","https:\/\/x.com\/litmusapp"]},{"@type":"Person","@id":""}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts\/72513","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/users\/54"}],"replies":[{"embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/comments?post=72513"}],"version-history":[{"count":21,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts\/72513\/revisions"}],"predecessor-version":[{"id":119752,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts\/72513\/revisions\/119752"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/media\/69955"}],"wp:attachment":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/media?parent=72513"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/tags?post=72513"},{"taxonomy":"blog_category","embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/blog_category?post=72513"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}