Een derde van je mails komt verkeerd aan: zo fix je het

Ruim 80% van de smartphonegebruikers heeft dark mode aanstaan. Toch bevat slechts een kleine minderheid van alle verstuurde e-mails ook maar één regel dark mode-code. Het gevolg: logo’s verdwijnen, tekst wordt onleesbaar, en merkkleuren slaan om naar iets wat jij nooit hebt goedgekeurd. Gelukkig zijn er altijd oplossingen. In dit artikel beschrijf ik wat er technisch gebeurt en wat je eraan kunt doen.

Wat dark mode met jouw e-mail doet

Dark mode klinkt eenvoudig: donkere achtergrond, lichte tekst. Maar wat een e-mailclient precies doet met jouw HTML verschilt per platform. En dat is precies het probleem. E-mailclients passen dark mode toe ná het laden van de e-mail, op HTML-niveau. Je kunt als afzender niet afdwingen hoe een client daarmee omgaat. Er zijn globaal drie scenario’s:

1. Volledige inversie. De client draait alle kleuren om. Wit wordt zwart, zwart wordt wit, en je logo met witte achtergrond krijgt ineens een zwarte doos eromheen. Dit is wat oudere Outlook-versies op Windows doen als je geen color-scheme-declaratie in je HTML hebt staan.
2. Gedeeltelijke inversie. Gmail op Android past dit toe: lichte achtergronden worden donker, maar afbeeldingen en een deel van de tekst blijven ongewijzigd. Dat klinkt beter, maar levert vaak visueel rommelige combinaties op.
3. Volledige controle via CSS. Apple Mail, iOS Mail, Outlook 2019 en nieuwer, Samsung Mail en Thunderbird ondersteunen allemaal @media (prefers-color-scheme: dark). Hier heb je als ontwikkelaar volledige grip op hoe de e-mail eruitziet in dark mode.

Elk van deze drie scenario’s kan tegelijk van toepassing zijn op jouw verzendlijst.

Hoeveel van je ontvangers ziet dit?

Hier zijn twee cijfers die je naast elkaar moet zien. Bijna 82% van de smartphonegebruikers heeft dark mode geactiveerd, volgens de onderzoeken van Earthweb. Dat gaat over smartphonegebruik in het algemeen. Voor e-mail specifiek ligt het lager: Litmus deelde in 2022 dat gemiddeld 35% van alle e-mailopens plaatsvond in dark mode. Dat is het meest recente e-mailspecifieke cijfer dat beschikbaar is.

Het verschil tussen die twee getallen is logisch. Niet iedereen die dark mode gebruikt op de telefoon, leest e-mail ook in dark mode. Sommige clients schakelen dark mode niet automatisch in voor de inbox, anderen wel. De werkelijkheid voor jouw verzendlijst ligt ergens tussen 35% en 82%. Geen van beide is een reden om niets te doen.

Negen op de tien e-mails heeft geen enkele dark mode-aanpassing

Uit een onderzoek van Sendview bevatte slechts 0,4% in 2020 van alle verstuurde e-mails dark mode-optimalisatiecode. In 2023 was dat gestegen naar 11%. Groei, maar nog altijd betekent dit dat negen op de tien e-mails geen enkele dark mode-aanpassing heeft.

De drie plekken waar het misgaat

• Je logo.

Een logo met transparante achtergrond werkt prima op lichte en donkere achtergronden. Maar veel logo’s worden aangeleverd als JPEG of als PNG met witte achtergrond. Op een donkere achtergrond levert dat een wit blok op. De oplossing: gebruik PNG met een transparante achtergrond als standaard, of laad twee versies in en wissel ze via CSS.

• Tekst op achtergrondafbeeldingen.

Witte tekst op een donkere hero-afbeelding ziet er in light mode prima uit. In dark mode kan de client die witte tekst omzetten naar zwart, tegen een inmiddels ook donker geworden achtergrond. Onleesbaar. Puur wit (#FFFFFF) en puur zwart (#000000) zijn de kleuren die door bijna alle clients worden omgekeerd, ook als je inline CSS gebruikt. Gebruik off-white en near-black als alternatief.

• CTA-knoppen.

Een paarse knop met witte tekst houdt in dark mode vaak zijn kleur, maar de tekst kan omslaan. Of andersom. Test dit altijd.

Zo ziet het er in de praktijk uit

Is dit herkenbaar? Onderstaande voorbeelden komen uit een gewone inbox, bekeken met dark mode aan. Geen uitzonderingen, geen randgevallen. Gewoon e-mails van organisaties die hun template onvoldoende hebben getest buiten light mode.

De volledige bodytekst is niet meer te lezen in dark mode.

In dit voorbeeld is de volledige bodytekst verdwenen tegen de zwarte achtergrond. Voor de ontvanger is er geen context meer. Waarom zou je op de knop klikken als je niet weet wat er wordt aangeboden? Zonder leesbare tekst vervalt de argumentatie die de klik rechtvaardigt. Het conversieverlies is hier niet een kwestie van smaak, maar van ontbrekende informatie.

De kleuren van een hyperlink verschillen in dark en light mode. Op light mode is de titel bovenaan de ‘duimpjes’ helemaal onzichtbaar geworden.

Dezelfde e-mail in dark mode en light mode. De bodytekst blijft leesbaar en de CTA-knop houdt zijn kleur. Op het eerste gezicht lijkt de dark mode-versie in dit voorbeeld mee te vallen. Maar twee details gaan mis.

De hyperlinkkleur wijkt in light mode af van dark mode, terwijl de donkergrijze achtergrond hetzelfde is. En onderaan verdwijnt de tekst “Wat vindt u van deze e-mail?” volledig. In dark mode nog zichtbaar, in light mode opgeslokt door de witte achtergrond. Een feedbackvraag die niemand leest, wordt nooit beantwoord.

Wat je technisch doet om dit alles te voorkomen

De belangrijkste stap is ook de eenvoudigste. Voeg twee meta-tags toe aan de <head> van elke e-mail:

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

Dit voorkomt volledige kleurinversie bij clients die dat anders automatisch doen. Eén toevoeging, direct effect op Outlook en meerdere andere clients.

Daarna voeg je een media query toe voor clients die custom dark mode-styling ondersteunen. Als voorbeeld:

@media (prefers-color-scheme: dark) {
.email-wrapper { background-color: #1a1a1a !important; }
.email-body { background-color: #242424 !important; }
.text-primary { color: #f0f0f0 !important; }
.cta-button { background-color: #ffffff !important; color: #000000 !important; }
}

Voor logo-wisseling:

@media (prefers-color-scheme: dark) {
.light-logo { display: none !important; }
.dark-logo { display: block !important; }
}

<img class="light-logo" src="logo-light.png" alt="Logo">
<img class="dark-logo" src="logo-dark.png" alt="Logo" style="display:none;">

Gmail op iOS en Android is een aparte categorie. Gmail ondersteunt prefers-color-scheme niet via de standaard methode. Er bestaat een workaround via CSS blend modes, maar die is bewerkelijk en heeft zijn eigen beperkingen.

Voor de meeste verzenders is het praktischer om te zorgen dat de e-mail ook zonder dark mode-optimalisatie leesbaar blijft in Gmail, en de media query-aanpassingen te richten op clients die het wel volledig ondersteunen.

Maak je eigen voorbeeld in drie minuten

Stuur je meest verstuurde template naar een testadres. Open hem op je telefoon met dark mode aan. Maak een screenshot. Grote kans dat je direct ziet wat er misgaat: een logo met witte blok eromheen, tekst die wegvalt tegen een donkere achtergrond, of een CTA-knop waarvan de tekst nauwelijks leesbaar is.

Dat screenshot is meteen het sterkste argument intern om hier tijd in te steken, beter dan welke statistiek ook. Wil je verder gaan dan alleen je eigen inbox, dan zijn er gratis tools waarmee je je HTML-e-mail direct in de browser test:

• Dark Mode Checker simuleert dark mode-rendering per client (Gmail Android, Gmail iOS, Outlook.com, Outlook Windows, Apple Mail) op basis van de werkelijke kleuralgoritmen per client.
• Postdrop is een e-maileditor met live preview in Gmail, Outlook, Apple Mail, Yahoo en dark mode. Je plakt je HTML erin en ziet direct het resultaat.
• Met Mailmodo Dark Mode Preview plak je je HTML of upload je een template en bekijkt hem direct in gesimuleerde dark mode.

Betaalde tools als Litmus en Email on Acid gaan verder: die renderen je e-mail in meer dan honderd echte client-en apparaatcombinaties. Zinvol als je regelmatig grote campagnes verstuurt.

Altijd testen, niet veronderstellen

Dark mode gedraagt zich anders per client, per versie en per apparaat. Wat werkt in Apple Mail en Outlook voor Mac, werkt niet per se in Gmail op iOS. Test minimaal in:

• Apple Mail op macOS.
• iOS Mail.
• Gmail op Android.
• Outlook op Windows.

Dat dekt de meest uiteenlopende rendermethoden.

Waar begin je?

Pak één template, je meest verstuurde, en bekijk hem in dark mode op je telefoon. Verdwijnt je logo? Slaat tekst om? Is de CTA nog leesbaar? Voeg daarna de twee meta-tags toe en publiceer een nieuwe versie. Dat is de minimale interventie met het meeste effect. En het kost geen ontwerpcyclus om te implementeren.