Aperçu e-mail en mode sombre

Trois comportements, pas un seul mode sombre

Sur un site web, c’est vous qui décidez de l’aspect du mode sombre. Dans un e-mail, c’est le programme de lecture qui décide pour vous et chaque famille de programmes s’y prend à sa façon.

Un même message a donc quatre aspects : l’original clair et ces trois-là. La page montre les quatre en largeur d’ordinateur ou de téléphone.

Comment les aperçus sont produits

L’outil réécrit chaque couleur qu’il trouve dans votre HTML, qu’elle soit dans un attribut style en ligne, dans un bloc <style> ou dans un ancien attribut comme bgcolor. Chaque couleur est convertie en teinte, saturation et luminosité. La teinte reste et la luminosité change.

• Inversion partielle : un fond dont la luminance relative dépasse 0,35 devient sombre. Le texte et les bordures de la moitié foncée de l’échelle deviennent clairs. Tout le reste est laissé tel quel.
• Inversion complète : la luminosité est reflétée pour chaque couleur, si bien que le blanc devient presque noir et le noir presque blanc.
• Aucun changement : rien n’est réécrit. Si le message déclare color-scheme avec dark, ses règles @media (prefers-color-scheme: dark) sont activées. Un message qui ne définit aucune couleur reçoit le fond sombre par défaut de l’application.

Les règles écrites pour Outlook.com avec les sélecteurs [data-ogsc] et [data-ogsb] sont appliquées dans l’aperçu partiel. Chaque aperçu s’exécute dans un cadre isolé où les scripts ne peuvent pas s’exécuter.

Ce que signifient les constats

Contraste insuffisant

Dans chaque version, l’outil associe chaque morceau de texte visible au fond le plus proche derrière lui et calcule le rapport de contraste. Les paires sous 4,5:1 sont listées, les pires d’abord. Sous 3:1, le mode est marqué en erreur. Le texte de pré-en-tête caché est ignoré.

Texte gris moyen

Un gris peu saturé dont la luminosité se situe entre 45 et 70 pour cent est au milieu de l’échelle. Inversez-le et vous obtenez presque le même gris, mais maintenant sur le fond opposé. Utilisez #555555 ou plus foncé pour le texte secondaire.

Logo foncé sur fond transparent

L’outil charge jusqu’à 15 images et inspecte leurs pixels. Quand la plupart des pixels opaques sont très foncés et que les bords sont transparents, le logo va se fondre dans un fond sombre. Une image sur fond blanc opaque est signalée aussi, car elle s’affichera comme une boîte blanche.

Transparence à vérifier

Le serveur de l’image n’a pas permis à un autre site de lire ses pixels. Vous devrez regarder vous-même les aperçus sombres.

Réglages du mode sombre

Indique si le message déclare la prise en charge du mode sombre et s’il fournit des couleurs sombres. Déclarer la prise en charge sans fournir de couleurs est pire que ne rien déclarer.

Images et texte

Un message de moins de 120 caractères de vrai texte est surtout fait d’images et le texte dans les images ne s’adapte jamais. Les attributs alt manquants sont comptés.

Des correctifs qui tiennent dans toutes les applications

Commencez par les choix qui ne demandent aucun code. Utilisez des paires fortes, c’est-à-dire un texte très foncé sur un fond très clair ou l’inverse, car ce sont les tons moyens que l’inversion abîme. Donnez à un logo foncé un contour blanc de deux ou trois pixels d’épaisseur, ou placez-le sur une forme arrondie blanche à l’intérieur du fichier image. Gardez les mots en texte HTML.

Pour une newsletter, vous pouvez ensuite ajouter vos propres styles sombres pour les applications qui les respectent :

<meta name="color-scheme" content="light dark">
<style>
  :root { color-scheme: light dark; }
  @media (prefers-color-scheme: dark) {
    .card { background-color: #1e1e1e !important; }
    .body-text { color: #f2f2f2 !important; }
  }
</style>

Une signature n’a pas cette option. L’éditeur où vous la collez supprime <meta> et <style>, ce qui vous laisse des couleurs franches et un logo qui fonctionne sur les deux fonds. Notre créateur de signature e-mail peut envoyer son résultat directement vers cette page.