Outlook, dark mode and the pale button

To make an email hold up in Outlook and in dark mode: lay it out with tables and inline styles, give Outlook its own column code, tell mail apps the email supports both light and dark, and check that every button’s text reaches a 4.5:1 contrast ratio against its fill. Expect rounded buttons to show square in Outlook for Windows.

Why Outlook breaks layouts

Outlook for Windows renders email with a word processor’s layout engine rather than a browser’s. Modern layout tools such as flexbox and grid do not exist there, and many CSS properties are ignored. A layout that looks right in every browser can collapse into one long column, or spread wider than the screen.

The techniques that survive it are old and dependable:

• Tables for layout, marked role="presentation" so screen readers do not announce them as data tables.
• Inline styles for anything structural, because some clients drop or rewrite the <style> block.
• Conditional comments that only Outlook reads, holding fixed-width table cells for columns, while every other client gets fluid columns that stack on a phone.

<!--[if mso]>
<table role="presentation" width="600"><tr><td width="300" valign="top">
<![endif]-->
  ...first column...
<!--[if mso]></td><td width="300" valign="top"><![endif]-->
  ...second column...
<!--[if mso]></td></tr></table><![endif]-->

Dark mode comes in two families

Mail apps handle dark mode in two different ways, and an email has to cope with both:

• Apps that follow the email’s own instructions. Apple Mail and others honour a color-scheme declaration and dark-mode styles written into the email. You decide what the dark version looks like.
• Apps that recolour the email themselves. Outlook.com and the Windows Mail app apply their own colour inversion and ignore the email’s dark-mode styles. They mark the elements they changed, and an email can target those marks to keep its colours sensible.

Many templates handle the first family and forget the second, which is where a carefully chosen background turns muddy or a logo vanishes against a newly dark panel.

The pale button problem

Pick a soft brand colour for a button, put white text on it, and the call to action becomes hard to read. Contrast is measured as a ratio between the lighter and darker colour, from 1:1 (identical) to 21:1 (black on white). The accessibility standard most teams use asks for at least 4.5:1 for normal text.

The fix is rarely a new brand colour. It is usually the text colour on top of it.

What the Message Builder does for you

Every email the Message Builder produces is built with the techniques above:

• Layout. Table-based HTML with inline styles and Outlook conditional code, so columns hold up in Outlook and stack on phones.
• Dark mode, both families. The email declares that it supports light and dark, carries dark-mode styles for apps that follow them, and carries overrides for Outlook.com and Windows Mail, which force their own inversion.
• Readable buttons. If a button’s text does not reach 4.5:1 against its fill, the renderer replaces it with a dark or light text colour, whichever reads better. Your fill colour stays. It is also set on the button’s table cell, so clients that ignore other styling still show it.
• Readable links and body text. If link or body text falls below 4.5:1 against the email’s content background, it is darkened (or, on a dark background, lightened) along its own hue until it passes, so a pale brand link stays recognisably yours rather than turning into a generic blue.

One more detail: in dark mode, buttons are left alone on purpose. Forcing a dark-mode text colour onto a button would undo the contrast check above.

How to test an email before it goes out

1. Send a test to an Outlook for Windows account if any of your readers use one. Check that columns sit side by side and nothing is wider than the window.
2. Switch your phone to dark mode and open the same test. Look at the logo, every button, and any text on a coloured panel.
3. Open it in a webmail client in dark mode too, because webmail and phone apps often recolour differently.
4. Read every button aloud from arm’s length. If you have to lean in, so will your readers.

If something fails in one client only, fix the cause rather than the symptom. A logo that disappears in dark mode usually needs a version with a light outline or a solid background, not a different colour for the whole email.

The trade-offs we chose

• Square corners in Outlook. Rounded buttons render square in Outlook for Windows. The alternative is fragile drawing code that guesses widths. We chose layouts that hold over perfect corners.
• No promise of identical output. No renderer can make every client draw an email the same way. These techniques make failures rare and mild, not impossible.
• The preview is not a real client. The builder previews the HTML in a browser. Send a test to the mail apps your readers actually use, including one in dark mode.

A quick habit worth keeping: put your palest brand colour on a button and look at it before your list does. For keeping one template working across screen sizes, read Hide email blocks on mobile, keep one template.