Dark Mode and Accessible Email: The Design Checks Most Teams Skip

Here's how most emails get approved. Someone opens the test send on a big monitor, in light mode, in one email client. It looks lovely. Everyone nods. Send.

Then it lands on a phone in dark mode, and your charcoal logo disappears into a black background. Your "Shop now" button turns a colour nobody in brand would sign off on. And a subscriber using a screen reader hears "image, image, image, table, table, link, link" before giving up.

Same email. Three very different experiences. Only one of them made it into your sign-off process.

Dark mode and accessibility usually get treated as separate projects. One for the designer, one for "someday." We think they belong in the same checklist, because they share a root cause. You don't control how your email gets seen. The reader's device, settings and needs do.

Here's what to check, why it matters and how to fix it without rebuilding every template you own.

Part 1: Dark mode email design

What actually happens to your email in dark mode

Dark mode isn't one setting. Each email client applies its own rules, and they fall into three rough camps.

• No colour change. The app goes dark; your email stays exactly as you coded it. Gmail on desktop web and Yahoo Mail tend to behave this way. Your email can look like a floodlight in a dark room, but nothing breaks.
• Partial inversion. The client spots light backgrounds and darkens them, and flips dark text to light. Areas that are already dark get left alone. Outlook.com, the Outlook mobile apps and the Gmail app on Android usually land here.
• Full inversion. The client flips almost everything, including colours you set on purpose. The Gmail app on iOS and Outlook on Windows are the usual suspects. This is where brand colours go to have an identity crisis.

Apple Mail is its own story. By default it leaves most HTML emails alone. Tell it your email supports dark mode (more on that below) and it applies a partial inversion, plus any dark styles you've written.

Two warnings before we get to fixes:

• Clients change their dark mode behaviour with app updates. A template that behaved last quarter can misbehave this one. Test regularly, not once.
• You can't fully control dark mode. Your job is damage limitation. Design so that whatever the client does, the email stays readable and on brand enough.

The dark mode checks

1. Your logo survives a dark background

The number one dark mode casualty. A dark logo on a transparent PNG looks crisp on white and vanishes on black.

• Add a thin light outline or soft glow around dark logo elements. Invisible on white, a lifesaver on black.
• Or place the logo on a small light-coloured shape that's part of the image itself, so it carries its own background.
• If your brand has a light-on-dark logo version, you can swap it in for clients that support dark mode styles.

1. You're not using pure black and pure white

Some clients specifically target #000000 and #FFFFFF when they invert. Use close neighbours instead, like #111111 for text and #FEFEFE for backgrounds. Readers won't notice the difference. Some inversion rules will.

Bonus: pure white text on pure black is harsh on the eyes in dark mode anyway. Slightly softer shades read better.

1. No important text lives inside images

Clients don't invert images. So a banner with black text on a transparent background turns into black text on a dark grey background. Unreadable.

• Keep headlines, offers, dates and prices as live HTML text.
• If text must sit inside an image, give the image a solid background so it stays readable no matter what the client does around it.

This one also pays off in Part 2, so remember it.

1. Your buttons are real buttons

Image buttons don't adapt. Live-text buttons (a coloured table cell or padded link with real text) do. They also show up when images are blocked, and screen readers can read them.

Check your button colour in both modes. A brand colour that pops on white can sink into a dark background, or get inverted into something your designer will want to discuss at length.

1. Dividers and borders don't create mystery boxes

Coloured dividers and thin borders can turn into odd blocks or hard lines once inverted. Keep dividers subtle, or transparent where your builder allows. Check that no white "boxes" appear around images that had white backgrounds baked in.

1. You've told supporting clients that you support dark mode

If your team or developer edits template code, add these to the email's head:

html

<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">

Then use a prefers-color-scheme: dark media query to set your own dark colours for clients that honour it. Apple Mail is the big one, plus some Outlook versions. Gmail ignores your dark styles and applies its own logic, which is why the earlier checks matter so much.

Not coding your own templates? Fine. Checks 1 to 5 get you most of the way with zero code.

1. You've tested where it hurts

Don't test dark mode in the client that behaves nicely. Test where things go wrong.

• Gmail app on iOS (full inversion)
• Gmail app on Android (partial inversion)
• Outlook on Windows (full inversion in some versions)
• Apple Mail on iPhone with dark mode switched on

In South Africa, Android phones far outnumber iPhones, so don't sign off on an iPhone screenshot alone. Grab a colleague's Android phone and switch dark mode on. It takes two minutes.

Part 2: Accessible email

Why this isn't a niche concern

• The World Health Organisation estimates 1.3 billion people, about 16% of the global population, live with a significant disability.
• Around 1 in 12 men and 1 in 200 women have some form of colour blindness. If your list skews male, that's a meaningful slice of readers who might not see the difference between your red "sold out" and your green "in stock."
• Accessibility needs aren't only permanent. Reading on a cracked screen in bright sun, holding a baby in one arm or squinting without your glasses all count.

And the industry is doing badly. The Email Markup Consortium tested 376,348 marketing emails for its 2026 Email Accessibility Report. 99.88% had serious or critical accessibility defects. Only eight emails passed.

So the bar is low. That's good news. A few fixes put you ahead of almost everyone.

The accessibility checks

1. The email declares its language

Add a language attribute to the email's HTML tag, for example lang="en". Without it, a screen reader can guess wrong and read English text with the wrong accent and pronunciation rules. Sending in Afrikaans or isiZulu? Use the matching language code.

It's one of the most commonly missed fixes, and it takes seconds.

1. Layout tables are marked as layout

Most emails still use tables to build their layout. Screen readers can announce every table, row and cell, which turns your newsletter into a spreadsheet read aloud. Adding role="presentation" to layout tables tells assistive technology to skip the scaffolding and read the content.

Ask your platform or developer whether your templates already do this. Many modern builders do. Many old templates don't.

1. Alt text says something useful

Every image needs an alt attribute. What goes in it matters.

• Content images get a short description of what the image tells the reader. "Woman holding a phone showing a WhatsApp order update" beats "image1.jpg."
• Images with text in them get that text in the alt. If your banner says "50% off all plans until Friday," so does the alt text.
• Decorative images (spacers, flourishes, background textures) get an empty alt, written as alt="". Not missing. Empty. That tells screen readers to skip it.
• Don't start with "Image of." Screen readers already announce it's an image.

Good alt text also rescues you when images are blocked, which still happens in plenty of corporate inboxes.

1. Text has enough contrast

WCAG AA, the standard most accessibility rules point to, asks for a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text.

Where teams fail:

• Light grey body copy on white. Looks elegant. Fails.
• Footer text. Small and pale is a classic combination.
• Text over photos. Contrast changes across the image.
• Brand colours on buttons. Check the button text against the button colour, not just the button against the page.

Free contrast checkers take hex codes and give you a pass or fail in seconds. Use one on your template once, fix it, and every campaign benefits.

1. Colour isn't doing the job alone

If the only difference between two things is colour, some readers can't see the difference.

• Underline links in body copy. Colour alone doesn't mark them for everyone.
• Pair status colours with words or icons. "In stock" in green text, not just a green dot.
• In charts or infographics, label things directly instead of relying on a colour key.

1. Links tell people where they go

Screen reader users often jump from link to link to scan an email. Picture hearing "click here, click here, read more, learn more." Helpful, isn't it?

• Write link text that makes sense out of context. "Download the Black Friday send plan" beats "click here."
• Keep it unique. Five links all called "Learn more" might as well be one mystery.

1. Text is big enough, and taps are easy

• Body text at 14 to 16px minimum. Footers included.
• Left-align body copy. Centred paragraphs are harder to read, especially for people with dyslexia.
• Make buttons comfortable to tap. Around 44 by 44 pixels is a good target, with space between links so thumbs don't hit the wrong one.

1. The structure makes sense

• Use real headings in a logical order. Screen reader users navigate by headings the way sighted readers skim.
• Keep paragraphs short and one idea at a time. Good for accessibility, good for every reader on a phone.
• Go easy on emojis in subject lines and copy. Screen readers read their full names aloud. Three in a row becomes a sentence nobody asked for.

Where dark mode and accessibility collide

This is why we put them in one guide. Get one wrong, and you often break the other.

• Contrast changes in dark mode. A colour pair that passes 4.5:1 in light mode can fail once a client inverts it. Check contrast in both modes, especially on buttons.
• Text in images fails both tests. It ignores dark mode, screen readers can't read it, and it vanishes when images are blocked. Live text fixes all three.
• Live-text buttons win twice. They adapt to dark mode and screen readers can announce them properly.
• Transparent logos need alt text too. If your logo vanishes into a dark background and has no alt text, the brand simply isn't there.

A word on the law

South Africa has no specific accessibility law for marketing email yet. But if you sell to customers in the European Union, the European Accessibility Act has applied since 28 June 2025. It covers e-commerce and applies to businesses outside the EU that serve EU consumers. If you send to EU customers, accessibility is a compliance question, not a design preference. Ask your legal team where you stand.

Even without a legal push, it's the same logic as POPIA and the NCC Opt-Out Registry. Respecting your subscribers is good business.

The 10-minute pre-send checklist

Pin this next to your send button.

Dark mode

• Logo visible on a dark background
• No pure #000000 or #FFFFFF
• No key text locked inside images
• Buttons are live text and readable in both modes
• No strange boxes or borders after inversion
• Tested in Gmail iOS, Gmail Android and Outlook Windows

Accessibility

• Language attribute set
• Layout tables marked role="presentation"
• Useful alt text, with empty alt on decorative images
• Text contrast at 4.5:1 or better, in both modes
• Links underlined and descriptive
• Body text 14px or bigger, left-aligned
• Tap targets big enough for thumbs
• Plain-text version included

Most of these are template fixes. Do them once, properly, and every future campaign inherits them. That's the best return on 10 minutes you'll get this year.

Make it the default, not the exception

The teams that get this right don't run a heroic audit before every send. They build it into their templates, add a few lines to their QA checklist and test on the phones their customers actually use.

Want a hand checking your templates for dark mode and accessibility issues? Talk to the TouchBasePro team. We'll look at your email the way your subscribers see it, not just the way your monitor does.