Farbe
Unsere Markenfarben
Ob in der Kommunikation oder auf unseren Produkten: Rot und Weiß sind unsere ikonischen Markenfarben, die Menschen auf Anhieb mit der Deutschen Bahn assoziieren. Deshalb verwenden wir sie in allen primären Kommunikationskanälen, um die Wiedererkennbarkeit und Konsistenz der Marke sicherzustellen.
-
Farbsystem CMYK
-
Farbsystem HEX
-
Farbsystem SCSS
-
Farbsystem NCS
-
Farbsystem RAL
-
Farbsystem RGB
-
Farbsystem Pantone
-
DB Rot – Red 500
-
Farbsystem CMYK
-
Farbsystem HEX
-
Farbsystem SCSS
-
Farbsystem NCS
-
Farbsystem RAL
-
Farbsystem RGB
-
Farbsystem Pantone
-
Weiß
Einsatz und Anwendung
Für den Einsatz von unseren Markenfarben gilt eine einfache Regel: Rot setzen wir in der Kommunikation immer ein – denn so erkennen unsere Kund:innen die Deutsche Bahn sofort als Absenderin. Ob im Logo, ganz dezent im Puls oder illustrativen Icon, als aktivierendes Störer-Element oder als plakative Fläche – Unser DB Rot sorgt für direkte Identifizierung und bildet in Kombination mit Weiß die zentralen Farben unserer Marke.Bitte beachte: Unsere Richtlinien für den Umgang mit Farben in digitalen Produkten findest du hier:
Sekundärfarben
Unsere Sekundärfarbpalette besteht aus insgesamt 12 Farben. Jede der 12 Farben wurde in jeweils 8 Farbfelder unterteilt, die von hell bis dunkel (100-800) reichen. Die Vielzahl an Schattierungen lässt zu, beispielsweise die Anforderungen im digitalen Raum optimal abzudecken, oder auch Illustrationen möglichst authentisch zu colorieren.
Zusätzlich gibt es themenspezifische Kommuniukationsmuster, bei denen der Einsatz von Sekundärfarben klar definiert- und in einem eigenen Kapitel dokumentiert ist. Stelle sicher, dass du die jeweiligen Vorgaben für den Farbeinsatz immer beachtest. Eine Übersicht unserer Kommunikationsmuster findest du hier.
Gestaltungsprinzipien Sekundärfarben
Rot und Weiß prägen das Erscheinungsbild unserer Marke und stellen eine schnelle Wiedererkennbarkeit sicher. Durch unsere Sekundärfarben, (die nur in besonderen Fällen zum Einsatz kommen) unterstützen wir inhaltliche Aussagen visuell. Unsere Kommunikation wird durch sie farbiger, aber nie bunt.Damit wir die Wiedererkennbarkeit auch beim Einsatz der Sekundärfarben gewährleisten können, gelten folgende Gestaltungsprinzipien für den Umgang mit Sekundärfarben:
DB Rot ist immer Teil der GestaltungAber es gilt: Lesbarkeit geht vor! Sollte unser DB Rot (z.B. im Logo oder Puls) auf einer farbigen Hintergrundfläche nicht mehr erkennbar sein, dann wähle eine andere Farbkombination.
Sicherstellung ausreichender KontrastverhältnisseStelle bei der Platzierung von Text immer ein ausreichend großes Kontrastverhältnis sicher. Für Large Text gilt ein Verhältnis von 3:1, für Small Text 4,5:1. Mehr dazu hier.
Monochrome FarbkombinationenSolltest du einen zweiten Farbton benötigen, dann empfehlen wir dir Farbabstufungen der gleichen Farbe zu kombinieren. Für ein stimmiges Gesamtbild sollte das Kontrastverhältnis bei ca. 1,3:1 liegen.
Ausgeglichene FarbstimmungenBei der Verwendung von mehr als zwei Sekundärfarben (z.B. für Illustrationen oder Infografiken), solltest du auf ein harmonisches Gesamtbild und die jeweiligen Kontrastanforderungen achten.
Einsatz und Anwendung
Unsere Sekundärfarben kommen vor allem in unseren themenspezifischen Kommunikationsmustern vor. Diese ermöglichen es, zielgruppen- und kontextbezogene Anforderungen aufzugreifen und Themen, die markenstrategisch besonders relevant sind visuell zu verstärken. Für alle Kommunikationsmuster gelten in Bezug auf die Barrierefreiheit unsere generellen Richtlinien.
Das Wichtigste in Kürze
- Unsere Sekundärfarben nutzen wir nur in besonderen Fällen, um eine inhaltliche Aussage mit entsprechender Farbe zu verstärken oder in unseren fest definierten Kommunikationsmustern.
- Achte immer auf die definierten Richtlinien zur Farbauswahl und Kontrastverhältnissen.
- Verläufe nutzen wir nur bei der Colorierung von Illustrationen.
Do's and Dont's
Unsere Markenfarbe DB Rot ist immer Teil der Gestaltung.
Unsere Markenfarbe DB Rot darf nicht fehlen.
Die Farbe unserer Schrift ist Schwarz oder Weiß.
Die Farbe unserer Schrift ist nicht andersfarbig bzw. bunt.
Logo und Puls sind entweder Rot oder Weiß.
Wir verwenden keine Sekundärfarben im Logo und Puls.
Einsatz von Sekundärfarbe mit klaren Bezug zum Inhalt.
Keinen Einsatz einer Sekundärfarbe ohne Bezug zum Inhalt.
Unsere Markenfarben und ggf. Sekundärfarben werden nur nach Vorgaben verwenden.
Farbverläufe verwenden wir in der Gestaltung nie.
Downloads
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.
Barrierefreiheit
Farbe ist nicht nur ein essenzieller Bestandteil unserer Markenidentität, sie spielt gleichzeitig eine bedeutende Rolle in Sachen Lesbarkeit und Barrierefreiheit. Wir möchten sicherstellen, dass jeder Mensch, unabhängig von seinen individuellen Fähigkeiten und Einschränkungen unsere Kommunikation und Informationen verstehen kann.
Damit unserer Inhalte, Produkte, Services und Informationen bestmöglich zugänglich sind und dabei immer im Stil der modernen Ikone bleiben, beachtet bitte folgende Richtlinien zu Kontrastverhältnissen und ihrer Anwendung. Für unsere digitalen Produkte gelten spezifische Richtlinien zur Barrierefreiheit innerhalb des Designsystems. Weitere Informationen dazu findest du hier:
Kontrastverhältnisse
Der Kontrast ist der Helligkeitsunterschied zwischen zwei Elementen. Um die bestmögliche Wahrnehmbarkeit und Benutzerfreundlichkeit unserer Inhalte zu gewährleisten, folgen wir bei der Deutschen Bahn den Web Content Accessibility Guidelines (WCAG). In den WCAG sind Standards zur Gewährleistung von Barrierefreiheit definiert:
- Large Text erfordert ein Kontrastverhältnis von 3:1. Als Large Text gilt jede Größe ≥18 Pt wenn Regular und ≥14 Pt wenn Bold.
- Small Text erfordert ein Kontrastverhältnis von 4,5:1. Als Small Text gilt jede Größe <18 Pt wenn Regular und <14 Pt wenn Bold.
- Grafische Elemente wie z.B. unser Logo erfordern ebenfalls ein Kontrastverhältnis von 3:1.
- Rein dekorative Elemente, die keinerlei Information enthalten, müssen kein bestimmtes Kontrastverhältnis erfüllen.
Unsere Markenfarben sowie Sekundärfarben sind bei korrekter Anwendung immer barrierefrei. Das bedeutet konkret: Auf weißen Hintergründen setzen wir unser Logo und Puls in Rot ein; unsere Schrift ist dabei Schwarz (Print) bzw. Cool Gray 700 (digital). Auf roten Hintergründen setzen wir sowohl Logo, Puls als auch Schrift in Weiß ein.
Auf weißen Hintergründen nutzen wir unser rotes Logo und Puls. Unsere Schriftfarbe ist Schwarz (im Print) bzw. Cool Gray 700 (digital).
Auf roten Hintergründen nutzen wir unser weißes Logo und Puls. Unsere Schriftfarbe ist ebenfalls weiß.
Large Text erfordert ein Kontrastverhältnis von mindestens 3:1. Als Large Text gilt jede Größe über 18 Pt, wenn Regular, und über 14 Pt, wenn Bold.
Small Text erfordert ein Kontrastverhältnis von mindestens 4,5:1. Als Small Text gilt jede Größe unter 18 Pt, wenn Regular,und unter 14 Pt, wenn Bold.
Für rein dekorative grafische Elemente verwenden wir ein Kontrastverhältnis von 1,3:1. Beachte im Zusammenspiel mit Text, dass die hellere Farbe das Kontrastverhältnis für Text gewährleisten muss.
Farbenfehlsichtigkeit
Menschen mit einer Farbenfehlsichtigkeit haben Probleme, Farben richtig zu erkennen oder Nuancen einer Farbe zu unterscheiden. Unser Design unterstützt Personen mit Farbenfehlsichtigkeit. Deshalb achten wir bei der Gestaltung darauf, Farbe nie als einziges Mittel zur Kommunikation relevanter Inhalte einzusetzen (Prinzip des Dual Coding).
Die Abbildung zeigt, wie verschiedene Farben für Personen mit unterschiedlichen Formen von Farbenblindheit im Vergleich zum normalen Sehen aussehen kann.
Normal |
|
Rot-Grün-Blindheit |
|
Blau-Blindheit |
|
Vollständige Farbenblindheit |
|
Weiter