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

  1. einer auffälligen Farbe zur Hervorhebung und Kennzeichnung der Datenmarkierungen oder Kategorien, die für die Aussage des Diagramms von größter Bedeutung sind

  2. dezenterer Farben für andere sekundäre Datenmarkierungen oder Kategorien

  3. von Schwarz für die wichtigsten Textelemente, wie den Titel der Visualisierung

  4. 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

Farbhierarchie

Quelle: Do vaccine mandates actually work?

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:

Elevation in Material Design 3

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.

Farbpalette für Standardkategorien für helles und dunkles Theme

Alternativen für das Light Theme

Einfarbige Alternative für das Light Theme
Zweifarbige Alternative für das Light Theme
Dreifarbige Alternative für das Light Theme
Vierfarbige Alternative für das Light Theme
Fünffarbige Alternative für das Light Theme

Alternativen für das Dark Theme

Einfarbige Alternative für das Dark Theme
Zweifarbige Alternative für das Dark Theme
Dreifarbige Alternative für das Dark Theme
Vierfarbige Alternative für das Dark Theme
Fünffarbige Alternative für das Dark Theme

Sequenzen

Einfarbig

Monochromatische Paletten eignen sich gut für Beziehungs- und Trenddiagramme. Beim hellen Theme bezeichnet die dunkelste Farbe die größten Werte. In dunklen Themes bezeichnet die hellste Farbe die größten Werte.

../../_images/palettes-mono-1.png
../../_images/palettes-mono-2.png

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.

../../_images/palettes-div1.png

Verläufe ohne Farbassoziationen

../../_images/palettes-div2.png

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.

../../_images/palettes-alert.png

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.

../../_images/gradient.png