Accessibility for email designers

Design emails for clarity, contrast and consistency. Layouts should remain readable with images off, on small screens, and at higher zoom levels.

Use readable typography

• Set body text to 14–16 px on desktop and at least 16 px on mobile.
• Use line height of 1.5–1.6 and include spacing between paragraphs and blocks.
• Choose simple, screen-friendly typefaces and specify system or web-safe fallbacks.
• Align paragraphs to the left. Avoid full justification to prevent gaps that affect readability.

Ensure colour and contrast meet standards

• Meet WCAG AA minimum contrast: 4.5:1 for normal text, 3:1 for large text (≥18.66 px regular or 14 px bold).
• Never rely on colour alone to convey meaning — pair it with labels, icons, patterns or shapes.
• Ensure links look like links – for example, underline them. Don't rely on colour alone.

Use adaptive layouts

• Design for mobile first – use single-column stacking and large, easy-to-tap areas.
• Maintain a balanced text-to-image ratio. Avoid emails that contain only images.
• Include key content (headings, dates, calls to action) as live text, not only in images.

Support images, icons and animation with context

• Choose images that still make sense if they're not displayed. Use brief captions or nearby text to explain them.
• Provide meaningful alternative (alt) text. Ask: What purpose does this image serve?
• Avoid fast flashing. Keep animations subtle and short.

Make buttons and links accessible

• Use a minimum touch target size of 44 x 44 px with sufficient padding.
• Ensure strong colour contrast between button text and background.
• Label buttons clearly — for example, use "Register now" or "Download the guide" instead of "Click here".

Maintain consistency and predictability

• Repeat layout patterns across emails (such as the order of sections, CTA placement and footer structure).
• Always include a clear unsubscribe option and a contact link in the footer.

WCAG-aligned quick reference

Perceivable

Make sure everyone can perceive your content:

• Provide text alternatives for images and other non-text content.
• Use strong colour contrast between text and background.
• Ensure content is usable if images are turned off.
• Support zooming and text reflow without loss of content or function.

Operable

Make content easy to navigate and use:

• Ensure all content works with a keyboard (no mouse needed).
• Use clear focus indicators and accessible link styles.
• Use large, easy-to-tap targets for links and buttons.
• Avoid flashing content that could trigger seizures.

Understandable

Help users understand and interact with content:

• Use a consistent, predictable layout and navigation.
• Write in plain language.
• Provide clear labels, instructions and error messages.

Robust

Ensure compatibility with current and future technologies:

• Use semantic HTML that communicates structure and meaning.
• Test content with screen readers and other assistive technologies.
• Offer a plain-text version where practical.

Sources