Designing Emails for Accessibility

The “accessible” font was the one they couldn’t read. I was in a conversation recently where a bubble-style font was flagged as inaccessible. The reasoning made sense. Then the people we claim to design for responded: - A neurodivergent person said bubble letters were easier to read, and the “accessible” fonts gave them headaches. - A dyslexic person said thin letterforms from the accessible font list blended and distorted, almost like an optical illusion. - Someone else said, “I can’t read the accessible ones. Only the bubble.” - Another asked: Which “accessible” font actually distinguishes between lowercase l, uppercase I, and the number 1? Arial. Helvetica. Calibri. Open Sans. Roboto. Fonts that recur in design systems, accessibility guidance, and handover decks. But for some people, those three characters are almost indistinguishable: l, I & 1 A font can look clean, pass brand review and appear in an accessibility checklist. And still fail the person sitting in front of the screen. Here’s what design teams can do: 1. Test the “Il1” string before choosing a font. - Type uppercase I, lowercase l, and the number 1 side by side: Il1. If they look identical, you have a legibility problem that your audit may not catch. 2. Don’t block text resizing. - Use scalable units where possible. Respect browser and device-level text preferences. Many people with disabilities and neurodivergent users resize text without assistive technology. 3. Build typography preferences into the product. - Font choice, size, line height, letter spacing, and background colour should be adjustable wherever possible. 4. One person’s accessible default is not everyone’s usable experience. - Include people with disabilities and neurodivergent users before the font is locked. Font decisions often happen in brand or design system sprints with no user research attached. That needs to change. Accessibility is a conversation And too often, we’ve been having that conversation without the people it’s supposed to serve. 👇🏽 Have you ever struggled to read something that was supposed to be “accessible”? What made it harder, or what actually worked better for you? 🔖 Save this for the next time you're looking at font options ♻️ Share it with your team ---- ✉️ Subscribe for more accessibility and design insights: https://lnkd.in/gZpAzWSu ---- Accessibility note: This infographic, titled The accessible font was the one they couldn't read has the same information as the post.

Research-backed accessible text checklist (beyond color & fonts) 1️⃣ Avoid ALL CAPS for long text Reading all caps slows people down by up to 10–20% because we recognize word shapes, not just letters. Uppercase removes those shapes, forcing letter-by-letter reading: https://lnkd.in/e7tCHxUD 👉 Keep all caps for short labels or acronyms only. 2️⃣ Keep an optimal line length Long lines make it hard for the eye to jump to the next line, while very short lines break reading rhythm. Based on classic readability research by Emil Ruder and later UX studies: https://lnkd.in/eJsTZT3w 👉 Aim for ~45–75 characters per line for comfortable reading. 3️⃣ Use generous line height Dense text increases cognitive load and reduces comprehension, especially for users with dyslexia. Recommended in Web Content Accessibility Guidelines (1.4.12 Text Spacing): https://lnkd.in/eam2Uqs5 👉 Use at least 1.4–1.6 line height for body text. 4️⃣ Don’t squeeze letters together Tight letter spacing makes words harder to parse, especially for users with visual or cognitive impairments. Supported by research from British Dyslexia Association: https://lnkd.in/eKc_2HPr 👉 Slightly increasing spacing (e.g., ~0.02–0.05em) can improve readability. 5️⃣ Avoid justified text blocks Perfectly aligned edges may look clean, but they create irregular spacing (“rivers of white”) that disrupt reading flow. 👉 Prefer left-aligned text for most content. 6️⃣ Give paragraphs room to breathe Large text blocks discourage reading and increase cognitive effort. 👉 Use spacing between paragraphs and keep them short (3–5 lines max). 7️⃣ Design for zoom and scaling Users should be able to zoom up to 200% without losing content or readability. 👉 Fixed heights and cramped layouts often break here. 8️⃣ Support scanning, not just reading Most users don’t read - they scan. Structured text helps them find what they need faster. Eye-tracking studies by Jakob Nielsen show “F-shaped” reading patterns: https://lnkd.in/etWrYsM7 👉 Use headings, lists, and clear content chunks. 9️⃣ Be careful with width and layout Very wide text blocks reduce focus, while overly narrow ones feel fragmented. 👉 Balance layout to guide the eye naturally across content. Small changes in spacing and structure can significantly improve comprehension, speed, and user comfort. What’s one text rule you wish more designers followed? #Accessibility #WebAccessibility #UX #InclusiveDesign #Readability

Did you know that 33% of your donors may have trouble reading your fundraising communications due to sight or hearing disabilities? These supporters depend heavily on tools and apps called screen readers. And we are not making it easy. Here are 6 ways we can make our donor communications more inclusive: 1. Stop using bold or italic formatting in your email appeals. Formatted text sounds like complete jibberish on audio. 2. Tone down your emoji usage. If you can, avoid them. Emojis are weird when actually pronounced on audio. A good way to use them is at the end of sentences. 👌 3. Write shorter, more concise impact stories. Listening is hard enough. Understanding impact shouldn't be. 4. Always add ALT text to your donation page images. A simple description of what's in the image will do. Example: Volunteer helping at community food bank. 5. Don't use all caps unless you really have to. An abbreviation like ASAP is okay. But THIS isn't. 6. Write campaign hashtags in Pascal Case. Never as one word. Capitalize every new word e.g. #GivingTuesdayImpact Remember: Inclusive fundraising benefits everyone. Writing compelling appeals is almost like a superpower. But making them accessible makes you stand out. ❤️

Inclusive design is more than the font you choose. It is about how your content behaves when it meets a different nervous system. We are auditing your media and structure. In our rush for engagement, corporate communications often rely on visual shortcuts like flashing videos, color coded alerts, and walls of emojis. Marketing calls these tactics. I call them barriers. When accessibility clashes with creativity, we often default to what looks flashy rather than what is functional. But true creativity flourishes within the constraints of inclusive design. Compliance is just the floor. Our goal is to cultivate an ecosystem where everyone thrives. Here are 8 ways to operationalize inclusion in your content structure. 1/ The Emoji Balance → The Tension: A wall of emojis creates chaos for screen reader users. → Reality: Minimal emojis act as vital visual anchors that break up dense text for ADHD and dyslexic minds (like mine). → The Fix: Use sparingly. Place them at the end of sentences, never in the middle. 2/ The Caption Choice → The Tension: Audio posted bare completely excludes Deaf and Auditory Processing communities. → Reality: But forced, burned in open captions can distract or overwhelm some neurodivergent minds. → The Fix: Provide high quality closed captions (CC). AI generated captions are helpful, but a human must review for accuracy. This empowers user agency, allowing individuals to toggle them based on their needs. 3/ The Color & Shape Rule → The Tension: Using only color to signal danger locks out colorblind users. → The Fix: Always pair color with a distinct shape or text label to ensure the warning translates across all visual systems. 4/ The Alt Text Discipline → The Tension: Images with file names like "IMG_5920.jpg" are dead ends for screen readers. → The Fix: Write descriptive, concise alternative text that translates the visual data clearly. 5/ The Header Hierarchy → The Tension: Manually bolding text to look like a header creates a flat, confusing landscape for screen readers. → The Fix: Use actual heading styles (H1, H2) to create a structured, accessibility. 6/ The Motion Control → The Tension: Auto playing GIFs or flashing content trigger vestibular overload, siezures and visual migraines. → The Fix: Use static images or user controlled play buttons. Protect your team's nervous systems. 7/ The Permanent Label → The Tension: Form field labels that disappear once you start typing strain working memory and executive function. → The Fix: Keep labels permanently visible above the text box to reduce cognitive load. 8/ The Invisible Reality → The Tension: We often design solely for static, highly visible needs. → The Fix: Recognize that many disabilities are invisible or temporary. Low friction content is high impact content and supports everyone. Stop making your audience fight your design to get to your message. Check your latest post or project. Are you planting barriers, or cultivating connection?

Emails aren’t landing pages. Agencies and freelancers are designing all image-based emails then creating “slices” of way-too-large files that aren’t sized correctly and plopping them in your ESP bc it’s easier to deliver. While some in B2C might get away with this, it’s still problematic. Accessibility and user experience is a big piece of this puzzle. When all of your text is embedded in an image, it isn’t searchable in your inbox. What do people with vision issues see? What if they need a screen reader? It’s better to have live text where possible. Do your colors create a “visual fuzzing effect for people with astigmatism called 'halation'" - so even though the contrast ratio is fine, that's why some have difficulty reading it? 🤔 There’s a lot when it comes to #emaildesign and it’s got nothing to do with how pretty it is. How does it perform? Does it include your audience or exclude them? Can your viewers see it? What happens if images are turned off by default? Work with #emailmarketers who get it and your brand will see better results. We took over from another agency sending all image emails because it was simply easier for them to deliver. However, the customers’ audience was an older demographic who preferred text over image (we found after a series of tests). After making changes, by end of year they had a 300% increase in contribution margin and repeat business/CLTV was at an all time high. Work with someone who values performance over prettiness and watch those metrics grow 🚀 #themoreyouknow #emailmarketing #accessibility #email

More than 50% of users now read emails in dark mode, yet most dispensaries don’t optimize for it. That means emails with bright backgrounds, illegible text, or broken images could be hurting engagement without you realizing it. → Where Most Dispensaries Get It Wrong X Ignoring Dark Mode Completely: Many email templates are designed for light mode only, making them hard to read in dark mode. X Using Images with White Backgrounds: A logo or product image with a white box around it looks amateur in a dark inbox. X Not Testing for Accessibility: If your emails are hard to read, customers won’t engage, especially those with visual impairments (hey that's slowly becoming me...) →How to Optimize for Dark Mode & Accessibility 1. Use Transparent PNGs for Logos & Images ✅ Upload logos and icons with transparent backgrounds so they blend seamlessly in both light and dark mode. 🚫 Avoid using solid white or black backgrounds that look bad when inverted. 2. Choose Colors That Adapt to Both Modes ✅ Stick with neutral colors (grays, blues, muted tones) that work in both settings. 🚫 Avoid pure black text on white backgrounds—it turns into blinding white on black when inverted. 3. Increase Contrast for Readability ✅ Use off-white text (#F5F5F5 instead of pure white) for better readability in dark mode. 🚫 Don’t rely on color alone for emphasis > Bold key points for better visibility. 4. Test Emails in Dark Mode Before Sending ✅ Use tools like Litmus or Email on Acid to preview your emails in different inbox settings. 🚫 Never assume your email looks the same everywhere > test it across various devices. → Try This & See the Difference Send a test email to your own Gmail, Outlook, and Apple Mail accounts. Check how it looks in both light and dark mode. If your branding, readability, or layout breaks, it’s time for a fix. Let’s make sure your emails work for every customer.

Here’s a high-performing welcome series we crafted for a wellness brand. Great email design is about structure first. Clear hierarchy guides the eye from headline to CTA. Consistent spacing reduces cognitive load and speeds scanning. Readable type and short lines improve comprehension on mobile. Strong contrast makes key messages easy to spot. Live text over image text protects deliverability and dark mode. Buttons look like buttons, with room to tap and a single action. One goal per screen keeps decisions simple. Predictable patterns build trust from email to email. Alt text, link styling, and accessible colors include every reader. Clean code and compressed images load fast and keep engagement high. When the structure is right, copy and offers work harder. That is how you lift clicks, conversions, and retention. #ecommerce #emailmarketing #emaildesign #flowium

Inaccessibility is all around us - but sometimes we’re doing it without even realising. I’ve made every one of these mistakes in the past. It wasn’t until someone took the time to point them out that I learned how inaccessible I was being - despite having good intentions. Here are 5 ways you might be being inaccessible, without even knowing: 1. Long LinkedIn headlines or overuse of emojis. Screen reader users hear your full headline every single time you post or comment. Every. Single. Time. Even when it’s truncated visually. That can mean hearing your full job title, emojis, and taglines multiple times before even reaching your post content. Try to keep your headline under 100 characters or two lines max - it makes a huge difference. 2. Long email signatures, HTTP links, and unlabelled images. Screen readers will read out every line - including things like “H-T-T-P-colon-slash-slash…” for full URLs. Images without alt text are completely invisible to screen reader users. Keep it short and simple, and use alt text wherever you can. Put only essential info in your email signature and put two dashes at the top to signal your signature is starting. And remember, it’s not your marketing tool. When was the last time you actually bought something from an email signature?! 3. Not running documents through the accessibility checker. You run a spell check, so why not an acceeeibility check? It’s a quick step, but it can flag things like heading structures, contrast issues, and missing image descriptions. It takes seconds and makes a big impact. 4. Using colour alone to convey meaning. For example, “I’ve marked the important cells in green” doesn’t help if someone can’t perceive colour easily. Neither does “I’ve shaded the cells for our RAG status”. Always add a label, icon, or another indicator. 5. Using all lowercase hashtags. #thisisnotaccessible - screen readers can’t parse where one word ends and another begins. Use camel case instead - #ThisIsAccessible - so screen readers pronounce the words correctly. Small changes, big impact. If you’ve made some of these mistakes before - welcome to the club. We learn, we improve, we do better. #DisabilityInclusion #Disability #DisabilityEmployment #Adjustments #DiversityAndInclusion #Content #A11y