Key takeaways:
The purpose of accessible design is to assist everybody take pleasure in your content material.There are various methods to make an e-mail accessible together with left-justifying your textual content, utilizing a minimal font measurement, and extra.It’s higher to take small steps in the direction of accessibility than none in any respect.
Electronic mail design is greater than fairly ornament and fascinating colours—it’s how individuals expertise and work together with data.
Whereas accessibility in design has at all times been observe, it’ll even be the legislation when the European Accessibility Act (EAA) goes into impact in June 2025. After we polled the e-mail neighborhood about how prepared they have been for the change, most didn’t know what it was. We are able to repair that, although.
Whether or not you’re new to accessible e-mail design or need to get set earlier than EAA, we’ve received you lined. Let’s stroll by what it takes to make an accessible e-mail design.
Desk of contents
What’s accessible design?
Accessible design is a design course of to create content material and experiences that everybody can simply use and luxuriate in, no matter their talents. Subscribers expertise your emails otherwise due to disabilities or conditions like:
Everlasting circumstances like blindness.Short-term accidents like concussions or a damaged wrist.Situational challenges like navigating a cellphone with an off-hand whereas the opposite is full.
Whereas contemplating individuals with disabilities is just the sort factor to do, there are additionally severe enterprise advantages to accessibility in design.
Greater than one in 4 American adults have some sort of incapacity, and so they characterize $21 billion in discretionary revenue. If you happen to ignore individuals with disabilities in your design course of, you alienate potential prospects, lower potential income, and even open your group as much as lawsuits for not complying with authorized necessities.
In a Litmus Stay 2024 dialogue on accessible emails, Sarah Gallardo, a Lead Electronic mail Developer and Electronic mail Accessibility Specialist at Oracle Digital Expertise Company, shared, “It’s not sufficient to provide you with design—numerous designers can try this. Electronic mail is a communication platform above the whole lot else, so it’s form of a giant deal once you’re not speaking to 27% of your recipients.”
Whereas accessible design is the phrase you’ll hear most frequently, there are just a few different phrases to concentrate on.
1. Accessible design
Accessible design considers the usability for individuals with particular disabilities—like visible, cognitive, or motor impairments—and the assistive know-how they use to eat data.
For instance, individuals with visible impairments could depend on display screen readers that learn emails aloud, that means an image-only e-mail could be silent. Subscribers want components clearly organized and labeled as a result of they navigate with a keyboard as a substitute of a mouse.
2. Inclusive design
There’s a distinction between accessibility vs. inclusion in e-mail design.
Inclusive design embraces the complete vary of human range together with skill, language, tradition, gender, age, and different types of distinction.
Examples of inclusive design embody utilizing inclusive imagery, writing in plain language, and utilizing translated and localized content material. You can additionally embody individuals with various ranges of know-how entry by lowering design load instances.
3. Common design
Common design creates content material that works for each particular person and platform. For instance, e-mail designers and builders can use responsive layouts to adapt to completely different screens and use a single e-mail design that’s accessible for everybody.
Accessible design rules for e-mail designers
Accessibility design greatest practices all have the identical purpose—to assist everybody take pleasure in your e-mail. Whereas there are some particular assistive instruments or circumstances to think about, you’ll see that, typically, accessible design is simply good design. You could even make accessible design selections with out even realizing it.
Bounce to ideas for:
Use actual textual content as a substitute of all-image emails
The temptation to make use of all-image emails is robust once you desire a fast method to customise the feel and appear of your e-mail to your precise requirements. We ask you to take your cursor off the Photoshop layer and again away slowly, although.
Actual textual content in HTML is the accessible design winner for a handful of causes.
Assistive applied sciences like display screen readers can solely entry the underlying code of an e-mail, not the textual content in a picture. That implies that textual content saved inside a picture is silent to anybody utilizing a reader. Individuals who use display screen magnifiers and customized zoom settings may wrestle with blurry images, too.
Plus, many e-mail purchasers flip off pictures for safety causes. When this occurs, no person can learn your e-mail.
Stay textual content can also be searchable, that means subscribers can discover the e-newsletter or promo code they keep in mind you sending them final week. website positioning for e-mail is a factor!
Lastly, utilizing actual textual content as a substitute of locking it away in a picture helps you to personalize messages with dynamic content material.
Create an organized and scannable hierarchy
Each cognitive disabilities and situational disabilities (like being in a rush or being distracted) make it arduous for individuals to learn and perceive lengthy, uniform blocks of textual content. Hierarchy—or creating visible variations that reinforce significance—helps these customers shortly eat content material in e-mail.
Through the use of bigger textual content measurement, accessible coloration, and strategic placement, you may create emails which are simply scanned and browse. Strive creating daring, high-contrast headlines above smaller parts of copy, and permit for sufficient whitespace between sections to keep away from content material bleeding collectively.
Left-justify your e-mail copy
Utilizing each actual textual content and hierarchy can help readability, however the alignment of your copy additionally impacts the readability of your emails.
Studying depends on visible cues to make sense of the place we’re on a web page or display screen. One of the vital essential cues is the beginning of a brand new line, which acts as an anchor for our eyes when leaping round an e-mail. If you happen to heart the textual content, eyes and minds have to seek out the place a brand new line begins, making it taxing and complicated.
Justified textual content will increase areas between phrases and characters to create a uniform block of textual content. Whereas the symmetry is sweet on first look, and also you do have a constant line begin, it presents different accessibility points. If an individual makes use of a display screen magnifier or zooms in for readability, they’ll must make sense of these random areas (or scrunches) between phrases.
If you happen to solely have a line or two of copy, centered textual content is okay. You do want to think about how the location of your textual content modifications with display screen measurement or zoom, although.
When you might have greater than a pair strains of copy, go for left-justified textual content. It’s essentially the most accessible choice throughout and it feels extra pure and cozy to the eyes.
Use a minimal font measurement of 14px
“What is that this, an e-mail for ants!?”
Small fonts place your design someplace within the realm of annoying to completely unreadable. Fortunately, it’s a simple repair. Some cell units, like iPhones, routinely enlarge textual content that’s lower than 14px in measurement. Setting your font to at the very least 14px—ideally even bigger—can assist create higher studying experiences. Do not forget that assistive zooming units or display screen magnifiers may change precisely the place your font sits in an e-mail.
You additionally should be aware of the font you select. A internet secure font is the extra dependable choice, and so they embody essentially the most accessible fonts like Arial and Helvetica. If the net secure fonts wreck your vibe, you may experiment with internet fonts, however you’ll want a fallback font when internet fonts aren’t supported.
Make each e-mail rely for everybody
Discover ways to design, write, and code emails which are inclusive and accessible to all subscribers.
GET THE EBOOK
Optimize your line spacing
Your textual content’s readability additionally hinges on line spacing in a really Goldilocks method.
When strains of copy are too shut collectively, it’s arduous to inform them aside. Conversely, when they’re too far aside, it’s arduous to know the place to search for the following line as all of them seem like brief, particular person paragraphs.
The World Broad Net Consortium even has clear accessibility tips round correct line spacing, suggesting 1.5 to 2 is most popular to single spacing.
Preserve distinction excessive
Distinction is the distinction between two components in an e-mail. Most frequently, it’s the distinction between the colour of your copy and the background coloration on which it sits. Too low distinction and other people with low imaginative and prescient can have an awfully arduous time studying an e-mail.
Happily, there are well-established tips for correct distinction. The Net Content material Accessibility Pointers clearly outline how they decide applicable distinction. The principle rule is to make components distinguishable. Of their phrases,“Make it simpler for customers to see and listen to digital content material together with separating foreground from background.”
There are numerous methods to do that, together with utilizing coloration, font weight, and font measurement. No matter which methodology you employ, make certain your components distinction sufficient with these round them so your e-mail design is accessible.
Tip: Accessibility group WebAIM even has a free distinction checker on-line that may assist determine any accessibility points earlier than your subscribers do. Within the instance beneath, the distinction on the CTA button passes the WebAIM take a look at, however the tan header on the blue background doesn’t.
Stability the dimensions of background pictures and texts
Background pictures are vital in lots of e-mail designs, and we’ve already talked about utilizing dwell textual content on high of them as a substitute of in them. One thing else to think about, although, is balancing the quantity of textual content with the dimensions of the picture. Sarah Gallardo famous, “Customers that use zoom instruments as an assistive know-how can enhance the dimensions of textual content to 200% or 300%, so we want a background picture that may comprise that textual content when it will increase that a lot.”
“Customers that use zoom instruments as an assistive know-how can enhance the dimensions of textual content to 200% or 300%, so we want a background picture that may comprise that textual content when it will increase that a lot.”
Make buttons straightforward to see, perceive, and click on
Buttons—your name to motion. That is the step you hope each reader will take. It’s form of essential, proper? Accessibility in design is crucial for components as essential as buttons.
Your buttons want descriptive textual content and excessive distinction for a similar causes the remainder of your design does.
Designing with accessibility for coloration blindness in thoughts additionally means you may’t depend on colours to convey that means, like inexperienced for constructive or crimson for adverse. When you can nonetheless use these colours, you’ll want to add symbols or textual content with it so everybody understands the that means.
Accessible buttons must also be massive sufficient to be tapped by even the largest, shakiest thumbs or pointing units. And ensure there may be ample whitespace round these targets so there aren’t unintentional hyperlink faucets and avoidable frustration for customers.
Add distinction and hover results to hyperlinks
Textual content hyperlinks should be distinguishable from the encompassing textual content—therefore why the default for a hyperlink is underlined blue textual content. When overriding that styling, you must accomplish that sparingly. Underlines, particularly, are a visible indication that there’s a hyperlink within the e-mail. There are roughly 300 million colorblind individuals on the planet, so relying solely on coloration for hyperlink styling places them in a troublesome place.
Together with a hover state on interactive components like hyperlinks and buttons is one other nice method to create a greater, extra accessible person expertise.
Anthony from UX Motion sums it up properly in his article, Why Your Hyperlinks Want a Hover Impact,“Whether or not your customers are colorblind or not, everybody ought to be capable of spot and goal hyperlinks with ease. Including a hover impact to your hyperlinks is a straightforward and efficient method to meet their wants. Hyperlinks and textual content shouldn’t simply look completely different. For the very best person expertise, they need to additionally behave otherwise.”
Preserve your e-mail format easy
Advanced, multi-column layouts can result in sensory overload for customers. The extra difficult a design, the better it’s to get misplaced in an e-mail, so less complicated layouts are sometimes most popular. Single-column layouts are particularly efficient at creating accessible campaigns—they simplify content material and assist reinforce hierarchy, aiding scanability within the course of.
Single-column layouts are additionally typically simpler to regulate throughout completely different display screen sizes. As extra of the world comes on-line, extra persons are utilizing smaller cell units to entry the web and e-mail. No matter your method, conserving your emails responsive throughout completely different units is an effective way to enhance the subscriber expertise.
Accessibility made easy
Creating accessible emails in 2025 will not be non-compulsory—it’s required. Study accessibility’s influence on manufacturers from two business consultants.
Watch now
Common accessibility errors designers will make
Errors occur, however it’s what you be taught from them that issues. Listed below are just a few methods to be sure you work towards extra accessible e-mail designs when you create.
1. Don’t skip key accessible design rules
Among the most typical accessibility errors contain the rules we lined within the earlier part, like locking textual content away in pictures.
Whereas the purpose is at all times to make your emails as accessible as attainable, don’t let excellent be the enemy of excellent. Small modifications can add up over time, and it’s higher to make some enhancements than none in any respect.
Beginning with accessible e-mail templates and utilizing instruments like Litmus to verify for accessibility in design routinely takes a few of the psychological load off of you, too.
Learn how to repair it:
2. Keep away from working in a silo
Electronic mail accessibility is a staff effort between design, improvement, and copywriting. Share what you be taught, clarify your motivations, and work collectively to discover a steadiness between aesthetics and accessibility.
For instance, getting the supposed message throughout with display screen reader accessibility can take slightly further care until you need “We 👏 love 👏 e-mail! 👏” to sound like “We clapping arms love clapping arms e-mail! clapping arms.”
Along with collaborating with quite a lot of e-mail disciplines, it helps to work with individuals with completely different talents.
Molly Burke, a content material creator, guide, and advocate, shared her recommendation to manufacturers on the What’s Trending podcast,“I can’t categorical sufficient that I characterize myself as one blind lady—I don’t characterize the complete neighborhood. However I feel we should be concerned at each touchpoint. So which means hiring inclusively internally so we may be in all of the rooms each step of the best way.”
Learn how to repair it:
3. No extra making assumptions
Paul Ethereal, Electronic mail Design and Growth Advisor, and creator of the e book, A Kind of Electronic mail, shared, “After we design and develop emails, we are likely to assume our subscribers will be capable of learn and work together with them, primarily based on whether or not we will learn and work together with them. We choose the standard of different individuals’s expertise primarily based on our personal. The reality is that each particular person, and the best way they expertise the world, is completely different.”
Being open to studying and experimenting with accessibility in design is a wanted first step. You too can give subscribers the choice to decide on their expertise and accessibility options with an Accessibility Switcher™.
Learn how to repair it:
Use an accessibility checker like Litmus to expertise your emails like your subscribers may with visible impairment filters and display screen readers.Strive navigating an e-mail along with your machine’s built-in voice over and keyboard controls as a substitute of a mouse—you’ll achieve a brand new perspective!Verify whether or not it’s time for an e-mail accessibility audit.
Accessible e-mail examples for designers
Accessible design considers particular disabilities and situations, however plenty of the design rules find yourself creating visuals which are simply higher for everybody. For instance, no person, no matter talents, desires to hunt for an obscure hyperlink or attempt to make sense of a message with no visible hierarchy. Accessible design is sweet design.
That implies that you in all probability already use accessible e-mail design to some extent, and some instruments and checks can assist you shut any remaining hole.
Litmus—combining colours and symbols
Colours can convey temper and branding, however they aren’t dependable on their very own for conveying that means. In a latest e-mail about an accessibility webinar (how applicable! You possibly can watch the recording right here.), our designers mixed colours and symbols.
Even when seen with a coloration deficiency, just like the green-blind/deuteranopia screenshot beneath, the symbols nonetheless make sense. The image and background colours don’t soften collectively for various coloration deficiencies, and the symbols nonetheless convey the identical that means outdoors of their unique coloration.
Whereas there are on-line coloration blindness simulator instruments, we just like the at-a-glance view of Litmus’ Visible Impairment Filters. You possibly can verify what your designs seem like throughout completely different coloration deficiencies in a single spot and take a better look if any aren’t proper.
ASOS – personalised content material within the header
Bear in mind how we talked about that utilizing dwell textual content is healthier for accessibility and personalization? Right here’s a first-rate instance. ASOS makes use of climate knowledge to create a dynamic headline—it both says it’s raining out or that rain is on the best way. The big, colourful textual content attracts your eye in, too.
Bulk Powders – robust visible hierarchy
Bulk Powders used a dwell ballot of their e-mail to gauge their viewers’s plans for the London Marathon with excessive distinction, clear content material group, and descriptive CTAs. If you happen to plan to make use of a number of columns in your design, make certain it’s responsive to suit completely different display screen sizes.
Study from the very best
Your favourite manufacturers use Litmus to ship flawless e-mail experiences. Uncover the ROI your emails can obtain with Litmus.
Discover case research
The designer’s toolkit for e-mail accessibility
You’ve simply discovered lots about inclusive design and creating accessible emails, however you don’t must put all of it into observe by yourself.
Litmus helps designers create lovely and accessible emails, irrespective of their expertise degree.
Litmus Electronic mail Design Library helps you to create, retailer, handle, and collaborate on accessible e-mail designs you could reuse and rework. Set up model colours, HTML e-mail templates, and code modules to stay to your go-to feel and appear with out sacrificing accessibility.Litmus Electronic mail Builder provides staff members a spot to simply construct accessible emails, both with the drag and drop e-mail builder or HTML e-mail builder.Litmus Electronic mail Testing Accessibility Checks routinely verify your designs throughout 40+ accessibility areas and greatest practices. Plus, you may hear what your e-mail sounds wish to display screen readers and preview the designs with coloration imaginative and prescient deficiency filters.
Begin making a distinction at present
Maximize your e-mail’s influence with Litmus to make sure accessibility and inclusivity for all subscribers — irrespective of their talents.
Create Inclusive Emails
Steph Knapp is a Freelance Content material Author for SaaS and B2B corporations.
