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

In dit artikel:

Meer dan vier op de vijf smartphonegebruikers hebben dark mode aanstaan, maar e-mailverzenders houden daar meestal weinig rekening mee: e-mails kunnen door e-mailclients achteraf worden aangepast, waardoor logo’s verdwijnen, tekst onleesbaar wordt en merkkleuren onbedoeld omklappen. Hoe veel ontvangers dit treft hangt af van de bron: Earthweb meldt ~82% dark mode-gebruik op smartphones, Litmus rapporteert dat rond 35% van e-mailopens in dark mode plaatsvinden — jouw lijst zit ergens tussen die waarden. Ondanks de impact bevatte volgens Sendview slechts 0,4% van de e-mails in 2020 speciale dark mode-code; dat steeg naar 11% in 2023, maar negen van de tien mails heeft nog steeds geen aanpassingen.

Wat technisch gebeurt: clients passen dark mode toe nadat de HTML is geladen en doen dat op verschillende manieren — van eenvoudige kleurinversie tot eigen restyling — waardoor je als afzender niet kunt afdwingen hoe een mail eruitziet. Veelvoorkomende problemen in de praktijk:
- Logo’s met een witte achtergrond (JPEG/PNG zonder transparantie) tonen een storend wit blok op donkere achtergronden.
- Witte tekst op donkere hero-afbeeldingen kan door de client naar zwart worden omgezet, waardoor die onleesbaar wordt tegen een donkere achtergrond.
- Knoppen en links kunnen kleur- en contrastverschillen vertonen tussen light en dark mode, met verlies van leesbaarheid of zichtbaarheid van cruciale elementen.

Praktische oplossingen die direct effect hebben:
- Gebruik PNG-logo’s met transparante achtergronden of laad twee logo-varianten en wissel ze met CSS.
- Vermijd pure #FFFFFF en #000000; kies voor off-white en near-black zodat automatische inversie minder schade veroorzaakt.
- Voeg twee meta-tags toe in de head van je e-mails om automatische kleurinversie door sommige clients te blokkeren.
- Voeg een prefers-color-scheme media query toe voor clients die custom dark styling ondersteunen; richt je aanpassingen vooral op die clients.
- Houd er rekening mee dat Gmail op iOS/Android prefers-color-scheme niet standaard ondersteunt; oplossingen zoals CSS blend modes bestaan maar zijn complex, dus zorg dat je templates ook zonder speciale aanpassingen leesbaar blijven in Gmail.

Testen is essentieel: stuur je meestgebruikte template naar een testadres, bekijk en screenshot op je telefoon in dark mode en gebruik, indien nodig, tools als Litmus of Email on Acid om renderen in veel clients/apparaten te controleren. Begin met één sleuteltemplate, implementeer de meta-tags en los de meest zichtbare problemen op — dat geeft vaak de grootste winst met beperkte inspanning.