Artikel: Darkmode
Darkmode
Wir gestalten digitale Anwendungen der Deutschen Bahn so, dass sie einen Dark Mode unterstützen, sofern das systemseitig möglich ist. Damit ermöglichen wir eine moderne, nutzerfreundliche und inklusivere User Experience. Auch wenn es keine klare wissenschaftliche Evidenz gibt, kann der Dark Mode ein angenehmeres Lesen bei schlechten Lichtverhältnissen ermöglichen, die Augen schonen und die Energieeffizienz auf OLED-Displays verbessern. Die persönliche Präferenz spielt hier ebenfalls eine Rolle.Dabei unterscheiden wir zwischen dem Dark Mode, dem optionalen, systemweiten dunklen Erscheinungsbild und dem Dark Theme, welches als gestalterisches Element für verschiedene Produkte genutzt wird und auch in analogen Medien Anwendung finden kann. Die in diesem Guide beschriebenen Regeln, einschließlich der Anpassung der Markenfarbe Rot, beziehen sich speziell auf den Dark Mode und sind nicht unmittelbar auf ein Dark Theme übertragbar.Dieser Guide bietet Designer:innen, Entwickler:innen und Interessierten Orientierung bei der Gestaltung des Dark Modes. Durch klare Prinzipien und Best Practices sichern wir die Markenidentität, Barrierefreiheit und Ästhetik in digitalen Produkten der Deutschen Bahn.
Warum Darkmode?
Der Dark Mode hat sich von einem Design-Trend zu einem wichtigen Bestandteil moderner Nutzererlebnisse entwickelt. Er bietet viele Vorteile: Er schont die Augen bei schlechten Lichtverhältnissen und verbessert die Lesbarkeit. Zudem trägt er zur Barrierefreiheit bei, indem er die Zugänglichkeit für Personen mit Sehbehinderungen und visuellen Einschränkungen erhöht.
Warum Darkmode?
Der Dark Mode hat sich von einem Design-Trend zu einem wichtigen Bestandteil moderner Nutzererlebnisse entwickelt. Er bietet viele Vorteile: Er schont die Augen bei schlechten Lichtverhältnissen und verbessert die Lesbarkeit. Zudem trägt er zur Barrierefreiheit bei, indem er die Zugänglichkeit für Personen mit Sehbehinderungen und visuellen Einschränkungen erhöht.
Prinzipien
Für die Deutsche Bahn bedeutet der Dark Mode, dass der Weißanteil als besonderes Designmerkmal der Marke verloren geht und stattdessen durch das DB Cool Grey 800 / Background Level 1 (Design System) ersetzt wird. Dadurch ist es notwendig, die Farben anzupassen. Im Design System geschieht dies automatisch bei Verwendung der Token. Diese Veränderungen ergeben sich aus dem jeweiligen kommunikativen Ziel, sei es die markenprägende Wirkung oder die Kommunikation kritischer Informationen.
Eindruck beibehaltenIn den Anwendungen bleibt der Look & Feel bestehen, um den Ausdruck der Marke beizubehalten und erlernte Strukturen zu unterstützen.
Farbe reduzierenDamit der Dark Mode bestmöglich wirken kann, sollten Farbakzente reduziert und gezielt eingesetzt werden.
Hierarchie gewährleistenBestehende visuelle Hierarchien werden beibehalten und sind daher mit dem Light Mode vergleichbar.
Barrierefreiheit erfüllenDer Dark Mode muss denselben Anforderungen der Barrierefreiheit wie im Light Mode entsprechen.
Farbe
Im Dark Mode passen wir die Farben gezielt an, um der stärkeren Wirkung durch höheren Kontrast und Überstrahlen entgegenzuwirken. Die Farben müssen gegenüber dem Light Mode etwas heller und weniger gesättigt dargestellt werden, um ein harmonisches Erscheinungsbild zu ermöglichen. Die Anpassung erfolgt systematisch innerhalb der bestehenden Farbpalette, wodurch sichergestellt wird, dass die Farben ihre gewünschte Wirkung behalten und die visuelle Kohärenz bestehen bleibt, ohne neue Farben hinzuzufügen.
Die Markenfarbe Rot
Die Farbe Rot ist das zentrale Element der visuellen Identität der Deutschen Bahn und steht für Wiedererkennung, Vertrauen und Klarheit. Diese Werte müssen auch im Dark Mode erkennbar bleiben. Jedoch ist die Wirkung der Markenfarbe Rot im Dark Mode nicht gleich wie im Light Mode. Dunkle Hintergründe lassen Rot oft intensiver oder strahlender wirken, was die Balance zwischen Strahlkraft und Erkennbarkeit beeinflussen kann. Um sicherzustellen, dass die Markenidentität erhalten bleibt und gleichzeitig eine gute Lesbarkeit gewährleistet wird, müssen klare Regeln für den Einsatz von Rot im Dark Mode formuliert werden.
Unterscheidung zwischen Marke und Information
Das DB Rot wird gezielt für Markenprägende Elemente eingesetzt z.B. Brand Buttons eingesetzt. Im Gegensatz zu informativen Inhalte wird auch im Dark Mode der Marken-Rotton beibehalten.
Für Informativen Inhalte und Interface-Elemente wie z.B. Verspätungen oder Fehlermeldungen verwenden wir die Farblogik des DB UX Design Systems.
Barrierefreiheit
Das angepasste DB Rot für den Dark Mode ist speziell auf dunkle Hintergründe abgestimmt und erfüllt daher die Anforderungen an die Barrierefreiheit. Auf hellen Hintergründen hingegen wird nach wie vor das ursprüngliche DB Rot verwendet, um in diesem Kontext die beste Wirkung und Barrierefreiheit zu gewährleisten.Zusätzlich gilt: Auf dem Dark Mode Rot dürfen in Weiß nur noch große Textelemente oder Grafiken stehen, da kleinere Schriften oder feine Details nicht uneingeschränkt erkennbar sind.
Systematische Farbanpassung
Im Dark Mode werden bunte Farben in ihrer Palette symmetrisch „gespiegelt“. Das bedeutet, dass zum Beispiel Blue 700 im Light Mode im Dark Mode durch Blue 200 ersetzt wird. Im Design System passiert diese Spiegelung automatisch bei Verwendung der Farbtoken. Auf diese Weise bleiben die Helligkeitsabstufungen der Farben konsistent, auch wenn das Erscheinungsbild dunkel wird.Hinweis: Dieses System bietet einen Startpunkt für die Übersetzung der Farben in den Dark Mode. Zusätzlich muss aber geprüft werden, ob die Kontrastverhältnisse im Sinne der Barrierefreiheit ausreichend sind. Dabei unterscheiden wir zwischen informativen und dekorativen Inhalten. Relevante Informationen müssen ein Kontrastverhältnis gemäß WCAG Konformitätsstufe AA erfüllen.
Hintergründe und Oberflächen
um Hintergründe im Dark Mode klar und harmonisch zu strukturieren, wird die Grau-Palette gegenüber dem Light Mode in umgekehrter Form verwendet. Der Farbton, DB Cool Gray 800 / Background Level 1 (Design System), bildet die Basis für Hauptflächen und Seitenhintergründe. Hellere Abstufungen ermöglichen visuelle Abgrenzungen und erzeugen Tiefe, indem sie verschiedene Ebenen voneinander unterscheiden. Dieses stufenweise Aufhellen schafft eine klare Hierarchie und Lesbarkeit, ohne der ruhigen Ästhetik des Dark Modes entgegenzustehen.Die Grautöne werden für den Dark Mode systematisch gespiegelt. Dabei wird zum Beispiel der weiße Hintergrund des Light Modes zu Gray 800, während Gray 100 im Dark Mode zu Gray 700 wird. Im Design System passiert diese Spiegelung automatisch bei Verwendung der Farbtoken. Dieses Prinzip sorgt für Konsistenz und stellt sicher, dass die bestehende Farbabstufung erhalten bleibt, ohne neue Farben hinzuzufügen.Hinweis: Dieses System funktioniert weitgehend ohne nachträgliche Überprüfung von Kontrasten. Im Zweifelsfall und im Zusammenhang mit Farbe empfehlen wir dennoch, Kontraste zu prüfen, um die barrierefreie Darstellung (gem. WCAG AA) der Inhalte sicherzustellen.
Das obige Beispiel zeigt, dass eine 1:1-Spiegelung von Vorder- und Hintergrundfarben im Normalfall funktioniert: Helle Hintergründe im Light Mode werden im Dark Mode zu dunklen Flächen, während dunkler Text zu hellem Text wird. Dieses Prinzip gewährleistet ein konsistentes und barrierefreies Erscheinungsbild.
Das Prinzip der 1:1-Spiegelung von Farben lässt sich nicht in allen Fällen sinnvoll anwenden. Im Light Mode werden bestimmte Elemente gezielt durch flächig dunkle Farben hervorgehoben. Würde man diese Farben im Dark Mode einfach umkehren, entstünde eine helle Fläche, die zwar auffällt, aber das harmonische Gesamtbild stören würde.In solchen Fällen sollte die Farbe des Elements nicht gespiegelt, sondern dunkel belassen werden. Um die gewünschte Hervorhebung dennoch zu erzielen, empfiehlt es sich, auf andere Arten der Auszeichnung zurückzugreifen – beispielsweise durch subtile Konturen oder eine Anpassung der Helligkeit des umgebenden Hintergrunds. So bleibt die visuelle Hierarchie erhalten, ohne die Ästhetik des Dark Modes zu beeinträchtigen. Da diese Hervorhebungen nicht die Regel sind, muss teilweise im Einzelfall abgewägt werden, wie ein geeigneter Übertrag in den Dark Mode aussehen kann.
Typografie
Im Dark Mode wird dunkler Text aus dem Light Mode zu heller Schrift, um den Kontrast auf dunklen Hintergründen zu gewährleisten. Schwarzer Text wird zu Weiß und die Grautöne der Typografie werden symmetrisch gespiegelt. Das Prinzip ist umgekehrt zu dem für die Hintergrundfarben. Allerdings wird bei der Typografie nicht die gesamte Grau-Palette verwendet, um ein ausreichendes Kontrastverhältnis auf entsprechenden Hintergründen sicherzustellen. Mittelgrautöne sind ohnehin sowohl auf hellen wie auch dunklen Hintergründen zu kontrastarm.
Auf dunklen Hintergründen wirkt weißer Text optisch fetter als dunkler Text auf hellen Flächen. Um diese Wirkung auszugleichen, werden die Schriftstärken der Überschriften im Dark Mode angepasst. Während Light-Schnitte unverändert bleiben, wird der Black-Schnitt über die variable DB-Schrift um -100 im Font Weight reduziert, um eine ausgewogene und angenehme Lesbarkeit zu gewährleisten sowie ein “Zulaufen” auf dunklen Hintergründen zu vermeiden. Zudem behält die Überschrift dadurch dasselbe optische Gewicht wie im Light Mode.
Ausblick: Illustrationen
Auch Illustrationen werden zukünftig an den Dark Mode angepasst, um harmonisch in das Gesamtdesign zu passen. Aktuell befindet sich dieser Bereich noch in der Ausarbeitung. Sobald die Anpassungen abgeschlossen sind, werden entsprechende Richtlinien ergänzt, um eine konsistente Gestaltung sicherzustellen.
Do´s & Dont`s
Der folgende Abschnitt veranschaulicht, welche Gestaltungsansätze im Dark Mode empfohlen werden und welche vermieden werden sollten.
Farben spiegeln, aber immer das Gesamtbild im Blick behalten
Die Farben aus dem Light Mode werden so gespiegelt, dass sie im Dark Mode ein harmonisches Gesamtbild ergeben und das Design ausgewogen bleibt.
Spiegele Farben nicht 1:1, wenn dies unharmonische oder störende Flächen erzeugt, die das Design beeinträchtigen und entgegen der Grundsätze des Dark Modes stehen.
Kontraste im Dark Mode nachträglich prüfen und bei Bedarf anpassen
Nach der Farbanpassung werden Kontraste geprüft und angepasst, um Lesbarkeit und klare visuelle Hierarchien zu gewährleisten.
Belasse Farben nicht unverändert, wenn der Kontrast im Dark Mode nicht ausreicht und die Lesbarkeit leidet.
Dark Mode Red nur für Markenelemente und Primary Buttons nutzen
Das Dark Mode Rot wird gezielt für Markenelemente und Primary Buttons eingesetzt, um markenprägende Wirkung auch im Dark Mode zu erreichen.
Verwende das Dark Mode Rot nicht für allgemeine Inhalte und Interface-Elemente, sondern nur für markenprägende Assets, wie Logo, illustrative Icons und Primary Buttons.
Weiter