Accessible HTML email: structure, contrast, and testing
Create accessible email with semantic structure, readable contrast, useful alternative text, and production-like client testing.
Spam filters and screen readers want the same things from your HTML email: clear structure, real text, meaningful alt attributes, and contrast that humans can read. Designing for accessibility is the cheapest deliverability work you'll do all year — and it earns you customers your competitors quietly miss.
Structure
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>April newsletter</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<table role="presentation" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td align="center">
<h1 style="font-size:24px;color:#0a0a0a;">Welcome back</h1>
<p style="font-size:16px;color:#1a1a1a;line-height:1.5;">
Real text here, not an image of text.
</p>
</td>
</tr>
</table>
</body>
</html>Alt text rules
- Informational image: describe the content.
alt='Bar chart showing 40% growth'. - Functional image (button): describe the action.
alt='Activate account'. - Decorative image (divider, spacer): use empty alt.
alt=''. - Never use
alt='image'or filenames — that's noise to screen readers.
Contrast
| Text size | Minimum ratio (AA) | Example pass |
|---|---|---|
| Body (≤18px) | 4.5:1 | #1a1a1a on #ffffff = 16:1 |
| Large (≥18px bold or ≥24px regular) | 3:1 | #666666 on #ffffff = 5.7:1 |
| UI components (buttons, borders) | 3:1 | Button border at #555555 |
Dark mode considerations
Apple Mail and Outlook auto-invert some colors in dark mode, often badly. Use the prefers-color-scheme media query to provide explicit dark-mode styles, and test logos against dark backgrounds — black-on-transparent logos vanish.
Run the final sent MIME message through a production-like test, not only the template preview. ESP link wrapping, footer injection, tracking pixels, and image hosting can change contrast, alt text behavior, and the plain-text fallback after your design system exports the email.
@media (prefers-color-scheme: dark) {
.body { background: #0a0a0a !important; color: #f5f5f5 !important; }
.logo-light { display: none; }
.logo-dark { display: block !important; }
}Frequently asked questions
Production accessibility check
- 01
Read without images
Confirm the purpose, hierarchy, and calls to action remain understandable.
- 02
Navigate by keyboard and screen reader
Check link names, reading order, landmarks, and hidden preheader behavior.
- 03
Inspect the final MIME message
Verify text and HTML alternatives after the sending platform rewrites the message.
Use the header analyzer for structure evidence and a full deliverability test for the final sent message.
Apply the findings from Accessible HTML email: structure and contrast with the deliverability testing workflow, then use the relevant WillItInbox product workflow to collect current evidence.
Last updated June 13, 2026.
Sources reviewed
- Web Content Accessibility Guidelines 2.2(standard)
Factual review: June 13, 2026 by WillItInbox Editorial.
Keep reading