Email Design, Accessibility and Dark Mode (2026 Guide)

#01What layout works best?

#02How do you make email accessible?

Use the Web Content Accessibility Guidelines (WCAG) as your standard. For email, the most important points are:

1. Semantic structure. Use real headings (h1, h2 in the HTML your ESP generates) and paragraphs, not styled spans. Set lang on the HTML element.
2. Tables for layout only, with role="presentation" so screen readers do not announce them as data tables. Your ESP's template builder usually handles this; check the code of custom templates.
3. Alt text. Describe the meaning of informative images ("Chart: approval time fell from 5 days to 2"). Use empty alt for decorative images.
4. Contrast. At least 4.5:1 for normal text, 3:1 for large text, under WCAG.
5. Link text. "Download the AP close checklist", not "click here".
6. No text in images for important information.
7. Readable plain-text version for clients and readers who prefer it.
8. Motion. Avoid fast animated GIFs; keep any animation short and not essential.

Does the European Accessibility Act apply?

The European Accessibility Act has applied since 28 June 2025 to a range of consumer-facing products and services in the EU, including e-commerce services. Whether a particular marketing email falls in scope depends on what service you provide and to whom. B2B-only services are often outside the core scope, but many SaaS companies also serve small businesses and individuals. Treat WCAG-level email accessibility as a baseline and ask counsel about specific obligations.

#03How do you handle dark mode?

Email clients handle dark mode in three ways:

Practical rules:

• Transparent PNG logos with a light outline or a version that works on both dark and light backgrounds.
• Avoid pure black (#000) text on pure white (#FFF) assumptions; use near-black and off-white, which invert more gracefully.
• Use `prefers-color-scheme` media queries to supply dark-mode colours where supported, and test where they are not.
• Do not rely on background colour alone to convey meaning, such as a red warning box.
• Check buttons: a button that is dark blue on white can become invisible on a dark background if not styled carefully.

#04How do you avoid Gmail clipping?

Gmail clips messages when the HTML exceeds about 102KB and shows "[Message clipped] View entire message". Clipping can hide your footer, including the unsubscribe link and tracking pixel.

• Remove unused CSS and comments.
• Avoid pasting from word processors, which adds bloated markup.
• Keep newsletters focused; split very long issues.
• Check the HTML size in your ESP or by exporting.

#05How do you test before sending?

Create a small seed list of real devices and clients your audience uses. Check your ESP's client report to see the share of opens or clicks by client, treating Apple Mail opens with caution (lesson 15).

#06Worked example: Ledgerline

Ledgerline is a fictional accounts-payable software company. Figures are illustrative, not benchmarks.

Ledgerline's newsletter template uses a dark navy header image with white text, light grey body text on white, and image buttons. Customers on mobile dark mode report that the header and buttons disappear.

Walkthrough

1. Audit: contrast checker shows body text at 3.1:1 (fails). Buttons are images with no alt text. HTML is 118KB, so Gmail clips the footer.
2. Rebuild header: live text headline on a solid colour background, with a transparent logo that has a light outline.
3. Fix text: body text darkened to pass 4.5:1; size increased to 16px.
4. Buttons: bulletproof HTML buttons with descriptive text.
5. Alt text: charts get descriptive alt text summarising the data.
6. Size: unused CSS removed; HTML drops to 64KB.
7. Test: rendering across major clients, dark mode on three devices, VoiceOver read-through.
8. Result: clicks per delivered on mobile rise (illustrative), and the unsubscribe link is visible again in Gmail.

#07Common mistakes

• Key message baked into an image.
• Light grey text for "elegance".
• Image buttons with no fallback.
• Logos that vanish on dark backgrounds.
• Long newsletters that get clipped, hiding the unsubscribe link.

#08Try it yourself

Take your main template. Check contrast of every text colour, alt text on every image, HTML size, and appearance with images off and in dark mode on one device. Fix the two biggest issues and create a one-page template standard for your team.

#09Quick quiz

1. What contrast ratio does WCAG require for normal body text? Answer: At least 4.5:1.

2. What happens when Gmail clips an email? Answer: Content after about 102KB is hidden behind a "View entire message" link, which can hide the footer and unsubscribe.

3. What alt text should a decorative divider have? Answer: Empty alt text.

4. Name two dark-mode safeguards. Answer: Transparent logos with outlines, and avoiding meaning conveyed only by background colour (also media queries and testing).

#10What should you check before the next lesson?

• Master template passes contrast and alt-text checks.
• Dark mode and images-off tested.
• HTML size under the clipping limit.
• Template standard documented.

Previous: Copywriting and subject lines · Next: A/B testing that holds up

Or return to the Email Marketing for Marketers track.

Related: B2B newsletter strategy · AI writing, personalisation and AI inboxes · Monthly email marketing routine

#11Common questions

Does the European Accessibility Act apply to marketing email? The EAA has applied since 28 June 2025 to certain consumer-facing products and services, including e-commerce. Whether a specific email is in scope depends on your service, so check with counsel. Designing to WCAG is the safe default either way.

Can I stop email clients from changing my colours in dark mode? Not fully. Some clients fully invert colours. Design so the email works when colours change, and use dark-mode media queries where supported.

Why is my email cut off in Gmail? Gmail clips messages whose HTML is larger than about 102KB and shows a link to view the full message. Reduce code size and remove unused styles.

Should B2B emails be plain text or designed? Both have a place. Lightly designed or plain emails work well for personal, reply-seeking messages. Newsletters and announcements benefit from simple, accessible templates.