{"id":3634,"date":"2025-02-20T09:20:05","date_gmt":"2025-02-20T14:20:05","guid":{"rendered":"https:\/\/www.litmus.com\/blog\/email-accessibility-for-designers-8-best-practices-you-should-follow\/"},"modified":"2025-06-26T16:36:33","modified_gmt":"2025-06-26T20:36:33","slug":"email-accessibility-for-designers-8-best-practices-you-should-follow","status":"publish","type":"post","link":"https:\/\/www.litmus.com\/blog\/email-accessibility-for-designers-8-best-practices-you-should-follow","title":{"rendered":"The Guide to Accessible Design in Email Marketing"},"content":{"rendered":"\n\n\t<div id=\"simple-text-block-block_27c0b86fce05200bcab92508bfa1a31d\" 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<p><span style=\"font-weight: 400;\"><strong><br \/>\nKey takeaways<\/strong>:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">The goal of <a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/email-accessibility-for-designers-8-best-practices-you-should-follow\" target=\"_blank\">accessible design<\/a> is to help everyone enjoy your content.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">There are many ways to make an email accessible including left-justifying your text, using a minimum font size, and more.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">It\u2019s better to take small steps towards accessibility than none at all.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Email design is more than pretty decoration and interesting colors\u2014it\u2019s how people experience and interact with information.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">While accessibility in design has always been a good practice, it&#8217;ll also be the law when the European Accessibility Act (EAA) goes into effect in June 2025. When we polled the email community about how ready they were for the change, most didn\u2019t know what it was. We can fix that, though.<\/span><\/p>\n<img decoding=\"async\" class=\"alignnone wp-image-108780 size-large\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2025\/02\/LI-poll-1024x812.png\" alt=\"Litmus poll from LinkedIn asking if readers feel confident about being prepared for the EAA to take effect. 8 percent are confident, 2 percent are somewhat prepared, 19 percent are still figuring it out, and 71 percent asked what it is.\" width=\"1024\" height=\"812\" srcset=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2025\/02\/LI-poll-1024x812.png 1024w, https:\/\/www.litmus.com\/wp-content\/uploads\/2025\/02\/LI-poll-300x238.png 300w, https:\/\/www.litmus.com\/wp-content\/uploads\/2025\/02\/LI-poll-768x609.png 768w, https:\/\/www.litmus.com\/wp-content\/uploads\/2025\/02\/LI-poll.png 1178w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/>\n<p><span style=\"font-weight: 400;\">Whether you\u2019re new to accessible email design or want to get set before EAA, we\u2019ve got you covered. Let\u2019s walk through what it takes to make an accessible email design.\u00a0<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Table of contents<\/span><\/h3>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a rel=\"noopener\" href=\"#accessible-design\"><span style=\"font-weight: 400;\">What is accessible design?<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a rel=\"noopener\" href=\"#design-principals\"><span style=\"font-weight: 400;\">Accessible design principals for email designers<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a rel=\"noopener\" href=\"#accessibility-mistakes\"><span style=\"font-weight: 400;\">Common accessibility mistakes designers will make<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a rel=\"noopener\" href=\"#email-examples\"><span style=\"font-weight: 400;\">Accessible email examples for designers<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a rel=\"noopener\" href=\"#toolkit\"><span style=\"font-weight: 400;\">The designers toolkit for email accessibility<\/span><\/a><\/li>\n<\/ul>\n<h2><b>What is accessible design?<\/b><\/h2>\n<p><span id=\"accessible-design\" style=\"font-weight: 400;\">Accessible design is a design process to create content and experiences that everyone can easily use and enjoy, regardless of their abilities. Subscribers experience your emails differently because of disabilities or situations like:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Permanent conditions like blindness.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Temporary injuries like concussions or a broken wrist.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Situational challenges like navigating a phone with an off-hand while the other is full.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">While considering people with disabilities is simply the kind thing to do, there are also serious business benefits to accessibility in design.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">More than<\/span><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/www.cdc.gov\/media\/releases\/2024\/s0716-Adult-disability.html\"> <span style=\"font-weight: 400;\">one in four American adults<\/span><\/a><span style=\"font-weight: 400;\"> have some type of disability, and they represent<\/span><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/www.air.org\/resource\/report\/hidden-market-purchasing-power-working-age-adults-disabilities#:~:text=The%20total%20after%2Dtax%20disposable,to%20access%20the%20disability%20market.\"> <span style=\"font-weight: 400;\">$21 billion<\/span><\/a><span style=\"font-weight: 400;\"> in discretionary income. If you ignore people with disabilities in your design process, you alienate potential customers, cut potential revenue, and even open your organization up to lawsuits for not complying with legal requirements.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">In a<\/span><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/www.youtube.com\/watch?v=8uww7pPV2yQ\"> <span style=\"font-weight: 400;\">Litmus Live 2024 discussion<\/span><\/a><span style=\"font-weight: 400;\"> on accessible emails, Sarah Gallardo, a Lead Email Developer and Email Accessibility Specialist at Oracle Digital Experience Agency, shared, \u201cIt\u2019s not enough to come up with a good design\u2014lots of designers can do that. Email is a communication platform above everything else, so it\u2019s kind of a big deal when you\u2019re not communicating to 27% of your recipients.\u201d<\/span><\/p>\n<p><span style=\"font-weight: 400;\">While accessible design is the phrase you&#8217;ll hear most often, there are a few other terms to be aware of.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">1. Accessible design\u00a0<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Accessible design considers the usability for people with specific disabilities\u2014like visual, cognitive, or motor impairments\u2014and the assistive technology they use to consume information.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">For example, people with visual impairments may rely on screen readers that<\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/how-does-your-email-sound\"> <span style=\"font-weight: 400;\">read emails aloud<\/span><\/a><span style=\"font-weight: 400;\">, meaning an image-only email would be silent. Subscribers need elements clearly organized and labeled because they navigate with a keyboard instead of a mouse.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">2. Inclusive design\u00a0<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">There is a difference between<\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/accessibility-vs-inclusion-what-it-takes-to-create-more-inclusive-email-marketing-experiences\"> <span style=\"font-weight: 400;\">accessibility vs. inclusion<\/span><\/a><span style=\"font-weight: 400;\"> in email design.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Inclusive design embraces the full range of human diversity including ability, language, culture, gender, age, and other forms of difference.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Examples of inclusive design include using <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/diversity-representation-in-email-design-inclusive-imagery\"><span style=\"font-weight: 400;\">inclusive imagery<\/span><\/a><span style=\"font-weight: 400;\">, writing in plain language, <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> and using translated and localized content. You could also include people with varying levels of technology access by reducing design<\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/guide-to-email-file-size-and-load-times\"> <span style=\"font-weight: 400;\">load times<\/span><\/a><span style=\"font-weight: 400;\">.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">3. Universal design\u00a0<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Universal design creates content that works for every person and platform. For example, email designers and developers can use responsive layouts to adapt to different screens and use a single email design that\u2019s accessible for everyone.\u00a0<\/span><\/p>\n<h2><span id=\"design-principals\" style=\"font-weight: 400;\">Accessible design principles for email designers<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Accessibility design best practices all have the same goal\u2014to help <\/span><i><span style=\"font-weight: 400;\">everyone<\/span><\/i><span style=\"font-weight: 400;\"> enjoy your email. While there are some specific assistive tools or conditions to consider, you\u2019ll see that, generally, accessible design is just good design. You may even make accessible design choices without even realizing it.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Jump to tips for:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a rel=\"noopener\" href=\"#live-text\"><span style=\"font-weight: 400;\">Live text<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a rel=\"noopener\" href=\"#hierarchy\"><span style=\"font-weight: 400;\">Text hierarchy<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a rel=\"noopener\" href=\"#justification\"><span style=\"font-weight: 400;\">Left-justification<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a rel=\"noopener\" href=\"#font-size\"><span style=\"font-weight: 400;\">Font size<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a rel=\"noopener\" href=\"#line-spacing\"><span style=\"font-weight: 400;\">Line spacing<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a rel=\"noopener\" href=\"#contrast\"><span style=\"font-weight: 400;\">Color contrast<\/span><\/a><span style=\"font-weight: 400;\">\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a rel=\"noopener\" href=\"#images\"><span style=\"font-weight: 400;\">Background images<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a rel=\"noopener\" href=\"#button-design\"><span style=\"font-weight: 400;\">Button design<\/span><\/a><span style=\"font-weight: 400;\">\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a rel=\"noopener\" href=\"#links\"><span style=\"font-weight: 400;\">Links<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a rel=\"noopener\" href=\"#layout\"><span style=\"font-weight: 400;\">Layout<\/span><\/a><\/li>\n<\/ul>\n<h3><span style=\"font-weight: 400;\">Use real text instead of all-image emails\u00a0<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">The temptation to use<\/span><a rel=\"noopener\" href=\"https:\/\/litmus.com\/blog\/why-you-shouldnt-send-image-only-emails\"> <span style=\"font-weight: 400;\">all-image emails<\/span><\/a><span style=\"font-weight: 400;\"> is strong when you want a quick way to customize the look and feel of your email to your exact standards. We ask you to take your cursor off the Photoshop layer and back away slowly, though.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Real text in HTML is the accessible design winner for a handful of reasons.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Assistive technologies like screen readers can only access the underlying code of an email, not the text in an image. That means that text saved within an image is silent to anyone using a reader. People who use screen magnifiers and custom zoom settings might struggle with blurry photos, too.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Plus, many email clients turn off images for security reasons. When this happens, nobody can read your email.<\/span><\/p>\n<p><span id=\"live-text\" style=\"font-weight: 400;\">Live text is also searchable, meaning subscribers can find the newsletter or promo code they remember you sending them last week. <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/searchable-email\"><span style=\"font-weight: 400;\">SEO for email<\/span><\/a><span style=\"font-weight: 400;\"> is a thing!<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Finally, using real text instead of locking it away in an image lets you personalize messages with<\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/best-dynamic-email-content-examples\"> <span style=\"font-weight: 400;\">dynamic content<\/span><\/a><span style=\"font-weight: 400;\">.<\/span><\/p>\n<figure id=\"post-24052 media-24052\" class=\"alignnone\"><img decoding=\"async\" class=\"\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/04\/3_image3.png\" alt=\"\" \/><\/figure>\n<h3><span id=\"hierarchy\" style=\"font-weight: 400;\">Create an organized and scannable hierarchy<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Both cognitive disabilities and situational disabilities (like being in a hurry or being distracted) make it hard for people to read and understand long, uniform blocks of text. Hierarchy\u2014or creating visual differences that reinforce importance\u2014helps those users quickly consume content in email.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">By using larger text size, <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/how-to-design-for-colorblindness\"><span style=\"font-weight: 400;\">accessible color<\/span><\/a><span style=\"font-weight: 400;\">, and strategic placement, you can create emails that are easily scanned and read. Try creating bold, high-contrast headlines above smaller portions of copy, and allow for enough whitespace between sections to avoid content bleeding together.<\/span><\/p>\n<figure id=\"post-24069 media-24069\" class=\"alignnone\"><img decoding=\"async\" class=\"\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/04\/image-2019-08-19-at-2.16.34-pm.png\" alt=\"\" \/><\/figure>\n<figure id=\"post-24062 media-24062\" class=\"alignnone\"><\/figure>\n<figure id=\"post-24060 media-24060\" class=\"alignnone\"><\/figure>\n<figure id=\"post-24050 media-24050\" class=\"alignnone\"><\/figure>\n<figure id=\"post-24050 media-24050\" class=\"alignnone\"><\/figure>\n<figure id=\"post-24050 media-24050\" class=\"alignnone\"><\/figure>\n<h3><span id=\"justification\" style=\"font-weight: 400;\">Left-justify your email copy\u00a0<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Using both real text and hierarchy can aid readability, but the alignment of your copy also affects the readability of your emails.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Reading relies on visual cues to make sense of where we are on a page or screen. One of the most important cues is the start of a new line, which acts as an anchor for our eyes when jumping around an email. If you center the text, eyes and minds have to find where a new line starts, making it taxing and confusing.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Justified text increases spaces between words and characters to create a uniform block of text. While the symmetry is nice on first glance, and you do have a consistent line start, it presents other accessibility issues. If a person uses a screen magnifier or zooms in for readability, they\u2019ll have to make sense of those random spaces (or scrunches) between words.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">If you only have a line or two of copy, centered text is okay. You do need to consider how the placement of your text changes with screen size or zoom, though.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">When you have more than a couple lines of copy, opt for left-justified text. It\u2019s the most accessible option all around and it feels more natural and comfortable to the eyes.<\/span><\/p>\n<img decoding=\"async\" class=\"alignnone wp-image-108781 size-large\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2025\/02\/Text-Alignment-1024x500.png\" alt=\"Copy showing how copy can be left justified, centered, and justified.\" width=\"1024\" height=\"500\" srcset=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2025\/02\/Text-Alignment-1024x500.png 1024w, https:\/\/www.litmus.com\/wp-content\/uploads\/2025\/02\/Text-Alignment-300x146.png 300w, https:\/\/www.litmus.com\/wp-content\/uploads\/2025\/02\/Text-Alignment-768x375.png 768w, https:\/\/www.litmus.com\/wp-content\/uploads\/2025\/02\/Text-Alignment.png 1145w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/>\n<h3><span id=\"font-size\" style=\"font-weight: 400;\">Use a minimum font size of 14px\u00a0<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">\u201cWhat is this, an email for ants!?\u201d\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Small fonts place your design somewhere in the realm of annoying to entirely unreadable. Luckily, it\u2019s an easy fix. Some mobile devices, like iPhones, automatically enlarge text that is less than 14px in size. Setting your font to at least 14px\u2014preferably even larger\u2014can help create better reading experiences. Remember that assistive zooming devices or screen magnifiers might change exactly where your font sits in an email.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">You also need to be mindful of the font you choose. A<\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-web-fonts\"> <span style=\"font-weight: 400;\">web safe font<\/span><\/a><span style=\"font-weight: 400;\"> is the more reliable option, and they include the most<\/span><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/www.accessibilitychecking.com\/blog\/fonts-accessibility\"> <span style=\"font-weight: 400;\">accessible fonts<\/span><\/a><span style=\"font-weight: 400;\"> like Arial and Helvetica. If the web safe fonts ruin your vibe, you can experiment with web fonts, but you\u2019ll need a fallback font when web fonts aren\u2019t supported.<\/span><\/p>\n<div class=\"container pt-3 pb-5 px-1\">\n<div class=\"row blog-cta-green rounded-5 p-4\">\n<div class=\"mx-auto col-12\">\n<div class=\"row d-flex align-items-center\">\n<div class=\"col-12 text-center\">\n<p class=\"bold fs-4\">Make every email count for everyone<\/p>\n<p>Learn how to design, write, and code emails that are inclusive and accessible to all subscribers.<\/p>\n<p><button class=\"button-blue arrow\"><a class=\"text-white text-decoration-none\" rel=\"noopener\" href=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/04\/Ultimate_Guide_to_Email_Accessibility.pdf\">GET THE EBOOK<\/a><\/button><\/p>\n<\/div>\n<div class=\"d-none\"><img decoding=\"async\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2024\/07\/blog-cta-email-guardian-07292024.svg\" alt=\"\" width=\"210\" height=\"180\" \/><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<h3><span id=\"line-spacing\" style=\"font-weight: 400;\">Optimize your line spacing<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Your text\u2019s readability also hinges on line spacing in a very Goldilocks way.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">When lines of copy are too close together, it\u2019s hard to tell them apart. Conversely, when they are too far apart, it\u2019s hard to know where to look for the next line as they all look like short, individual paragraphs.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The World Wide Web Consortium even has<\/span><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/www.w3.org\/TR\/WCAG20-TECHS\/C21.html\"> <span style=\"font-weight: 400;\">clear accessibility guidelines around proper line spacing<\/span><\/a><span style=\"font-weight: 400;\">, suggesting 1.5 to 2 is preferred to single spacing.<\/span><\/p>\n<figure id=\"post-24053 media-24053\" class=\"alignnone\"><img decoding=\"async\" class=\"\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/04\/2_image4.png\" alt=\"\" \/><\/figure>\n<h3><span id=\"contrast\" style=\"font-weight: 400;\">Keep contrast high\u00a0<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Contrast is the difference between two elements in an email. Most often, it\u2019s the difference between the color of your copy and the background color on which it sits. Too low contrast and people with low vision can have an extraordinarily hard time reading an email.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Fortunately, there are well-established guidelines for proper contrast. The Web Content Accessibility Guidelines<\/span><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/webaim.org\/articles\/contrast\/\"> <span style=\"font-weight: 400;\">clearly define how they determine appropriate contrast<\/span><\/a><span style=\"font-weight: 400;\">. The main rule is to make elements <\/span><i><span style=\"font-weight: 400;\">distinguishable<\/span><\/i><span style=\"font-weight: 400;\">. In their words,<\/span><span style=\"font-weight: 400;\">\u201cMake it easier for users to see and hear digital content including separating foreground from background.\u201d<\/span><\/p>\n<p><span style=\"font-weight: 400;\">There are various ways to do this, including using color, font weight, and font size. Regardless of which method you use, make sure your elements contrast enough with those around them so your email design is accessible.\u00a0<\/span><\/p>\n<p style=\"padding-left: 15px; border-left: 10px solid #0d5477;\"><b>Tip<\/b><span style=\"font-weight: 400;\">: Accessibility group WebAIM even has<\/span><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/webaim.org\/resources\/contrastchecker\/\"> <span style=\"font-weight: 400;\">a free contrast checker online<\/span><\/a><span style=\"font-weight: 400;\"> that can help identify any accessibility issues before your subscribers do. In the example below, the contrast on the CTA button passes the WebAIM test, but the tan header on the blue background does not.<\/span><\/p>\n<img decoding=\"async\" class=\"alignnone wp-image-108782 size-full\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2025\/02\/Taste-of-Summer.png\" alt=\"Example of a good CTA in an email that reads &quot;shop new swim&quot; for summer swimwear.\" width=\"774\" height=\"450\" srcset=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2025\/02\/Taste-of-Summer.png 774w, https:\/\/www.litmus.com\/wp-content\/uploads\/2025\/02\/Taste-of-Summer-300x174.png 300w, https:\/\/www.litmus.com\/wp-content\/uploads\/2025\/02\/Taste-of-Summer-768x447.png 768w\" sizes=\"(max-width: 774px) 100vw, 774px\" \/>\n<p><span id=\"images\" style=\"font-weight: 400;\"><br \/>\nBalance the size of background images and texts<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Background images are a must-have in many email designs, and we\u2019ve already talked about using live text on top of them instead of in them. Something else to consider, though, is balancing the amount of text with the size of the image. Sarah Gallardo noted,<\/span> <span style=\"font-weight: 400;\">\u201cUsers that use zoom tools as an assistive technology can increase the size of text to 200% or 300%, so we need a background image that can contain that text when it increases that much.\u201d<\/span><\/p>\n<figure class=\"row p-5 my-5 background-light-gray rounded-5\">\n<blockquote class=\"blockquote\"><p>\u201cUsers that use zoom tools as an assistive technology can increase the size of text to 200% or 300%, so we need a background image that can contain that text when it increases that much.\u201d<\/blockquote><figcaption class=\"blockquote-footer\"><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/www.linkedin.com\/in\/sarahjoga\/\" target=\"_blank\" rel=\"noopener\">Sarah Gallardo<\/a>, Lead Email Developer and Email Accessibility Specialist at Oracle Digital Agency<\/figcaption><\/figure>\n<h3><span id=\"design\" style=\"font-weight: 400;\">Make buttons easy to see, understand, and click\u00a0<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Buttons\u2014your call to action. This is the step you hope every reader will take. It\u2019s kind of important, right? Accessibility in design is critical for elements as important as buttons.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Your buttons need descriptive text and high contrast for the same reasons the rest of your design does.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Designing with<\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/how-to-design-for-colorblindness\"> <span style=\"font-weight: 400;\">accessibility for color blindness<\/span><\/a><span style=\"font-weight: 400;\"> in mind also means you can\u2019t rely on colors to convey meaning, like green for positive or red for negative. While you can still use those colors, be sure to add symbols or text with it so everyone understands the meaning.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Accessible buttons should also be large enough to be tapped by even the biggest, shakiest thumbs or pointing devices. And make sure there is ample whitespace around those targets so there aren\u2019t accidental link taps and avoidable frustration for users.<\/span><\/p>\n<p><script src=\"https:\/\/fast.wistia.com\/player.js\" async><\/script><script src=\"https:\/\/fast.wistia.com\/embed\/2qi4z0t5tw.js\" async type=\"module\"><\/script><\/p>\n<style>wistia-player[media-id='2qi4z0t5tw']:not(:defined) { background: center \/ contain no-repeat url('https:\/\/fast.wistia.com\/embed\/medias\/2qi4z0t5tw\/swatch'); display: block; filter: blur(5px); }<\/style>\n<h3><span id=\"links\" style=\"font-weight: 400;\">Add contrast and hover effects to links\u00a0<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Text links need to be distinguishable from the surrounding text\u2014hence why the default for a link is underlined blue text. When overriding that styling, you should do so sparingly. Underlines, especially, are a visual indication that there&#8217;s a link in the email. There are approximately 300 million colorblind people in the world, so relying solely on color for link styling puts them in a difficult position.<\/span><\/p>\n<p><a rel=\"noopener\" href=\"https:\/\/litmus.com\/blog\/interactive-email-for-beginners-6-interactive-elements-you-can-add-to-your-emails-today\"><span style=\"font-weight: 400;\">Including a hover state<\/span><\/a><span style=\"font-weight: 400;\"> on interactive elements like links and buttons is another great way to create a better, more accessible user experience.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Anthony from UX Movement sums it up nicely in his article,<\/span><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/uxmovement.com\/buttons\/why-your-links-need-a-hover-effect\/\"> <i><span style=\"font-weight: 400;\">Why Your Links Need a Hover Effect<\/span><\/i><\/a><i><span style=\"font-weight: 400;\">,<\/span><\/i><span style=\"font-weight: 400;\">\u201cWhether your users are colorblind or not, everyone should be able to spot and target links with ease. Adding a hover effect to your links is a simple and effective way to meet their needs. Links and text shouldn\u2019t just look different. For the best user experience, they should also behave differently.\u201d<\/span><\/p>\n<h3><span id=\"layout\" style=\"font-weight: 400;\">Keep your email layout simple\u00a0<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Complex, multi-column layouts can lead to sensory overload for users. The more complicated a design, the easier it is to get lost in an email, so simpler layouts are often preferred. Single-column layouts are especially effective at creating accessible campaigns\u2014they simplify content and help reinforce hierarchy, aiding scanability in the process.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Single-column layouts are also generally easier to adjust across different screen sizes. As more of the world comes online, more people are using smaller mobile devices to access the internet and email. Regardless of your technique,<\/span><a rel=\"noopener\" href=\"https:\/\/litmus.com\/blog\/understanding-responsive-and-hybrid-email-design\"> <span style=\"font-weight: 400;\">keeping your emails responsive across different devices<\/span><\/a><span style=\"font-weight: 400;\"> is a great way to improve the subscriber experience.<\/span><\/p>\n<figure id=\"post-24051 media-24051\" class=\"alignnone\"><img decoding=\"async\" class=\"\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/04\/4_image2.png\" alt=\"\" \/><\/figure>\n<div class=\"container pt-3 pb-5 px-1\">\n<div class=\"row blog-cta-green rounded-5 p-4\">\n<div class=\"mx-auto col-12\">\n<div class=\"row d-flex align-items-center\">\n<div class=\"col-12 text-center\">\n<p class=\"bold fs-4\">Accessibility made simple<\/p>\n<p>Creating accessible emails in 2025 is not optional\u2014it\u2019s required. Learn about accessibility\u2019s impact on brands from two industry experts.<\/p>\n<p><button class=\"button-blue arrow\"><a class=\"text-white text-decoration-none\" rel=\"noopener\" href=\"https:\/\/www.litmus.com\/resources\/why-businesses-must-embrace-email-accessibility\">Watch now<\/a><\/button><\/p>\n<\/div>\n<div class=\"d-none\"><img decoding=\"async\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2024\/07\/blog-cta-email-guardian-07292024.svg\" alt=\"\" width=\"210\" height=\"180\" \/><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<h2><span id=\"accessibility-mistakes\" style=\"font-weight: 400;\">C<\/span><span style=\"font-weight: 400;\">ommon accessibility mistakes designers will make<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Mistakes happen, but it\u2019s what you learn from them that matters. Here are a few ways to make sure you work toward more accessible email designs while you create.\u00a0<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">1. Don\u2019t skip key accessible design principles<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Some of the most common accessibility mistakes involve the principles we covered in the previous section, like locking text away in images.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">While the goal is always to make your emails as accessible as possible, don\u2019t let perfect be the enemy of good. Small changes can add up over time, and it\u2019s better to make some improvements than none at all.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Starting with accessible email templates and using tools like Litmus to check for accessibility in design automatically takes some of the mental load off of you, too. <\/span><\/p>\n<img decoding=\"async\" class=\"alignnone wp-image-108786 size-large\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2025\/02\/Cart-Abandon-Templates-1024x507.png\" alt=\"A screenshot showing Litmus' free cart abandonment email templates on their website.\" width=\"1024\" height=\"507\" srcset=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2025\/02\/Cart-Abandon-Templates-1024x507.png 1024w, https:\/\/www.litmus.com\/wp-content\/uploads\/2025\/02\/Cart-Abandon-Templates-300x149.png 300w, https:\/\/www.litmus.com\/wp-content\/uploads\/2025\/02\/Cart-Abandon-Templates-768x380.png 768w, https:\/\/www.litmus.com\/wp-content\/uploads\/2025\/02\/Cart-Abandon-Templates.png 1250w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/>\n<p><b><br \/>\nHow to fix it<\/b><span style=\"font-weight: 400;\">:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Use<\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/email-templates\"> <span style=\"font-weight: 400;\">pre-tested email design templates<\/span><\/a><span style=\"font-weight: 400;\"> with accessibility baked in.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Check your designs against an accessibility testing tool like Litmus.<\/span><\/li>\n<\/ul>\n<h3><span style=\"font-weight: 400;\">2. Avoid working in a silo<\/span><\/h3>\n<p><span style=\"font-weight: 400;\"><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/ultimate-guide-accessible-emails\" target=\"_blank\">Email accessibility<\/a> is a team effort between design,<\/span><a rel=\"noopener\" href=\"https:\/\/litmus.com\/blog\/7-simple-tricks-to-make-your-email-code-more-accessible\"> <span style=\"font-weight: 400;\">development<\/span><\/a><span style=\"font-weight: 400;\">, and<\/span><a rel=\"noopener\" href=\"https:\/\/litmus.com\/blog\/email-accessibility-5-tips-for-writing-email-copy-for-everyone\"> <span style=\"font-weight: 400;\">copywriting<\/span><\/a><span style=\"font-weight: 400;\">. Share what you learn, explain your motivations, and work together to find a balance between aesthetics and accessibility.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">For example, getting the intended message across with<\/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;\"> can take a little extra care unless you want \u201c<\/span><span style=\"font-weight: 400;\">We \ud83d\udc4f love \ud83d\udc4f email! \ud83d\udc4f\u201d\u00a0 to sound like \u201cWe clapping hands love clapping hands email! clapping hands.\u201d<\/span><\/p>\n<p><span style=\"font-weight: 400;\">In addition to collaborating with a variety of email disciplines, it helps to work with people with different abilities.\u00a0<\/span><\/p>\n<p><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/www.mollyburkeofficial.com\/consulting\"><span style=\"font-weight: 400;\">Molly Burke<\/span><\/a><span style=\"font-weight: 400;\">, a content creator, consultant, and advocate, shared her advice to brands on the<\/span><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/www.youtube.com\/watch?v=rm2BN9ty46I\"> <span style=\"font-weight: 400;\">What\u2019s Trending podcast<\/span><\/a><i><span style=\"font-weight: 400;\">,<\/span><\/i><span style=\"font-weight: 400;\">\u201cI can\u2019t express enough that I represent myself as one blind woman\u2014I don\u2019t represent the entire community. But I think we need to be involved at every touchpoint. So that means hiring inclusively internally so we can be in all the rooms every step of the way.\u201d<\/span><\/p>\n<p><b>How to fix it<\/b><span style=\"font-weight: 400;\">:\u00a0<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Share what you learn about accessibility (and why it matters) to your team. You can forward them our guide to<\/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;\">accessibility coding standards<\/span><\/a><span style=\"font-weight: 400;\"> and tips on<\/span><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;\">. Our virtual event about <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/resources\/why-businesses-must-embrace-email-accessibility\"><span style=\"font-weight: 400;\">why businesses must embrace email accessibility<\/span><\/a><span style=\"font-weight: 400;\"> is another great resource.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Ask for subscriber feedback about their experience with your content and compile the findings into a report.<\/span><\/li>\n<\/ul>\n<h3><span style=\"font-weight: 400;\">3. No more making assumptions<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Paul Airy, Email Design and Development Consultant, and author of the book,<\/span><a rel=\"noopener\" target=\"_blank\" href=\"http:\/\/beyondtheenvelope.co.uk\/a-type-of-email.php\"> <i><span style=\"font-weight: 400;\">A Type of Email<\/span><\/i><\/a><span style=\"font-weight: 400;\">, shared, <\/span><span style=\"font-weight: 400;\">\u201cWhen we design and develop emails, we tend to assume our subscribers will be able to read and interact with them, based on whether we can read and interact with them. We judge the quality of other people\u2019s experience based on our own. The truth is that every person, and the way they experience the world, is different.\u201d<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Being open to learning and experimenting with accessibility in design is a needed first step. You can also give subscribers the option to choose their experience and accessibility features with an<\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/how-to-create-an-accessibility-switcher-in-email\"> <span style=\"font-weight: 400;\">Accessibility Switcher<\/span><\/a><span style=\"font-weight: 400;\">\u2122.<\/span><\/p>\n<img decoding=\"async\" class=\"alignnone wp-image-108784 size-large\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2025\/02\/Accessibility-Checker-1024x896.png\" alt=\"An image of Litmus' accessibility checker in the platform. Checks include alt text, meta viewports, color contrast, content types, document titles, and more.\" width=\"1024\" height=\"896\" srcset=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2025\/02\/Accessibility-Checker-1024x896.png 1024w, https:\/\/www.litmus.com\/wp-content\/uploads\/2025\/02\/Accessibility-Checker-300x263.png 300w, https:\/\/www.litmus.com\/wp-content\/uploads\/2025\/02\/Accessibility-Checker-768x672.png 768w, https:\/\/www.litmus.com\/wp-content\/uploads\/2025\/02\/Accessibility-Checker.png 1250w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/>\n<p><b><br \/>\nHow to fix it<\/b><span style=\"font-weight: 400;\">:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Use an<\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/accessible-email-made-easy-introducing-accessibility-checks-in-litmus\"> <span style=\"font-weight: 400;\">accessibility checker<\/span><\/a><span style=\"font-weight: 400;\"> like Litmus to experience your emails like your subscribers might with visual impairment filters and screen readers.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Try navigating an email with your device\u2019s built-in voice over and keyboard controls instead of a mouse\u2014you\u2019ll gain a new perspective!<\/span><\/li>\n<li aria-level=\"1\"><span style=\"font-weight: 400;\">Check whether it\u2019s time for an <\/span><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/blogs.oracle.com\/marketingcloud\/post\/signs-you-need-an-email-accessibility-audit\"><span style=\"font-weight: 400;\">email accessibility audit<\/span><\/a><span style=\"font-weight: 400;\">.<\/span><\/li>\n<\/ul>\n<h2><span id=\"style=\">Accessible email examples for designers<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Accessible design considers specific disabilities and scenarios, but a lot of the design principles end up creating visuals that are just better for everyone. For example, nobody, regardless of abilities, wants to hunt for an obscure link or try to make sense of a message without a visual hierarchy. Accessible design is good design.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">That means that you probably already use accessible email design to some extent, and a few tools and checks can help you close any remaining gap.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Litmus\u2014combining colors and symbols<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Colors can convey mood and branding, but they aren\u2019t reliable on their own for conveying meaning. In a recent email about an accessibility webinar (how appropriate! You can <\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/resources\/why-businesses-must-embrace-email-accessibility\"><span style=\"font-weight: 400;\">watch the recording here<\/span><\/a><span style=\"font-weight: 400;\">.), our designers combined colors and symbols.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Even when viewed with a color deficiency, like the green-blind\/deuteranopia screenshot below, the symbols still make sense. The symbol and background colors don\u2019t melt together for different color deficiencies, and the symbols still convey the same meaning outside of their original color. <\/span><\/p>\n<img decoding=\"async\" class=\"alignnone wp-image-108787 size-large\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2025\/02\/Deuteranopia-Filter-1024x529.png\" alt=\"View on one of Litmus' images with a green-blind deuteranopia filter.\" width=\"1024\" height=\"529\" srcset=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2025\/02\/Deuteranopia-Filter-1024x529.png 1024w, https:\/\/www.litmus.com\/wp-content\/uploads\/2025\/02\/Deuteranopia-Filter-300x155.png 300w, https:\/\/www.litmus.com\/wp-content\/uploads\/2025\/02\/Deuteranopia-Filter-768x397.png 768w, https:\/\/www.litmus.com\/wp-content\/uploads\/2025\/02\/Deuteranopia-Filter-1536x794.png 1536w, https:\/\/www.litmus.com\/wp-content\/uploads\/2025\/02\/Deuteranopia-Filter.png 1540w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/>\n<p><span style=\"font-weight: 400;\"><br \/>\nWhile there are <\/span><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/www.color-blindness.com\/coblis-color-blindness-simulator\/\"><span style=\"font-weight: 400;\">online color blindness simulator tools<\/span><\/a><span style=\"font-weight: 400;\">, we like the at-a-glance view of Litmus\u2019 Visual Impairment Filters. You can check what your designs look like across different color deficiencies in one spot and take a closer look if any aren&#8217;t right.<\/span><\/p>\n<img decoding=\"async\" class=\"alignnone wp-image-108789 size-large\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2025\/02\/Color-Blindness-Simulator-1024x480.png\" alt=\"Five colorblind checks that can be run in Litmus to make sure emails can be read by everyone.\" width=\"1024\" height=\"480\" srcset=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2025\/02\/Color-Blindness-Simulator-1024x480.png 1024w, https:\/\/www.litmus.com\/wp-content\/uploads\/2025\/02\/Color-Blindness-Simulator-300x141.png 300w, https:\/\/www.litmus.com\/wp-content\/uploads\/2025\/02\/Color-Blindness-Simulator-768x360.png 768w, https:\/\/www.litmus.com\/wp-content\/uploads\/2025\/02\/Color-Blindness-Simulator.png 1250w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/>\n<h3><span style=\"font-weight: 400;\"><br \/>\nASOS &#8211; personalized content in the header<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Remember how we mentioned that using live text is better for accessibility and personalization? Here\u2019s a prime example. ASOS uses weather data to create a dynamic headline\u2014it either says it\u2019s raining out or that rain is on the way. The large, colorful text draws your eye in, too.<\/span><\/p>\n<div class=\"image-scroll mb-3\"><img decoding=\"async\" class=\"alignnone\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2019\/09\/ASOS-Hunter-personalized-raining.png\" alt=\"\" \/><\/div>\n\n<h3><span style=\"font-weight: 400;\">Bulk Powders &#8211; strong visual hierarchy\u00a0<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Bulk Powders used a live poll in their email to gauge their audience\u2019s plans for the London Marathon with high contrast, clear content organization, and descriptive CTAs. If you plan to use multiple columns in your design, make sure it\u2019s responsive to fit different screen sizes.<\/span><\/p>\n<div class=\"image-scroll mb-3\"><img decoding=\"async\" class=\"alignnone\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2019\/09\/Bulk-Powders-poll-2.png\" alt=\"\" \/><\/div>\n\n<div class=\"container pt-3 pb-5 px-1\">\n<div class=\"row blog-cta-green rounded-5 p-4\">\n<div class=\"mx-auto col-12\">\n<div class=\"row d-flex align-items-center\">\n<div class=\"col-12 text-center\">\n<p class=\"bold fs-4\">Learn from the best<\/p>\n<p>Your favorite brands use Litmus to deliver flawless email experiences. Discover the ROI your emails can achieve with Litmus.<\/p>\n<p><button class=\"button-blue arrow\"><a class=\"text-white text-decoration-none\" rel=\"noopener\" href=\"https:\/\/www.litmus.com\/customers\">Explore case studies<\/a><\/button><\/p>\n<\/div>\n<div class=\"d-none\"><img decoding=\"async\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2024\/07\/blog-cta-email-guardian-07292024.svg\" alt=\"\" width=\"210\" height=\"180\" \/><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<h2><span style=\"font-weight: 400;\">T<\/span><span style=\"font-weight: 400;\">he designer\u2019s toolkit for email accessibility<\/span><\/h2>\n<p><span id=\"toolkit\" style=\"font-weight: 400;\">You\u2019ve just learned a lot about inclusive design and creating accessible emails, but you don\u2019t have to put it all into practice on your own.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Litmus helps designers create beautiful and accessible emails, no matter their experience level.\u00a0<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Litmus<\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/email-design\"> <span style=\"font-weight: 400;\">Email Design<\/span><\/a><span style=\"font-weight: 400;\"> Library lets you create, store, manage, and collaborate on accessible email designs that you can reuse and rework. Establish brand colors, HTML email templates, and code modules to stick to your go-to look and feel without sacrificing accessibility.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Litmus<\/span><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/email-builder\"> <span style=\"font-weight: 400;\">Email Builder<\/span><\/a><span style=\"font-weight: 400;\"> gives team members a place to easily build accessible emails, either with the drag and drop email builder or HTML email builder.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\">Litmus<a style=\"font-size: revert; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif; text-align: var(--bs-body-text-align);\" rel=\"noopener\" href=\"https:\/\/www.litmus.com\/email-testing\"> Email Testing<\/a><span style=\"font-weight: 400;\"> Accessibility Checks automatically check your designs across 40+ accessibility areas and best practices. Plus, you can hear what your email sounds like to screen readers and preview the designs with color vision deficiency filters.<\/span><\/li>\n<\/ul>\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\">Start making a difference today<\/p>\n\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<button class=\"button-blue arrow\"><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/email-testing\" class=\"text-white text-decoration-none\">Create Inclusive Emails<\/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  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Learn accessible design principles for designers and marketers. Create inclusive emails that are readable, engaging, and accessible to everyone.<\/p>\n","protected":false},"author":3,"featured_media":108831,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"tags":[520],"blog_category":[53],"class_list":["post-3634","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-email-accessibility","blog_category-tips-resources"],"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>Accessible Design Best Practices for Email Designers - Litmus<\/title>\n<meta name=\"description\" content=\"Learn accessible design principles for designers and marketers. Create inclusive emails that are readable, engaging, and accessible to everyone.\" \/>\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\/email-accessibility-for-designers-8-best-practices-you-should-follow\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"The Guide to Accessible Design in Email Marketing\" \/>\n<meta property=\"og:description\" content=\"Learn accessible design principles for designers and marketers. Create inclusive emails that are readable, engaging, and accessible to everyone.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.litmus.com\/blog\/email-accessibility-for-designers-8-best-practices-you-should-follow\" \/>\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-20T14:20:05+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-06-26T20:36:33+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2025\/02\/Email-Accessibility-for-Designers-Refresh-2.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":"Accessible Design Best Practices for Email Designers - Litmus","description":"Learn accessible design principles for designers and marketers. Create inclusive emails that are readable, engaging, and accessible to everyone.","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\/email-accessibility-for-designers-8-best-practices-you-should-follow","og_locale":"en_US","og_type":"article","og_title":"The Guide to Accessible Design in Email Marketing","og_description":"Learn accessible design principles for designers and marketers. Create inclusive emails that are readable, engaging, and accessible to everyone.","og_url":"https:\/\/www.litmus.com\/blog\/email-accessibility-for-designers-8-best-practices-you-should-follow","og_site_name":"Litmus","article_publisher":"https:\/\/www.facebook.com\/litmusapp","article_published_time":"2025-02-20T14:20:05+00:00","article_modified_time":"2025-06-26T20:36:33+00:00","og_image":[{"width":1380,"height":725,"url":"https:\/\/www.litmus.com\/wp-content\/uploads\/2025\/02\/Email-Accessibility-for-Designers-Refresh-2.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\/email-accessibility-for-designers-8-best-practices-you-should-follow#article","isPartOf":{"@id":"https:\/\/www.litmus.com\/blog\/email-accessibility-for-designers-8-best-practices-you-should-follow"},"author":{"name":"","@id":""},"headline":"The Guide to Accessible Design in Email Marketing","datePublished":"2025-02-20T14:20:05+00:00","dateModified":"2025-06-26T20:36:33+00:00","mainEntityOfPage":{"@id":"https:\/\/www.litmus.com\/blog\/email-accessibility-for-designers-8-best-practices-you-should-follow"},"wordCount":8,"commentCount":0,"publisher":{"@id":"https:\/\/www.litmus.com\/#organization"},"image":{"@id":"https:\/\/www.litmus.com\/blog\/email-accessibility-for-designers-8-best-practices-you-should-follow#primaryimage"},"thumbnailUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2025\/02\/Email-Accessibility-for-Designers-Refresh-2.png","keywords":["Email Accessibility"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.litmus.com\/blog\/email-accessibility-for-designers-8-best-practices-you-should-follow#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.litmus.com\/blog\/email-accessibility-for-designers-8-best-practices-you-should-follow","url":"https:\/\/www.litmus.com\/blog\/email-accessibility-for-designers-8-best-practices-you-should-follow","name":"Accessible Design Best Practices for Email Designers - Litmus","isPartOf":{"@id":"https:\/\/www.litmus.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.litmus.com\/blog\/email-accessibility-for-designers-8-best-practices-you-should-follow#primaryimage"},"image":{"@id":"https:\/\/www.litmus.com\/blog\/email-accessibility-for-designers-8-best-practices-you-should-follow#primaryimage"},"thumbnailUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2025\/02\/Email-Accessibility-for-Designers-Refresh-2.png","datePublished":"2025-02-20T14:20:05+00:00","dateModified":"2025-06-26T20:36:33+00:00","description":"Learn accessible design principles for designers and marketers. Create inclusive emails that are readable, engaging, and accessible to everyone.","breadcrumb":{"@id":"https:\/\/www.litmus.com\/blog\/email-accessibility-for-designers-8-best-practices-you-should-follow#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.litmus.com\/blog\/email-accessibility-for-designers-8-best-practices-you-should-follow"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.litmus.com\/blog\/email-accessibility-for-designers-8-best-practices-you-should-follow#primaryimage","url":"https:\/\/www.litmus.com\/wp-content\/uploads\/2025\/02\/Email-Accessibility-for-Designers-Refresh-2.png","contentUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2025\/02\/Email-Accessibility-for-Designers-Refresh-2.png","width":1380,"height":725},{"@type":"BreadcrumbList","@id":"https:\/\/www.litmus.com\/blog\/email-accessibility-for-designers-8-best-practices-you-should-follow#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.litmus.com\/"},{"@type":"ListItem","position":2,"name":"The Guide to Accessible Design in Email Marketing"}]},{"@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\/3634","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\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/comments?post=3634"}],"version-history":[{"count":13,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts\/3634\/revisions"}],"predecessor-version":[{"id":118109,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts\/3634\/revisions\/118109"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/media\/108831"}],"wp:attachment":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/media?parent=3634"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/tags?post=3634"},{"taxonomy":"blog_category","embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/blog_category?post=3634"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}