Analyse

Décryptage de la newsletter Aigle : structure, dark mode et accessibilité

Comment Aigle gère le dark mode dans ses campagnes emailing, et pourquoi leur accessibilité est un modèle à suivre pour les marques outdoor.

Par Optimailer17 mai 20267 min de lecture

Une marque outdoor face au dark mode

Le dark mode s'est imposé sur la majorité des clients mail modernes (Apple Mail, Outlook mobile, Gmail iOS). Pour une marque comme Aigle, dont l'identité repose sur des photos en pleine nature, l'enjeu est de taille.

La balise `color-scheme`

Aigle déclare explicitement le support du dark mode :

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

Cela permet aux clients mail compatibles d'inverser intelligemment les couleurs plutôt que d'appliquer une inversion brute.

Media query `prefers-color-scheme`

@media (prefers-color-scheme: dark) {
  .dark-bg { background-color: #1a1a1a !important; }
  .dark-text { color: #ffffff !important; }
  .logo-light { display: none !important; }
  .logo-dark { display: block !important; }
}

Attention : Gmail mobile ignore cette media query. Il faut donc prévoir un rendu acceptable en mode "inversion automatique".

Accessibilité : l'excellent élève

Attribut alt sur toutes les images y compris les décoratives (alt="")
Contraste WCAG AA respecté sur tous les CTA
Lang attribute sur la balise <html> pour les lecteurs d'écran
Structure sémantique avec <h1>, <h2>, <p> plutôt que des <div> partout

Le poids du message

Le HTML brut pèse environ 78 Ko, sous la limite des 102 Ko à partir de laquelle Gmail clippe le message. C'est un détail souvent négligé qui peut casser le tracking d'ouverture.

Conclusion

Aigle prouve qu'une marque peut respecter accessibilité et dark mode sans sacrifier l'esthétique. Un cahier des charges à reprendre pour toute campagne sérieuse.

Et votre code email, il tient la route ?

Lancez gratuitement un audit de compatibilité en quelques secondes.

Tester mon code