Dark mode et emailing : comment adapter vos emails au mode sombre

Le dark mode : une évolution de l’expérience utilisateur

Nouvelle réflexion design, le dark mode permet de faire bouger les lignes de votre conception graphique. Au-delà de l’effet esthétique, son fond sombre et son texte clair présentent plusieurs intérêts :

• Un confort de lecture apprécié par de nombreux lecteurs, notamment dans un environnement peu éclairé, le matin au lever ou le soir au coucher ;
• Le respect d’une préférence d’affichage choisie par le lecteur sur l’ensemble de ses appareils : un email qui s’y adapte bien paraît plus soigné ;
• Une économie de batterie sur les écrans OLED, dont les pixels noirs sont éteints et ne consomment pas d’énergie.

Attention toutefois : le texte clair sur fond sombre n’est pas plus lisible pour tout le monde, et certaines personnes préfèrent le mode clair. L’enjeu n’est donc pas d’imposer le dark mode, mais de garantir que votre email reste lisible et fidèle à votre marque dans les deux modes, dans une démarche d’accessibilité et d’écoconception.

Comment les messageries affichent vos emails en dark mode

Bien que les clients de messagerie partagent un socle commun pour l’interprétation des emails, ils ne gèrent pas le dark mode de la même façon. Schématiquement, on observe trois comportements :

• Aucun changement : l’interface de la messagerie passe en sombre, mais votre email s’affiche tel que vous l’avez conçu.
• Inversion partielle : la messagerie assombrit les fonds clairs et éclaircit les textes sombres, mais laisse les zones déjà sombres intactes.
• Inversion complète : la messagerie inverse l’ensemble des couleurs, y compris celles que vous aviez choisies sombres, ce qui peut altérer fortement le rendu.

Notre Studio a testé ces comportements sur les principales messageries et applications :

Microsoft Outlook et Gmail, par exemple, retraduisent certaines couleurs, ce qui peut altérer l’ensemble visuel d’un message en mode sombre. Voici le détail du traitement technique selon les messageries :

Légende (données 2023) : Email Client : liste des clients de messagerie / Html Treatment : traitement du HTML en dark mode / @media, Data ogsc et Quirks : interprétation technique de la messagerie / BG colors : couleurs du fond

Côté code HTML, plusieurs leviers permettent de reprendre la main là où c’est possible : déclarer la compatibilité avec les deux modes (balises color-scheme), prévoir des styles dédiés via la media query @media (prefers-color-scheme: dark), respectée notamment par Apple Mail, ou utiliser les sélecteurs spécifiques reconnus par certaines versions d’Outlook. En revanche, les messageries qui inversent elles-mêmes les couleurs ignorent ces instructions : c’est là que les choix de design font la différence. Ces adaptations s’intègrent naturellement à une démarche de responsive design.

Les conseils de notre Studio pour adapter vos emails au dark mode

Adapter sa charte graphique email pour le mode sombre

La conception d’un email s’appuie sur votre charte graphique web pour garder une cohérence digitale. Toutefois, le mode sombre peut demander de revoir certains points : certaines associations de couleurs se marient mal avec le noir et peuvent rendre le contenu difficilement lisible. Il est donc utile de créer une palette colorimétrique spéciale dark mode.

Afin d’anticiper toute mauvaise surprise graphique, nous vous conseillons d’intégrer le dark mode dans votre démarche design globale et d’adapter votre colorimétrie en pastellisant ou en modifiant quelques couleurs. Évitez aussi le blanc pur et le noir pur pour les fonds et les textes : des teintes légèrement adoucies limitent les inversions brutales.

Adapter le format des images au dark mode

Lors du travail sur vos images, n’oubliez pas que le fond de l’email peut changer de couleur. Travaillez vos images, à commencer par votre logo, en format .png avec un fond transparent.

Ajoutez un léger contour clair autour de votre logo, voire un ombrage : il restera lisible quel que soit le fond, y compris sur Gmail et Outlook. Si certaines de vos images incluent des arrière-plans, veillez à ce qu’elles contiennent suffisamment de marge intérieure (padding) pour éviter toute juxtaposition surprenante avec le fond de l’email.

Petit point d’attention écoconception : le PNG transparent est souvent plus lourd qu’un JPEG, ce qui augmente le poids de votre message et son empreinte carbone. Compressez vos images et réservez ce format aux éléments qui en ont besoin, comme le logo et les pictogrammes.

Jouer avec les contrastes et tester

Pour créer des séparations et du rythme, travaillez vos blocs et sections en jouant avec les contrastes. Vous pourrez ainsi donner de la matière à votre email, bien structurer l’ergonomie de votre message et, in fine, gagner en lisibilité.

Enfin, testez systématiquement vos créations dans les deux modes avant envoi, sur les messageries les plus utilisées par vos contacts. Dans la plateforme Campaign by Dolist, l’aperçu du rendu de l’email en dark mode est d’ailleurs directement disponible dans le builder.