Building Emails for Accessibility and Aesthetics

In this article

Picture this: you've spent hours crafting what looks like the perfect email. The colors pop, the imagery is stunning, and the layout feels engaging. You hit send to thousands of subscribers, only to discover that a significant portion of your audience can't actually engage with what you've created.

This scenario played out repeatedly during our recent Inbox on the Rocks email teardown, where lifecycle experts Lianna Patch, Jessa Moon, Sarah Gallardo, and Dillon Nuanes dissected real emails from companies like Claude, Bitly, and Charity:Water.

What became clear wasn't just that beautiful emails often fail basic accessibility tests—it's that accessible design choices consistently led to better overall user experiences and stronger visual hierarchy.

The reality is that accessibility and aesthetics aren't opposing forces. When you design emails that work for users with disabilities, screen readers, and various assistive technologies, you often end up with cleaner, more focused designs that perform better for everyone. The emails that impressed our panelists weren't just visually appealing—they were structurally sound, thoughtfully organized, and built to reach their entire audience.

Let's dig into the specific insights from these expert teardowns and explore how foundational accessibility principles can actually strengthen your email design rather than constrain it.

What makes emails accessible and beautiful

Structure creates a hierarchy that works

Source Really Good Emails

The Claude email succeeded because it used proper HTML structure throughout. The main headline established clear document hierarchy, with logical subheadings that created natural content breaks. This structure served the people reading the email, screen readers navigating by headings, and visual scanners looking for key information.

The Charity:Water email presented a different challenge. While the storytelling content resonated on an emotional level, the dense paragraphs without structural breaks created barriers for users who need visual breaks to process information effectively. The presentation style made it harder for users with cognitive differences, attention difficulties, or visual impairments to engage with what could have been compelling content.

Source Really Good Emails

What to do

Use heading tags (H1, H2, H3) to create a logical content hierarchy. Break up long paragraphs with subheadings, bullet points, or white space. Structure your content so users can scan and understand the main points even if they don't read every word.

What to avoid

Don't add ARIA labels or complex markup unless you understand their purpose. Standard HTML elements like proper headings, paragraphs, and lists provide solid accessibility foundations without additional complexity.

Color and contrast that serve function

The Bitly email showed a common mistake: using color alone to convey information.

Their map relied entirely on color differences to show which states had higher search volume, making the data meaningless for colorblind users or anyone viewing the email in grayscale.

Source Really Good Emails

What works

Use high contrast ratios (at least 4.5:1 for normal text, 3:1 for large text) to make content readable for everyone. Combine color with other visual cues like icons, patterns, or text labels when color carries meaning.

Testing approach

Check your color choices in dark mode and grayscale to ensure they remain functional. Tools like WebAIM's contrast checker can validate your color combinations before you send.

Smart image and alt text decisions

The Claude email handled images perfectly by marking decorative icons as decorative (no alt text needed) and providing meaningful descriptions for informational images. This approach reduces screen reader noise while ensuring users get essential information.

The Mad Muscles email missed opportunities with its intentionally blurred workout images. While the blurring might create urgency, it also prevents users from understanding what they'd unlock. Clear preview images with compelling alt text would have served both accessibility and conversion goals better.

Source: Mad Muscles submission

Best practices

Write alt text that describes the purpose and content of informational images. Mark decorative images like design elements or bullet icons as decorative so screen readers skip them. For complex images like charts or infographics, consider providing detailed descriptions in the email text itself.

What doesn't work

Don't write alt text that just describes what an image looks like ("picture of a man exercising"). Focus on what information the image conveys or what action it supports.

Technical foundations for success

Code quality and email client compatibility

The most accessible emails used clean, semantic HTML with proper paragraph tags, heading structure, and standard markup. This approach ensures consistent rendering across email clients and assistive technologies without relying on complex workarounds.

The Charity:Water email used VML (Vector Markup Language) which could cause screen readers to duplicate content, creating a frustrating experience for users who rely on assistive technology. These technical choices often happen at the template level but have direct user impact.

Technical priorities

Choose email builders or templates that generate clean HTML. Avoid proprietary markup languages or complex CSS that might not render consistently. When working with developers, prioritize semantic HTML structure over visual tricks.

Your recipients view emails in dozens of different contexts—slow internet connections, various devices, and different accessibility settings. Emails that work across these scenarios perform better for everyone.

The accessibility-first email design checklist

Based on the expert insights from our teardown, and federal accessibility standards that many organizations are required to follow, here are the practical steps you can implement immediately:

Quick wins for your next email:

Left-align body copy longer than two sentences to improve readability for everyone
Test your CTA button colors using a contrast checker tool—aim for at least 4.5:1 contrast ratio
Write descriptive alt text for images that convey information, but mark purely decorative images appropriately
Always preview your email with images blocked to ensure key content remains accessible

Deeper improvements that compound over time:

Implement proper heading structure (H1 for main topic, H2 for sections) to create logical flow
Design and test for dark mode from the beginning rather than as an afterthought
Choose live text over image-heavy designs whenever possible for better scalability
Create scannable content hierarchy with clear sections and white space

Advanced considerations for comprehensive accessibility:

Test your emails with actual screen reader software to understand the user experience
Consider cognitive load in every design decision—can users quickly understand what you're asking them to do?
Plan responsive design for multiple device breakpoints, not just desktop and mobile
Review your email platform's accessibility features and coding standards

The most important insight from our expert panel was that accessible emails aren't just more inclusive, they're more effective. When you remove barriers for users with disabilities, you often remove friction for all users, leading to better engagement and stronger performance metrics.

Building emails that work for everyone

The emails that impressed our expert panel shared a common thread: they prioritized user experience over flashy design elements. Claude's email earned praise not because it was visually stunning, but because it was thoughtfully structured and functionally accessible. The CTAs were clear, the content was scannable, and the technical foundation supported the message rather than competing with it.

This doesn't mean settling for boring emails. The most effective approach combines strong visual design with solid accessibility principles. High contrast colors make CTAs pop while meeting accessibility standards. Clear content hierarchy helps both sighted users to scan quickly and screen readers to navigate efficiently. Thoughtful image choices support your message without excluding users who can't see them.

As Sarah noted during the teardown, "Clarity is kindness." When your emails work seamlessly for users with disabilities, they work better for everyone. The extra effort spent on accessibility during design and development pays dividends in broader reach, better engagement, and stronger brand trust.

Ready to put these insights into practice? Customer.io's Design Studio includes built-in QA features that let you block images, test dark mode, and preview across devices, making it easier to catch accessibility issues before your emails reach your audience. The goal isn't perfection on the first try, but consistent improvement that makes your emails more inclusive and effective over time.