Den Dark Mode in E-Mails effektiv managen

Heute verfügt die Mehrheit der Umgebungen, in denen E-Mails gelesen werden (E-Mail-Clients, Webmails und mobile Anwendungen), über eine Dark Mode-Funktion. Nahezu alle Empfänger können zwischen einem „hellen" Modus (mit dunkler Typografie auf weißem Hintergrund) und einem „dunklen" oder „Nacht"-Modus (dunkler Hintergrund, helle Typografie) wählen.

Es ist wichtig zu beachten, dass Anzeigeumgebungen im „hellen" Modus nach wie vor am weitesten verbreitet sind. Daher sollte das Ziel sein, die Darstellung im Dark Mode zu optimieren, ohne die klassische Version zu beeinträchtigen.

Die Gmail-Anwendung (verfügbar auf mobilen Geräten) kann im hellen oder dunklen Modus eingestellt werden. Je nach aktiviertem Modus unterscheidet sich die E-Mail-Darstellung mit variierenden Farben.

Auf mobilen Geräten ändert die Gmail-Anwendung die Farbcodes von Elementen (Text, Hintergrundfarbe, Button usw.) von dunkel zu hell und von hell zu dunkel.

Wenn Sie hingegen Gmail in einem Browser öffnen (als Webmail bezeichnet), ändert sich nur die E-Mail-Oberfläche. Mit anderen Worten: Der Inhalt der E-Mails im dunklen Modus bleibt identisch mit dem im hellen Modus – es gibt keine Auswirkungen.

Sowohl in Desktop- als auch in mobilen Umgebungen ändert die Outlook Mac-Anwendung die Farbcodes von Elementen (Text, Hintergrundfarbe, Button usw.) von dunkel zu hell und von hell zu dunkel.

Sowohl in Desktop- als auch in mobilen Umgebungen ändert die Outlook 365-Anwendung die Farbcodes von Elementen (Text, Hintergrundfarbe, CTA usw.) von dunkel zu hell und von hell zu dunkel.

Farbcodes werden im Dark Mode basierend auf ihrem Kontrastniveau invertiert. Je mehr eine Farbe im hellen Modus sichtbar ist, desto mehr neigt sie dazu, im dunklen Modus zu einem dunkleren Farbton zu invertieren: Bei Gmail wird Weiß (#FFFFFF) zu #202124 invertiert.

Texte werden ebenfalls entsprechend ihrem hexadezimalen Farbcode kontrastiert.

Die Anzeige von Bildern ist sowohl im hellen als auch im dunklen Modus identisch. Wenn möglich, sollten Sie Bilder mit farbigem Hintergrund freistellen, damit dieser im dunklen Modus nicht erscheint.

Die Anzeige von Logos, Icons oder Piktogrammen ist sowohl im hellen als auch im dunklen Modus identisch. Wenn die Anzeige im dunklen Modus nicht optimal ist (z.B. Logo oder Icon nicht sichtbar), fügen Sie entweder einen farbigen Hintergrund oder eine Umrandung hinzu. Der Hintergrund wird im hellen Modus nicht sichtbar sein (z.B. weißer Hintergrund auf weißer E-Mail), lässt aber das Icon im dunklen Modus hervorstechen.

Farbe für Farbe werden Outlook 2019 und die Gmail-Anwendung in den oben erläuterten Fällen beim Wechsel in den dunklen Modus den entgegengesetzten Wert abrufen. Nur die Farbcodes sind betroffen, was zu Problemen mit der Lesbarkeit und dem Kontrast in Bezug auf Ihre Bilder führen kann (die nicht betroffen sind).

Es ist möglich, Hintergrundbilder während der Designphase zu optimieren, um die Lesbarkeit des überlagerten Inhalts im dunklen Modus zu maximieren (insbesondere bei hellem Text auf dunklen Bildern oder dunklem Text auf hellen Bildern).

Warum ist es wichtig, dies zu berücksichtigen? 

Wie bereits erwähnt, ändern sich Bilder im dunklen Modus nicht, aber Textfarben schon. So wird im hellen Modus dunkler Text auf einem hellen Bild im dunklen Modus zu hellem Text auf einem hellen Bild, wodurch der Text möglicherweise unleserlich wird.

Wie stellt man eine gute Anzeige während der Designphase sicher?

Integrieren Sie einen Verlaufs-Transparenzeffekt in Ihr Hintergrundbild. Dieser Verlauf verbessert die Lesbarkeit im hellen Modus leicht und erhöht sie im dunklen Modus erheblich. 

Sobald das Bild im Email Builder eingefügt ist, brauchen Sie nur noch eine Hintergrundfarbe (hinter dem Bild) einzugeben. Beispiel: Das Hinzufügen einer dunklen Hintergrundfarbe zum Hintergrundelement wird im dunklen Modus automatisch zu einer dunklen Farbe konvertiert und gewährleistet besseren Kontrast und Lesbarkeit für den Text.

Messaging-Plattformen handhaben den dunklen Modus unterschiedlich und interpretieren den HTML-Code Ihrer E-Mails auf vielfältige und sich entwickelnde Weise. Daher gibt es keine universelle Lösung für die Dark Mode-Kompatibilität, sondern vielmehr eine Reihe bewährter Praktiken.

Wir empfehlen dringend, immer zu überprüfen, wie Ihre E-Mails auf verschiedenen Messaging-Plattformen angezeigt werden, möglichst unter realen Bedingungen: Durch Versenden einer Test-E-Mail (BAT) vom Email Builder und einer weiteren Test-E-Mail (BAT) von Ihrer E-Mail-Marketing-Software.