Phones, dark mode and accessibility

Design as if every reader holds a phone in one hand and gives the email ten seconds. Every figure that can still be measured puts phones first or close to it.

The short version

• Phone first. Design at phone width, then let the computer version widen.
• One fluid column that works even when the mail app ignores phone-specific code.
• Body text 16 to 18 pixels, small print never under 13 to 14, and never stop people enlarging it.
• The first phone screen carries the headline and the main button.
• Dark mode: about a third of readers. Avoid pure white on pure black, give a dark logo a light outline, and keep words out of pictures.
• Accessible is the standard, not an extra: real headings, a description on every picture, links that say where they go, contrast of 4.5 to 1.
• Never let colour carry meaning alone. "Was £40, now £28", not just a red price.
• Look once on a real phone, in light and dark mode, before you send.

Where email is read

• Litmus, 2014, nearly 12 billion opens: 53% on phones, up from 8% in 2011.
• Litmus, 2021, almost 8 billion opens: phones 44.7%, webmail 36.3%, computers 19.1%.
• Litmus, September 2026: Apple's mail apps recorded 76.56% of tracked opens, Gmail 16.10%, Outlook 3.48%, Yahoo 2.35%.
• Ten seconds: the average time spent on an email in 2021, and 9.8 seconds on phones.

Since Apple's privacy changes in 2021, nobody can measure the phone share exactly, because Apple's opens no longer say whether they came from an iPhone or a Mac. But Apple's apps, mostly on iPhones, lead tracked opens.

On a phone

One fluid column. About 80% of mail apps understand code meant for phones. Outlook for Windows ignores it, and Gmail ignores it for addresses that aren't Gmail ones, a work address read in the Gmail app for example. So the layout must fit any screen on its own: one column up to 600 pixels wide, pictures that shrink, and rows that wrap into one column by themselves.

Text a phone can read, at the size the reader chooses. Body 16 to 18 pixels, small print 13 to 14 at least. Never switch off the reader's own text sizing: the accessibility standard (WCAG 2.2) asks that text can be enlarged to 200% without losing anything.

Targets for a thumb. Buttons at least 48 pixels tall and full width, with at least 8 pixels between any two links. The footer is where links crowd on a phone, so space them, and make the unsubscribe as easy to hit as the rest. For a local business, make the phone number a link the phone can dial: "Call us today" rings the office.

The first phone screen carries the point and the action. A phone shows the header, the headline and little more before the first scroll. Keep the header small, lead with the headline, and put the main button in that first screen. A picture taller than the screen pushes the action out of sight.

Short paragraphs, and links out for the long parts. One to three sentences each, a subhead every few paragraphs, and a link to a page for anything long.

Look at it on a real phone. A computer preview squeezed narrow isn't the same: fonts, text sizing and dark mode all differ on the device.

Dark mode

Of opens in Apple Mail and iOS 13 and 14, 25.4% were in dark mode in 2021; across Litmus's data, an average of 35% used it in 2022. Plan for a third of your readers.

In dark mode, the mail app makes its own version of your email, in one of three ways:

The same email must read well all three ways. Three habits do most of it without any special code:

• Colours that survive being flipped. Skip pure white on pure black: use an off-white and a near-black. Choose an accent colour that holds 4.5 to 1 against its label in both modes. Separate sections with space or a thin line, not just a faint tint, which an inverted email can erase.
• A logo that stands out on dark. A dark logo on a see-through background vanishes on a dark screen. Give it a thin light outline, or put it on its own light panel.
• No words in pictures. Mail apps recolour real text, never a picture. Dark words in a see-through picture disappear on a dark background, and a white picture with words on it becomes a glaring slab.

Where an app supports it (Apple Mail, Outlook for Mac, Outlook.com, the Outlook phone apps and Samsung's app, about 42% of apps), an email can carry its own dark colours. Gmail offers no way to, which is why the three habits matter more than any code.

Look once in dark mode: in Apple Mail, which uses your own dark colours, and in the Gmail app, which inverts everything.

Accessibility

Who it's for:

• About 1.3 billion people, 1 in 6, live with a significant disability (World Health Organization, 2023).
• At least 2.2 billion people have a vision impairment (WHO, 2026).
• About 1 in 12 men and 1 in 200 women are colour blind.
• In WebAIM's 2024 survey of screen-reader users, 91.3% use one on a phone, and 71.6% find their way through a page by its headings.

Where email stands. The Email Markup Consortium tested 443,585 emails sent between May 2024 and May 2025: 99.89% had serious or critical problems, and 21 emails, from two brands, passed every check. The most common faults:

Most of these live in the template, not in the words, so a template that gets them right fixes them for every email built from it.

The same work helps far more people than screen-reader users: someone with pictures off, someone in a hurry, someone in bright sun, and the mail app's own summary of your email.

What to do:

• Real headings, one main headline, in real text, never a picture of words.
• A description on every picture that says what it's there to say: "Our self-watering pot in sage green". For a linked picture, where it goes. For the logo, the business name. For a decoration, an empty description, so the screen reader skips it.
• Every link says where it goes: "Read the planting guide", never "Click here" or a row of "Read more".
• Contrast: at least 4.5 to 1 for text, 3 to 1 for large text and for the edge of a button. The usual failures are light-grey footer text, white text on a pale brand colour, and text laid over a photograph.
• Never let colour carry meaning alone. Underline links in body text. Show a sale price as "Was £40, now £28". Say "new" or "last few" in words.
• Text built for reading: left-aligned, a line height of 1.5 to 2, never justified, and capitals only for short labels.
• Motion that never harms: nothing flashes more than three times a second, and the message sits in the first frame of any animation.
• Plain words serve people with cognitive disabilities, low literacy or English as a second language, as much as anyone reading in ten seconds.

What the law asks. The European Accessibility Act has applied to services sold to consumers in the EU since 28 June 2025, including online shopping. Email isn't named, and whether marketing email falls under it isn't settled. Don't wait for the answer.

Before you send

• On a real phone: the headline and the button in the first screen, text you can read without zooming, buttons you can hit with a thumb.
• In dark mode: the logo visible, the text readable, no glaring white blocks.
• With pictures off: the message still there.
• With a screen reader's ears: headings, descriptions, and links that say where they go.

Doing it here

• Every email's preview switches between phone and computer width, so you can look at both before you send: How your emails are written.
• Every email is designed in your brand's colours and fonts, and every word is yours to change in the preview: Set up your brand.