Accessible HTML email: structure, contrast, and the screen-reader test
Accessibility and deliverability are quietly the same skill. Semantic structure, alt text, and 4.5:1 contrast help filters as much as they help readers.
AccessibilityHTML EmailDesign
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
Skeleton with accessibility hintshtml
<!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.
Dark mode hintcss
@media (prefers-color-scheme: dark) {
.body { background: #0a0a0a !important; color: #f5f5f5 !important; }
.logo-light { display: none; }
.logo-dark { display: block !important; }
}Frequently asked questions
Keep reading