Outil gratuit
Votre courriel en mode sombre
Une bonne part des gens lisent leurs courriels en mode sombre, et chaque logiciel recolore les messages à sa façon. Collez votre signature ou votre infolettre : voyez ce que vos lecteurs voient.
Où trouver le HTML ? Mailchimp, Cyberimpact, Brevo et cie ont une option « Exporter en HTML » ou « Voir le code ». Pour une signature, utilisez « Copier le code HTML » de notre générateur de signature. Dans Gmail, « Afficher l'original » sur un message reçu montre aussi son code.
Signature reçue du générateur.
Votre code reste dans votre navigateur : il n'est envoyé à aucun serveur. Les aperçus sont isolés et n'exécutent aucun script ; seules les images sont chargées depuis leur adresse, comme dans un logiciel de courriel.
Tel que conçu.
Apple Mail, Outlook pour Mac, Gmail sur le Web : le message garde ses couleurs, sauf s'il prévoit lui-même un mode sombre.
Outlook.com, Outlook et Gmail pour Android, Outlook pour iPhone : fonds clairs assombris, textes foncés éclaircis ; le reste ne bouge pas.
Gmail pour iPhone, Outlook classique pour Windows : toutes les couleurs sont inversées, les fonds foncés deviennent clairs.
Ce que nous avons repéré
Une simulation : chaque logiciel a ses propres règles, qui changent avec ses mises à jour. Vérifiez toujours avec un vrai envoi.
Trois façons d'assombrir un courriel
Sans changement
Le message décide
Apple Mail et Outlook pour Mac laissent le message tel quel, sauf s'il déclare color-scheme et prévoit ses propres styles sombres avec @media (prefers-color-scheme: dark). Gmail sur le Web ne touche généralement pas aux messages.
Le seul cas où vous maîtrisez le résultat.
Inversion partielle
Seulement ce qui est clair
Les fonds clairs deviennent foncés et les textes foncés deviennent pâles. Les couleurs déjà foncées (un bouton marine, par exemple) restent en place.
Outlook.com, Outlook et Gmail sur Android, Outlook sur iPhone.
Inversion complète
Tout bascule
Chaque fond et chaque couleur de texte est inversé, les foncés compris : un bandeau marine devient bleu pâle. Les images, elles, ne bougent pas.
Gmail sur iPhone, Outlook classique pour Windows.
Comment fonctionne cette simulation
Votre HTML est lu par votre navigateur, puis réécrit quatre fois. Les couleurs des attributs style, des attributs bgcolor et color et des balises <style> sont recalculées d'après leur luminosité : un fond clair est assombri en gardant sa teinte, un texte foncé est éclairci. Nous n'appliquons pas un simple filtre CSS, parce qu'un filtre inverserait aussi les images, ce que les vrais logiciels de courriel ne font jamais. Pour l'aperçu « Sans changement », les règles sombres de votre message (prefers-color-scheme: dark) sont activées s'il les déclare.
La vérification du contraste lit les couleurs écrites sur les éléments eux-mêmes (styles en ligne et attributs), ce qui est la façon dont la plupart des infolettres sont construites. Les couleurs qui viennent seulement de classes dans une balise <style> apparaissent dans les aperçus, mais ne sont pas mesurées.
C'est une simulation : les logiciels de courriel ne publient pas leurs règles exactes et les ajustent avec le temps. Servez-vous-en pour repérer les problèmes, puis confirmez en vous envoyant un essai.
Les corrections fréquentes
Logo
Donnez-lui un contour ou un fond
Un logo foncé sur fond transparent disparaît sur un fond sombre. Ajoutez un mince contour blanc (2 à 3 pixels) autour des formes, ou placez le logo sur un rectangle blanc arrondi, dans l'image elle-même.
Un fond blanc intégré à l'image reste toujours visible, même en mode sombre.
Texte
Évitez le gris moyen
Le gris moyen (#888, #999) reste gris moyen une fois inversé : à peine lisible sur blanc, à peine lisible sur noir. En mode clair, préférez un gris plus foncé (#555 ou moins).
Même chose pour un texte fin en couleur.
Code
Déclarez votre mode sombre
Dans une infolettre, ajoutez <meta name="color-scheme" content="light dark"> et un bloc @media (prefers-color-scheme: dark) avec vos propres couleurs. Apple Mail s'en servira.
Impossible dans une signature : le logiciel de courriel retire ces balises.
