Farbe¶
Farbe ist ein starker Gestaltungsmechanismus zur Schaffung einer visuellen Hierarchie. Sie kann signalisieren, welches die wichtigsten Elemente in einer Datenvisualisierung sind. Ein gängiges Muster ist die Verwendung
einer auffälligen Farbe zur Hervorhebung und Kennzeichnung der Datenmarkierungen oder Kategorien, die für die Aussage des Diagramms von größter Bedeutung sind
dezenterer Farben für andere sekundäre Datenmarkierungen oder Kategorien
von Schwarz für die wichtigsten Textelemente, wie den Titel der Visualisierung
von Grau
für weniger wichtige Datenmarken, die nur für den Kontext hinzugefügt werden
für unterstützende Diagrammelemente, wie Achsenbeschriftungen und Gitterlinien
Quelle: TIOBE
Mit Farbe kann auch eine visuelle Hierarchie hergestellt werden. Dies wird z.B. in Material Design 3 verwendet, wobei die Höhe als der Abstand zwischen den Komponenten entlang der z-Achse in dichteunabhängigen Pixeln (dps) gemessen wird:
Quelle: Elevation
Farbpaletten¶
Die Farbpalette für Datenvisualisierungen ist eine ausgewählte Teilmenge der cusy-Design-Farbpalette. Sie wurde entwickelt, um die Zugänglichkeit und Harmonie innerhalb einer Seite zu verbessern.
Kategorien¶
Kategoriale (oder qualitative) Paletten eignen sich am besten, wenn sie diskrete Datenkategorien unterscheiden sollen, die keine inhärente Korrelation aufweisen.
Kategoriale Farbpaletten werden hauptsächlich in folgenden Graphen und Visualisierungsarten eingesetzt:
Balkendiagramme:
Zur Unterscheidung verschiedener Kategorien oder Gruppen
Jede Kategorie erhält eine eigene Farbe
Kreisdiagramme (Tortendiagramme):
Zur Darstellung von Anteilen verschiedener Kategorien
Jeder Sektor repräsentiert eine Kategorie mit einer eindeutigen Farbe
Gruppierte Säulendiagramme:
Zur Veranschaulichung mehrerer Kategorien innerhalb von Hauptgruppen
Jede Unterkategorie wird durch eine eigene Farbe dargestellt
Die Farben dieser Palette sollten nacheinander genau wie unten beschrieben angewendet werden. Die Sequenz wird sorgfältig kuratiert, um den Kontrast zwischen benachbarten Farben zu maximieren und die visuelle Unterscheidung zu erleichtern. Die cusy Palette sollte nur für Daten und Darstellungen verwendet werden, die den Werten von cusy entsprechen.
Alternative kleinere Sets¶
Farbdifferenzen nach CIEDE2000¶
Name |
Red |
Orange |
Green |
Teal |
Cyan |
Blue |
Purple |
Magenta |
|
Hex |
de2817 |
cd8402 |
4ca72b |
008578 |
129fd4 |
0663b5 |
753bbd |
bd0f77 |
|
Red |
de2817 |
– |
29.06 |
68.60 |
58.21 |
58.28 |
47.85 |
43.07 |
29.35 |
Orange |
cd8402 |
29.06 |
– |
39.02 |
43.27 |
52.30 |
55.42 |
62.33 |
53.76 |
Green |
4ca72b |
68.60 |
39.02 |
– |
25.77 |
50.96 |
59.96 |
60.98 |
83.43 |
Teal |
008578 |
58.21 |
43.27 |
25.77 |
– |
25.24 |
32.48 |
44.86 |
60.24 |
Cyan |
129fd4 |
58.28 |
52.30 |
50.96 |
25.24 |
– |
24.93 |
48.09 |
64.06 |
Blue |
0663b5 |
47.85 |
55.42 |
59.96 |
32.48 |
24.93 |
– |
26.08 |
39.62 |
Purple |
753bbd |
43.07 |
62.33 |
60.98 |
44.86 |
48.09 |
26.08 |
– |
21.01 |
Magenta |
bd0f77 |
29.35 |
53.76 |
83.43 |
60.24 |
64.06 |
39.62 |
21.01 |
– |
Formen¶
Um größtmögliche Zugänglichkeit zu erreichen und Farbenblinde zu unterstützen empfehlen wir die Verwendung von mehreren Faktoren, wie auch in No use of color alone beschrieben. Wir schlagen folgende Formen vor:
In flächigen Diagrammen, wie Balken- und Kreisdiagrammen, können die Formen zu annähernd flächendeckenden Mustern angeordnet werden:
Sequenzen¶
Einfarbig¶
Monochromatische Paletten eignen sich gut für Beziehungs- und Trenddiagramme. Hier empfehlen wir für Zugänglichkeit die Anpassung der Größe, bzw. Strichstärke der Formen.
Warm-Kalt¶
Die Rot-Cyan-Palette hat einen natürlichen Zusammenhang mit der Temperatur. Verwendet diese Palette für Daten, die heiß-vs-kalt darstellen sollen.
Verläufe ohne Farbassoziationen¶
SVG Muster Generator¶
Alarm¶
Warnfarben werden verwendet, um den Status wiederzugeben. In der Regel steht Rot für Gefahr oder Fehler. Orange ist eine ernsthafte Warnung. Gelb steht für eine einfache Warnung und Grün für Normal oder Erfolg.
Farbverlauf¶
Farbverläufe eignen sich gut zum Hervorheben von Extremen in einem Wertebereich. Verwendet einen Verlauf nur bei Bedarf für Visualisierungen separater Kategorien. Mehrere Farbverläufe sind oft nicht zugänglich und nur selten empfehlenswert. Farbverläufe sollten nicht verwendet werden, um eine Progression oder Divergenz darzustellen.
Bemerkung
Verwendet niemals einen Farbverlauf anstelle einer sequentiellen Palette.
Siehe auch