Gérer efficacement le dark mode dans les emails

À l’heure actuelle, la majorité des environnements dans lesquels des emails sont lues (client emails, webmail et applications mobiles) disposent d’un dark mode. Quasiment tous les destinataires ont la possibilité de choisir entre un mode « clair » (light, avec typo sombre sur fond blanc) et un mode « sombre » ou « nuit » (fond foncé, typo claire).

Il est important de rappeler que les environnements d’affichage en mode “clair” restent les plus représentatifs sur le marché. Il faut donc chercher à optimiser l’affichage en dark mode sans altérer la version classique.

L'application Gmail (disponible sur mobile) peut se paramétrer en mode clair et sombre. En fonction du mode activé, l’affichage des emails sera différent : les couleurs varient.

En mobile, l'application Gmail modifie les codes couleurs des éléments (texte, couleur de fond, bouton, etc.) du sombre vers le clair et du clair vers le sombre.

A contrario, si on ouvre Gmail dans un navigateur (on parle alors du webmail), alors seule l’interface de la messagerie change. Autrement dit, le contenu des emails en dark mode reste identique au mode clair : il n’y a pas d’impact.

Que ce soit sur un environnement desktop ou mobile, l’application Outlook Mac modifie les codes couleur des éléments (texte, couleur de fond, bouton, etc.) du sombre vers le clair et du clair vers le sombre.

Les codes couleurs s’inversent selon leur niveau de contraste en dark mode.
Au plus la couleur est constatée en mode clair, au plus elle tendra à s’inverser en dark mode vers une couleur sombre: sur Gmail, le blanc #FFFFFF s’inverse en #202124.

Les textes vont également se contraster selon leur code couleur hexadécimal.

L’affichage des images est identique entre le mode clair et le dark mode. Lorsque cela est possible, détourez les images qui possèdent un fond de couleur afin que celui-ci n’apparaisse pas en darkmode.

L’affichage des logos, des icônes ou pictogrammes est identique entre le mode clair et le dark mode. Lorsque l’affichage en dark mode n’est pas optimal (logo ou icône non visible), ajoutez soit un fond de couleur, soit un contour : le fond ne sera pas visible dans le mode clair (fond de couleur blanche sur un email blanc par exemple) et il permet de faire ressortir l’icône en dark mode.

Couleur par couleur, Outlook 2019 et l’application Gmail dans les cas explicités ci-dessus vont donc aller chercher la valeur opposée lors du passage en dark mode. Seuls les codes couleurs sont touchés, ce qui peut poser des problèmes de lisibilité et de contraste par rapport à vos images (qui, elles, ne sont pas impactées).

Il est possible d’optimiser les images d’arrière-plan en phase de conception design pour maximiser en dark mode la lisibilité des contenus qui lui sont superposés (notamment lorsqu’il y a des textes clairs sur des images foncées ou bien des textes foncés sur des images claires).

Pourquoi faut-il anticiper cela ? Comme évoqué plus haut, les images ne varient pas en darkmode mais la couleur des textes oui. Ainsi, en mode clair, un texte foncé sur une image claire deviendra en dark mode un texte clair sur une image claire : le texte risque de ne pas être lisible.

Comment anticiper un bon affichage lors de la conception ? Intégrez un dégradé d’opacité dans votre image. Ce dégradé améliore légèrement la lisibilité en mode clair et il permet surtout une lisibilité accrue en dark mode. 

Une fois l’image insérée dans l’Email Builder, il ne vous reste plus qu’à renseigner une couleur de fond (derrière l’image). Par exemple, en intégrant une couleur de fond claire dans le fond de l’arrière-plan, celle-ci deviendra foncée en dark mode.

Les messageries ont toutes une gestion différente du dark mode. Elles interprètent le code HTML de vos emails de façon variée et évolutive. Il n’existe donc pas de réponse unique à la compatibilité avec le dark mode mais il s’agit plutôt d’appliquer un ensemble de bonnes pratiques.

Nous conseillons fortement de toujours vérifier les affichages de vos emails en messagerie, si possible en conditions réelles : dans les messageries via un BAT envoyé depuis l’Email Builder et via un BAT envoyé depuis votre outil de routage.