Email signature dark mode problems have one root cause: the signature was designed against a white page, and the reader’s app put it on a dark one. A dark logo drawn on a transparent background then sits dark-on-dark and disappears, and thin grey text loses its contrast. The reliable fix is to make the signature readable on both backgrounds, instead of hoping every app recolours it correctly.
This page explains what goes wrong with email signature dark mode, gives a contrast table you can check your own logo against, and ends with a test routine for Gmail, Outlook and Apple Mail using each vendor’s own menu names, read in October 2026. One thing we could not find: a vendor page describing exactly how Gmail or Outlook recolour a message body. So we describe symptoms you can see for yourself, not hidden behaviour.
Email signature dark mode: the short fix
- Logo: put it on a solid tile, or give a transparent logo a light outline, or use a mid-tone colour that reads on both.
- Text: keep body text at 4.5 to 1 against white and check it against dark as well.
- Test: send yourself a message and read it with the app in dark mode.
- Do not rely on: a dark-mode CSS block alone. Some apps ignore it.
Why logos vanish in email signature dark mode
A logo file is a picture with a background, even when the background is transparent. A transparent PNG with a black wordmark shows the page behind it. On white the contrast is excellent. On a dark page it is not.
We worked it out with the WCAG formula. A near-black logo (#111111) against emailfooter’s dark preview background (#131a28) is 1.08 to 1, which is invisible in practice. Microsoft’s help page says dark mode in Outlook gives the message window a black background instead of white, and against pure black the same logo scores 1.11 to 1. WCAG asks for 3 to 1 for the parts of a graphic needed to understand it (WCAG 1.4.11). The same page exempts logos only when the low contrast is essential to the brand, which a vanished wordmark is not.
Text has the same problem in reverse. Dark grey text that was comfortable on white may not hold up on a dark page, and the bright accent that looked lively may glare. Apple’s Human Interface Guidelines say dark palettes use dimmer backgrounds and brighter foregrounds, and are not simple inversions of the light ones (Apple’s Dark Mode guidelines).
A contrast table for your logo colour
Ratios below are ours, calculated with the WCAG formula. A logo needs at least 3 to 1 on each background to be dependably visible.
| Logo colour | On white | On dark (#131a28) | On black | Verdict |
|---|---|---|---|---|
| Near-black #111111 | 18.9 | 1.1 | 1.1 | Vanishes in dark mode |
| Navy #1e3a6e | 11.1 | 1.6 | 1.9 | Vanishes in dark mode |
| Near-white #f2f2f2 | 1.1 | 15.6 | 18.8 | Vanishes on white |
| Royal blue #3b5bdb | 5.7 | 3.1 | 3.7 | Reads on all three |
| Crimson #c92a2a | 5.5 | 3.2 | 3.9 | Reads on all three |
| Orange #e8590c | 3.6 | 4.9 | 5.9 | Reads on all three |
If your brand colour is near-black, navy or white, use one of the fixes below. If it is a mid-tone, you may not need to do anything.
How to fix a logo for email signature dark mode
Option 1: a solid tile behind the logo
Export the logo on a solid background, white or a brand colour, with a little padding. It looks like a small badge on any page. This is the most dependable fix, because it does not depend on the app doing anything.
The example below uses a solid tile in royal blue (#3b5bdb), one of the mid-tones from the table above.
|
A logo exported as a solid tile in a mid-tone colour, so it stays a visible badge on a light or dark page. The company and person are made up.
Option 2: a transparent logo with an outline
Apple’s guidelines make the same point about icons: an icon of a full moon may need a subtle dark outline on a light background but none on a dark one, and if an asset looks good in only one appearance, modify it or create separate assets. For a signature, add a thin light outline or glow to a dark wordmark in your image editor. It must stay visible on a white page too, so keep it subtle and check both.
Option 3: separate light and dark logos
emailfooter supports an optional dark-mode logo. The signature includes both images and a small style block that swaps them when the reader’s app reports a dark colour scheme. This is a progressive enhancement.
The W3C media queries draft defines the prefers-color-scheme feature with the values light and dark (Media Queries Level 5, a Working Draft dated 19 February 2026), but Google’s Gmail CSS page lists only width, orientation and resolution queries (Gmail CSS support), and emailfooter’s own install tip for classic Outlook says Outlook for Windows ignores dark-mode colours. So the light logo must still be acceptable on a dark page, because that is what those readers will get.
Option 4: pick a mid-tone
For email signature dark mode, a logo in a colour that clears 3 to 1 on white and on dark, like several in the table, may need no change at all.
Text and icons in email signature dark mode
- Body text: emailfooter’s dark preview uses #a4b0c4 on #131a28, about 8 to 1, and white-ish names at about 15.9 to 1. Apple’s guidelines ask for a contrast ratio of no less than 4.5 to 1, and suggest 7 to 1 for custom colours in small text. Follow the 4.5 minimum and aim higher for small print.
- Accent colour: a bright accent can look fine on a dark page and weak on white, or the reverse. Check it on both. Our design article has the contrast figures for the 24 themes.
- Social icons: coloured icons can lose contrast too. emailfooter uses a lighter icon version for dark mode where the reader’s app supports it.
- Photos: a photo with a white background shows as a white rectangle on a dark page. Use a photo with a neutral or transparent background, or crop it tightly.
A test routine for email signature dark mode
To test email signature dark mode, send yourself the signature in a real message and read it in each app. Do not trust a preview alone.
- Gmail on a computer. Click the gear icon, find Theme under Quick settings, click View all, choose Dark and Save.
- Gmail on Android. Tap Menu, Settings, General settings, Theme, and choose Dark. Google’s page says dark theme needs Android 10 or later (Gmail Help).
- Outlook. Select Settings, General, Appearance, and under Dark mode choose Dark. Microsoft’s page says the Turn on the lights button shows the original message formatting, and the Toggle light background and Toggle dark background buttons switch a message window between white and black (Microsoft Support). Use them to compare.
- Apple Mail on a Mac. Set Appearance to Dark, then open Mail, Settings, Viewing. The Use dark backgrounds for messages option is available only if Appearance is Dark, and View, Message, Show with Light Background flips one message to light (Apple Support).
For each app, look at five things: the logo, the name, the grey body lines, the icons and the divider. Note anything under about 3 to 1 contrast and fix that first. Then check the same message in the light theme, to be sure the fix did not break it. The HTML email signature article covers the code behind a dark-mode block.
Keeping email signature dark mode fixes consistent across a team
A logo fix only works if everyone uses it, and a team is where email signature dark mode problems multiply. With emailfooter, the company admin sets the logo, an optional dark logo and the colour roles for light and dark once, and the editor previews both. Employees install the signature by following the steps for their mail app. It does not push signatures into mailboxes, and it cannot make an app honour a dark-mode block it ignores.
Frequently asked questions
Why does my email signature look wrong in dark mode?
The signature was designed for a white page, and a dark page changes the contrast. A dark logo on a transparent background and thin grey text are the usual casualties.
How do I make my logo show in dark mode?
Put it on a solid tile, add a light outline to a transparent logo, or use a mid-tone colour that clears 3 to 1 on both white and dark.
Does Gmail support email signature dark mode?
Gmail has a dark theme (Settings, Theme, View all, Dark). Google’s CSS support page does not list a colour-scheme media query, so design the signature to read well without one.
Can I have a separate dark mode logo?
Yes, where your tool supports it, and emailfooter does. Apps that ignore the swap will show the light logo, so make that acceptable on dark.
How do I test email signature dark mode?
Send a message to yourself and read it in Gmail, Outlook and Apple Mail with each app set to dark. Compare against the light view.
Keep reading
- Email signature blurry? The 2x export method and the pixel pairs to use: Email signature blurry or a pixelated logo? See the causes in one table, exact display versus file pixel pairs, and which image formats stay sharp.
- Accessible email signature: alt text, contrast and screen-reader order: An accessible email signature needs readable colours, useful alt text and clear links. A checklist mapped to WCAG success criteria, with contrast numbers.
- HTML email signature: the code that survives Gmail and Outlook: An HTML email signature skeleton built from tables and inline styles, the CSS Gmail and Outlook ignore, and what each vendor’s own pages say about it.
Make every signature in your company match
emailfooter is a free WordPress plugin. You design the signature once, and each person adds their own details and installs it in their mail app. Prefer not to run a website? emailfooter Managed is the same software, hosted for you.