Chart Farben
Die Farbpaletten für Datenvisualisierungen basieren auf den origin-Farbwerten der DB Marke und des DB UX Design Systems, wodurch das DB Look and Feel gewährleistet wird.
Die ausdrucksstarken Farben zeichnen sich nicht nur durch ihre Barrierefreiheit, sondern auch durch ihre klare Differenzierbarkeit aus, was sie zu einem unerlässlichen Element bei der Visualisierung von Bahndaten macht.
Themes
Base und Stronger
Die kategorialen und semantischen Farbpaletten gibt in zwei Lichtstärken: Base und Stronger.
- Base ist für Charts, die aus Flächen bestehen, wie bspw. den → Bar Chart, anzuwenden. Bei dieser Ausprägung ist der Kontrast unter den Farben höher, während der Kontrastwert zum Hintergrund niedriger ausfällt. Für eine barrierearme Datenvisualisierung sollte eine Flächenumrandung in der Stronger-Ausprägung der Farbe ergänzt werden.
- Stronger ist für Datenvisualisierungen in Linien- oder Punktform, wie bspw. den → Line Chart, anzuwenden. Auch farbige Textlabels sollten mit der Variante Stronger eingefärbt werden. Bei dieser Ausprägung wird der Kontrastwert von 3:1 zum Hintergrund entsprechend der WCAG-Konformitätsstufe AA eingehalten.
Accessibility
Alle Farbpaletten wurden hinsichtlich Kontrastverhältnissen und Farbenblindheitsausprägungen sorgfältig ausgewählt, um sicherzustellen, dass Accessibility-Richtwerte erfüllt werden. Dadurch bleiben die Visualisierungen lesbar – unabhängig des Nutzungskontextes oder etwaiger Einschränkungen durch Sehschwäche oder Farbblindheit.
Light und Dark Mode
Durch die Verknüpfung mit dem DB UX Design System unterstützen auch die Farbpaletten der Datenvisualisierung den Light Mode und den Dark Mode. Der Dark Mode kann bei schlechten bzw. dunklen Lichtverhältnissen oder zur Hervorhebung bestimmter Abschnitte einer Website, z. B. einer Hero-Section, verwendet werden.
Farbpaletten
Qualitative
Sequential
Monochromatic
Diverging
Usage Guidelines
Category-Farbpalette
Category Farben haben eine nicht-numerische Bedeutung. Die ersten 6 Farbtöne der Category-Farbpalette entsprechen den origin-Farbwerten der DB Marke und des DB UX Design Systems. Die Farbpalette wird durch 8 Farbtöne erweitert, die ebenfalls auf den origin-Farbwerten basieren und lediglich in ihrer Helligkeit angepasst sind.
🟢 Verwende die Category-Farbpalette, wenn verschiedene Datensätze, die nicht direkt miteinander in Beziehung stehen, verglichen werden sollen.
🔴 Verwende die Category-Farbpalette nicht für Datensätze, mit einer semantischen oder numerischen Bedeutung (wie bspw. Bewertungen oder Abstufungen). Dafür bietet sich stattdessen die Semantic-Farbpalette an.
⚠️ Reihenfolge beachtenDie Farben dieser Palette sollten in der beschriebenen Reihenfolge verwendet werden. Die Reihenfolge wurde sorgfältig ausgewählt, um den Kontrast zwischen benachbarten Farben zu maximieren und die visuelle Unterscheidung zu erleichtern.
Farbvariation
Als Standard sollten die ersten 6 Farben der Category-Farbpalette nacheinander verwendet werden. Als Alternative können auch Farben aus der Farbpalette kombiniert werden bzw. Farben dazwischen übersprungen werden.Die Markenfarbe Rot sollte, wenn möglich, vermieden werden, da sie im Datenbereich eine negative Bedeutung hat und Datenvisualisierungen im digitalen Bereich oft mit anderen Interface-Elementen in der Markenfarbe Rot kombiniert werden.
🟢 Verwende am besten die Category-Farbpalette nacheinander von oben, wie hier zu sehen mit Token 1-3.Variante Base für Bar-Chart mit weißer Kontur und Variante Stronger für Line-Chart.
🟢 Als Alternative können auch Farben in der Palette übersprungen werden, wie hier zu sehen (von links oben nach rechts unten) mit Token-1 und -13, Token-2 und -14, Token-8 und -9 oder Token-1 und -3.
Semantic-Farbpalette
Die Semantic Farben werden verwendet, um einen allgemein bekannten (gelernten) Status anzuzeigen. Dabei können die Farben für die folgenden Bedeutungen stehen:
- Grün für „erfolgreich“ oder „positiv“
- Gelb für „normale Warnung“
- Orange für „ernste Warnung“ oder „kritisch“
- Rot für „Fehler“, „Gefahr“ oder „negativ“
🟢 Verwende die Semantic Farben in der richtigen Reihenfolge und entsprechend der allgemein bekannten Bedeutung.
🔴 Verwende die Semantic Farben nicht entgegen ihrer gelernten Bedeutung.
⚠️ Rot-Grün-FarbsehschwächeDa aufgrund der Rot-Grün-Farbsehschwäche die “Green” und “Red” Farbwerte unter Accessibility-Aspekten problematisch ist, nutze diese nur in Kombination mit zusätzlichen visuellen Elementen, wie bspw. “Haken” für “Green” und “Kreuz” für “Red”.
Sequential-Farbpalette
Sequentielle Farben haben eine numerische Bedeutung. Es handelt sich um eine Abstufung von Farben, die von hell nach dunkel gehen und in ihrem Farbton sowie ihrer Sättigung den origin-Farbwerten der DB Marke entsprechen. Die Sequential-Farbpaletten basieren entweder auf einem Farbton (monochromatic) oder stellen einen Verlauf zwischen zwei Farbtönen dar (diverging).
🟢 Verwende eine Sequential-Farbpalette, wenn Abstufungen innerhalb der Daten dargestellt werden sollen, zum Beispiel:- für Ordinal-Skalen von „wenig“ zu „viel“, “positiv” zu “negativ” oder Intervall-Skalen von 2015 - 2025 oder 0 - 10.- wenn verschiedene Werte in eine Reihenfolge gebracht werden sollen.- wenn Daten auf- oder absteigend bewertet werden sollen.
🔴 Verwende keine Sequential-Farbpalette für die Visualisierung von unabhängigen Datenkategorien. Nutze hier die Category-Farbpalette.
Monochromatic
Wenn die Daten KEINE zwei Dimensionen im Sinne von „gut” zu „schlecht” oder „kalt” zu „warm” darstellen, sondern lediglich anhand einer Dimension gemessen werden (bspw. „wenige Kunden” zu „viele Kunden”), dann eignen sich die Monochromatic-Farbpaletten.
🟢 Verwende monochromatische Farben für Zahlenfolgen und Intervalle.
🟠 Für Skalen, die einen Mittelwert haben, wie bspw. einen Null-Wert, sollte eher eine Diverging-Farbpalette verwendet werden.
Accessibility für Monochromatic-Farbpaletten
Für die häufigere Wertausprägung solltest du den Farbwert Token 1, also den dunkelsten Farbwert im Light Mode, wählen und die weiteren Wertausprägungen aufsteigend den Farbwerten zuordnen.
🟢 Verwende die Monochromatic Farben des Tokens 1-4, um einen Kontrastwert von 3:1 zum Hintergrund zu erhalten.
🟠 Falls du mehr Farben benötigst, solltest du für Farben der Token 5-7 eine Flächenumrandung mit dem Token 4 nehmen.
Diverging
Eine Diverging-Farbpalette eignet sich, wenn das zu untersuchende Objekt exakt ZWEI gegensätzliche Dimensionen besitzt, wie zum Beispiel „gut” zu „schlecht“ oder „kalt” zu „warm“. Diese Farbpaletten zeigen einen Farbverlauf von einem Extremwert zum anderen und heben so die Unterschiede zwischen den beiden Dimensionen hervor.
🟢 Verwende Diverging Farben, wenn zwei Dimensionen mit einem Mittelwert dargestellt werden.
🔴 Bei einer Zahlenfolge ohne Mittelwert sollte diese Farbpalette nicht verwendet werden. Stattdessen eignet sich hier eine Monochromatic-Farbpalette.
Accessibility für Diverging-Farbpaletten
Für den einen Extremwert wählst du den Farbwert neg-1, für den anderen Extremwert den Farbwert pos-1. Die weiteren Wertausprägungen werden den dazwischenliegenden Farbwerten zugeordnet.Um auch bei den mittleren Farbwerten im Bereich zwischen neg-5 über neutral bis zu pos-5 die optimalen Kontrastverhältnisse zu erreichen, bietet es sich an, eine Flächenumrandung in den Farbwerten neg-4 bzw. pos-4 zu ergänzen.
🟢 Verwende die Diverging Farben des Tokens 1-4, um einen Kontrastwert von 3:1 zum Hintergrund zu erhalten.
🟠 Falls du mehr Farben benötigst, solltest du für Farben der Token 5-7 eine Flächenumrandung mit dem Token 4 nehmen.
⚠️ Rot-Grün-FarbsehschwächeDa aufgrund der Rot-Grün-Farbsehschwäche die rot zu grün verlaufende Palette unter Accessibility-Aspekten problematisch ist, nutze diese nur, wenn deine Anwendung hinsichtlich dieser Farbschwäche nicht optimiert sein muss! Als barrierefreie Alternative für positiv-negative Verläufe empfehlen wir die Verwendung der violett-türkis Farbpalette. Diese bietet eine gute Unterscheidbarkeit und ist auch für Menschen mit einer Rot-Grün-Schwäche gut geeignet.
Weitere Visualisierungen benötigt?
Du benötigst weitere Daten Visualisierungstypen oder möchtest gerne ein eigene Visualisierung entwickeln, die nicht in einer Standardbibliotheken enthalten ist? Dann melde dich gerne bei uns.
E-Mail schreiben
Weiter