Inversion des couleurs dans les e-mails : Pourquoi est-ce important

Dans un monde où la concurrence est forte, les utilisateurs sont de plus en plus exigeants envers les entreprises auprès desquelles ils font des achats. Les détails sont donc cruciaux, surtout lorsqu'ils influent sur la manière dont le contenu est perçu. Si le texte n'est pas clairement visible, les destinataires ne prendront pas la peine de lire votre e-mail. L'adaptation des e-mails aux écrans des utilisateurs accroît les chances d'attirer leur attention et de les convertir.

Dans cet article, nous expliquerons le fonctionnement de l'inversion des couleurs dans les e-mails et comment configurer correctement le passage en mode sombre.

Qu'est-ce que le mode sombre dans les campagnes d'e-mails

Les clients de messagerie disposent d'une fonctionnalité de mode sombre - une inversion automatique des couleurs dans les e-mails lorsque l'utilisateur bascule son écran en mode nuit. Le fond clair de l'e-mail est converti en fond sombre, tandis que le texte de l'e-mail et les autres éléments adoptent des tons clairs.

Il est erroné de penser que l'inversion des couleurs consiste en un changement complet vers d'autres couleurs. En réalité, il s'agit simplement d'un changement de teintes. La couleur d'origine devient plus contrastée pour être bien lisible dans la version sombre. Autrement dit, le bleu ne se transformera pas en jaune et vice versa.

Les clients de messagerie qui prennent en charge le mode sombre.

Quelles sont les différentes options d'inversion des couleurs dans les e-mails

Les services d'e-mails peuvent inverser les couleurs selon leurs propres règles ou ne rien changer lors du passage en mode sombre.

• Aucun changement dans le thème sombre : les e-mails restent tels qu'ils ont été conçus initialement.

• Inversion partielle des couleurs : le service de messagerie reconnaît automatiquement les éléments de l'e-mail où le fond est clair et les change en fond sombre. Les blocs avec des couleurs initialement noires, gris foncé et autres tons sombres ne seront pas modifiés.

• Inversion complète des couleurs : tous les éléments de l'e-mail, qu'ils soient clairs ou foncés, sont adaptés. L'e-mail est entièrement transformé pour le mode nuit et devient plus confortable à lire.

Pourquoi adapter les e-mails au mode sombre est-il nécessaire

L'adaptation au mode sombre n'est pas toujours une solution simple, nécessitant des ressources telles que du temps et des connaissances en codage. De plus, les fournisseurs de messagerie changent parfois les règles du mode sombre. Par conséquent, si vous décidez de passer du "côté sombre", vous devrez toujours suivre leurs évolutions.

Avantages de l'adaptation des e-mails au mode sombre

Adaptation des e-mails pour le mode sombre sans code

Voici quelques astuces de conception pour adapter les e-mails au thème sombre.

1. Choisissez des couleurs de conception et de texte universelles qui conviennent à la fois au mode clair et au mode sombre.

2. Créez un e-mail avec un fond transparent pour éviter tout contraste lors du passage en mode sombre.

3. Intégrez le logo et les autres éléments de marque sous forme d'images sans fond au format PNG. Sinon, lors de l'inversion des couleurs, cela peut entraîner ce qui suit :

L'arrière-plan opaque du logo contraste avec l'arrière-plan noir en mode sombre

4. Ajoutez une lueur ou un contour aux éléments de couleur sombre pour les rendre visibles sur un fond sombre après inversion. Appliquez la même approche aux boutons dans l'e-mail, qui doivent être les plus visibles pour assurer des conversions réussies.

Exemple de boutons se fondant dans l'arrière-plan de l'e-mail après inversion

5. Concevez l'e-mail directement avec des couleurs sombres si ce style convient à votre marque.

Inversion dans les emails via les requêtes multimédias et les balises méta

L'utilisation de code est nécessaire pour inverser correctement et de manière prévisible les couleurs dans les e-mails. Des balises méta et des requêtes multimédias sont ajoutées dans la partie du code de l'e-mail pour contrôler le style de l'e-mail dans les thèmes sombres et clairs.

Comment configurer l'inversion des couleurs

Indiquez en HTML que vos e-mails doivent désormais changer en mode nuit à l'aide des balises : supported-color-schemes et color-scheme.

Pour les clients de messagerie sans prise en charge des requêtes multimédias :

<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">

Avec des requêtes multimédias :

<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<style>
      /* Normal styles */
      @media (prefers-color-scheme: dark) {
            /* Dark mode styles */
      }
</style>

Réglage des couleurs

Exemple. Supposons qu'il y ait un e-mail avec un fond blanc et des boutons bleus qui ne doivent pas changer de couleur en mode nuit. Le code de configuration sera le suivant :

<style>
      .normal {
            background-color: white;
            color: blue;
      }
      .themed {
            color: blue;
      }
      @media (prefers-color-scheme: dark) {
            .themed {
                  background-color: white;
            }
      }
      @media (prefers-color-scheme: light) {
            .themed {
                  background-color: black;
            }
      }
</style>

Remplacement des images lors du passage en mode sombre

<style>
      :root {
            color-scheme: light dark;
            supported-color-schemes: light dark;
      }
      @media (prefers-color-scheme: dark) {
            .lightimage {
                  display: none !important;
            }
            .darkimageWrapper,
            .darkimage {
                  display: block !important;
            }
      }
</style>

Ensuite, nous utilisons à l'intérieur de

. Nous définissons ici les attributs : largeur et hauteur, et ajoutons class="lightimage" pour masquer l'image en mode sombre.

Nous enveloppons l'image sombre dans une balise

dans le HTML. Ensuite, nous ajoutons class="darkimagewrapper" au

pour l'afficher en mode sombre, et nous utilisons mso-hide: all pour supprimer le style automatique (utilisé dans les versions obsolètes d'Outlook) et ajoutons display:none. Ensuite, nous configurons l'image avec class="darkimage" et style="display:none;"

<td>
      <img src="lightimage.png" width="600" height="auto" style="display: block; height: auto;" class="lightimage">
      <div class="darkimageWrapper" style="mso-hide: all; display: none">
            <img src="darkimage.png" width="600" class="darkimage" style="display: none;">
      </div>
</td>

Invitez-vous à vous abonner à notre newsletter pour obtenir la version complète du guide.

Résumé

Lorsque le mode sombre est activé sur un téléphone ou un ordinateur, certains clients de messagerie ajustent les couleurs des e-mails pour des nuances moins contrastées. Cela rend les e-mails plus agréables pour les yeux.

Les clients de messagerie prennent en charge une inversion partielle des couleurs en changeant les zones lumineuses et le texte de l'e-mail en couleur sombre. Ils prennent également en charge une inversion complète lorsque même les teintes initialement sombres deviennent différentes.

Les e-mails en mode sombre s'adaptent sans code en utilisant un fond transparent pour le texte, les images, en mettant en surbrillance le logo et autres éléments de l'e-mail. Ils sont également configurés en choisissant des couleurs qui ont fière allure à la fois sur fond clair et foncé. Une autre option pour configurer l'inversion consiste à utiliser des requêtes multimédias et des balises méta dans le code de l'e-mail.