Designtrends

Farbe in der Datenvisualisierung: Diagramme, Grafiken und Karten

7 Min. Lesezeit

Farbe in der Datenvisualisierung ist kein Schmuck. Sie ist Kodierung — ein Kanal, der Informationen tragt, ebenso wie Position, Lange und Grosse es tun. Wird Farbe gut eingesetzt, erfassen Betrachter Muster sofort. Wird sie leichtfertig verwendet, irrefuhren, verwirren oder schliessen Diagramme ganze Teile des Publikums aus.

Dieser Leitfaden behandelt die drei kanonischen Farbskalentypen, wie Farbsehschwache Entscheidungen bei der Datenvisualisierung beeinflusst, und die haufigsten Fehler, die sonst solide Arbeit untergraben.


Warum Farbe ein machtiges — und gefahrliches — Kodierungsmittel ist

Unter den pra-attentiven visuellen Attributen, die in der Wahrnehmungsforschung untersucht werden, sticht Farbe durch ihre rohe Geschwindigkeit hervor. Betrachter erkennen einen andersfarb igen Punkt in einem Streudiagramm mit Tausenden von Punkten innerhalb von Millisekunden, ohne bewusste Suche. Diese Kraft ist real, unterliegt aber Einschrankungen.

Farbe kodiert Informationen effektiv nur, wenn:

  1. Der Betrachter die kodierten Werte unterscheiden kann
  2. Die Kodierung intuitiv ist (nicht willkurlich)
  3. Die Farbwahl verschiedene Betrachtungsbedingungen ubersteht (Druck, Projektor, Farbsehschwache)

Wird eine dieser Bedingungen verletzt, hort Farbe auf, ein hilfreicher Hinweisreiz zu sein, und wird zu Larm. Die nachfolgend beschriebenen Skalentypen sind strukturierte Antworten auf jede dieser Einschrankungen.


Sequentielle Farbskalen: Hell bis Dunkel

Sequentielle Skalen reprasentieren Daten, die sich in eine Richtung bewegen — typischerweise von niedrigen zu hohen Werten oder von wenig zu viel. Das definierende Merkmal ist ein einzelner Farbton, der in Helligkeit und manchmal Sattigung variiert.

Wie sequentielle Skalen funktionieren

Eine sequentielle Skala verankert den hellsten Tint beim niedrigsten Datenwert und den dunkelsten Ton beim hochsten. Jeder Zwischenwert erhalt eine proportional platzzierte Farbe entlang dieses Kontinuums.

Eine praktische einfarbige sequentielle Skala fur geografische Bevolkerungsdichte:

Wert Hex Beschreibung
Sehr niedrig #EFF6FF Fast weisses Blau
Niedrig #BFDBFE Blasses Himmelblau
Mittel #60A5FA Klares Blau
Hoch #2563EB Lebhaftes Blau
Sehr hoch #1E3A8A Tiefes Marineblau

Diese Kodierung ist intuitiv: mehr Blau bedeutet mehr. Betrachter mit beliebiger Farbwahrnehmung können die Skala lesen, weil sie auf Luminanz, nicht auf Farbtonunterscheidung basiert.

Praktische Hinweise

  • Vermeiden Sie Regenbogen- (spektrale) Farbverlaufe in sequentiellen Kontexten. Spektrale Farbverlaufe — von Rot uber Orange, Gelb und Grun bis Blau — erzeugen falsche Kanten an Farbtonubergangen. Ein plotzlicher Wechsel von Gelb zu Grun um die Mitte signalisiert einen kategorischen Bruch, der in den Daten nicht existiert. Wahrnehmungsgleichmaßige sequentielle Paletten (wie solche, die aus OKLCH oder CIELAB abgeleitet werden) vermeiden dieses Artefakt.
  • Verwenden Sie eine wahrnehmungsgleichmaßige Progression. Gleichmaßig bedeutet: gleiche Datenschritte erzeugen gleich aussehende Farbschritte. Nicht-gleichmaßige Progressionen uberbetonen bestimmte Wertebereiche.
  • Gesattigter Endpunkt, entsattigter Ursprung. Ein schwach gesattigter, fast weisser Ausgangspunkt und ein voll gesattigter, dunkler Endpunkt gibt den weitesten Wahrnehmungsbereich.

Sie können einfarbige sequentielle Skalen aufbauen, indem Sie mit einem Basisfarbton im Palette-Generator beginnen und ihn mit dem Shade-Generator kombinieren, um gleichmaßige Schritte sicherzustellen.


Divergierende Farbskalen: Zwei Endpunkte

Divergierende Skalen reprasentieren Daten mit einem sinnvollen Mittelpunkt. Wenn Werte ober- und unterhalb dieses Mittelpunkts konzeptuell verschieden sind — nicht nur quantitativ —, macht eine divergierende Skala beide Halften gleichzeitig sichtbar.

Wann man eine divergierende Skala verwendet

Klassische Anwendungsfalle sind:

  • Wahlergebnisse: Rot fur Republikanervorteil, Blau fur Demokratenvorteil, neutrales Lila oder Weiss fur ein 50/50-Unentschieden
  • Finanzielle Leistung: Rot fur Verluste, Grun fur Gewinne, Neutral fur Gewinnschwelle
  • Temperaturanomalien: Blau fur unterdurchschnittlich, Rot fur uberdurchschnittlich, Weiss fur die historische Norm
  • Sentiment-Scores: Negatives bis positives Sentiment, Neutral in der Mitte

Entwurf einer divergierenden Skala

Eine divergierende Skala benotigt drei Anker: die beiden Farbton-Endpunkte und das neutrale Zentrum.

Beispiel fur eine Umfragebewertungsskala (sehr unzufrieden → neutral → sehr zufrieden):

Position Hex Beschreibung
Sehr unzufrieden #991B1B Tiefes Rot
Unzufrieden #F87171 Weiches Rot
Neutral #F5F5F4 Gebrochen-weiss
Zufrieden #4ADE80 Weiches Grun
Sehr zufrieden #166534 Tiefes Grun

Das neutrale Zentrum sollte nahezu achromatisch sein — ein helles Grau oder gebrochen Weiss — damit Werte auf beiden Seiten des Mittelpunkts als unterschiedliche Kategorien wahrgenommen werden.

Fallstricke

  • Ungleicher Wahrnehmungsbereich auf jeder Seite. Rot und Grun haben bei gleichwertigem Sattigungsgrad keine gleiche visuelle Intensitat. Stellen Sie mit einem Tool sicher, dass Ihre beiden extremen Endpunkte wahrnehmungsmaßig gleich weit vom Neutralpunkt entfernt sind, nicht nur numerisch.
  • Farbtonpaare wahlen, die fur Farbblinde zusammenfallen. Rot-Grun-divergierende Skalen sind der haufigste Problemfall. Dies wird im folgenden Abschnitt uber Farbsehschwache ausfuhrlich behandelt.

Kategorische (qualitative) Farbskalen: Unterschiedliche Farbtöne

Kategorische Skalen kodieren nominale Daten — Kategorien ohne inhärente Reihenfolge. Land A ist nicht mehr oder weniger als Land B; es ist einfach anders. Dies erfordert Farben, die so wahrnehmungsmaßig verschieden voneinander wie möglich sind, ohne implizierte Reihenfolge oder Hierarchie.

Grundsatze guter kategorischer Paletten

Maximale Wahrnehmungsdistanz. Farben sollten um das Farbrad verteilt sein, nicht geclustert. Eine Palette mit drei Blautönen, zwei Gruntönen und einem Lila funktioniert nicht, weil Betrachter die ahnlichen Farbtöne verwechseln werden.

Annahernd gleiche Helligkeit. Wenn einige Kategorien hell und andere dunkel sind, werden die dunklen visuell dominieren, auch wenn sie nicht wichtiger sind. Streben Sie bei allen kategorialen Farben eine ahnliche Luminanz an.

Nicht mehr als 7–10 Kategorien, idealerweise weniger. Das menschliche Kurzzeitgedachtnis fasst etwa 7 Einheiten. Wenn Betrachter mehr als 7 eindeutige Farbe-zu-Kategorie-Zuordnungen im Gedachtnis behalten mussen, entsteht kognitive Belastung, die das Diagramm untergrabt. Bei 15 Landern sollten Sie uberlegen, ob Farbe das richtige Kodierungsmittel ist.

Eine ausgewogene 6-Farben-Kategoriepalette:

Kategorie Hex Farbton
Kategorie A #3B82F6 Blau
Kategorie B #EF4444 Rot
Kategorie C #10B981 Teal-Grun
Kategorie D #F59E0B Amber
Kategorie E #8B5CF6 Lila
Kategorie F #F97316 Orange

Blau, Rot, Grun, Amber, Lila und Orange sind weitraumig um das Farbrad verteilt und haben ahnliche Helligkeitswerte.

Kategorische Paletten testen

Vergewissern Sie sich vor der Fertigstellung, dass Ihre Palette funktioniert, wenn:

  • In Schwarzweiss gedruckt (prufen, ob Ahnlichkeit in der Helligkeit Unterscheidungen eliminiert)
  • In kleiner Grosse in einer Legende betrachtet
  • Von jemandem mit Farbsehschwache gesehen (siehe unten)

Der Farbsehschwache-Simulator ubernimmt den dritten Test.


Farbsehschwache in der Datenvisualisierung

Etwa 8 % der Manner und 0,5 % der Frauen haben eine Form angeborener Farbsehschwache. In einem typischen Arbeitspublikum von 50 Personen nehmen wahrscheinlich 3–4 Betrachter Farben anders wahr. Bei einer offentlich zuganglichen Visualisierung ist die Zahl nicht vernachlassigbar.

Fur die Datenvisualisierung relevante Typen

Deuteranopie / Deuteranomalie: Reduzierte Empfindlichkeit fur Grun. Die haufigste Form (ca. 5 % der Manner). Rot und Grun erscheinen ahnlich im Farbton; die Unterscheidung kollabiert zu einem Gelb-Braun-Grau-Bereich.

Protanopie / Protanomalie: Reduzierte Empfindlichkeit fur Rot. Weniger haufig (ca. 1 % der Manner). Rot erscheint dunkler und weniger gesattigt; Rot-Grun-Verwechslungen kommen vor.

Tritanopie: Selten (ca. 0,001 %). Blau-Gelb-Verwechslungen. Betrifft sehr wenige, wird aber relevant, wenn Blau eine primäre kategorische Farbe ist.

Die Rot-Grun-Katastrophe

Der haufigste Farbsehschwache-Fehler bei Datenvisualisierungen ist die rot-grun-divergierende Skala — standig verwendet fur Finanzdaten, Karten und Statusindikatoren. Fur deuteranopische und protanopische Betrachter kollabieren die beiden Farbton-Endpunkte zu nahezu identischen braunlichen oder olivfarbenen Tönen. Das Diagramm vermittelt bei ca. 6 % der mannlichen Betrachter kaum Informationen.

Alternativen:

Ersetzen Sie Rot-Grun durch:

  • Blau-Orange (#1D4ED8 bis #EA580C): Weitgehend unterscheidbar bei allen gángigen Farbsehtypen
  • Lila-Grun (#7C3AED bis #059669): Ebenfalls robust bei Deuteranopie und Protanopie
  • Rot-Blau mit starkem Helligkeitsunterschied: Funktioniert bei den meisten Formen, wenn der Helligkeitskontrast stark genug ist

Ampel-Statusindikatoren (Rot-Gelb-Grun) haben dasselbe Problem. Ersetzen Sie Farbe durch Formen und Beschriftungen als primäre Kodierung und verwenden Sie Farbe als sekundaren redundanten Hinweis.

Designstrategien fur Farbsehschwache-Robustheit

  1. Luminanzkontrast verwenden, nicht nur Farbtonkontrast. Farben, die sich in der Helligkeit deutlich unterscheiden, bleiben bei den meisten Formen von Farbsehschwache unterscheidbar, weil die Luminanzwahrnehmung weitgehend erhalten bleibt.

  2. Redundante Kodierungen hinzufugen. Nicht allein auf Farbe verlassen. Verwenden Sie:

  3. Verschiedene Linienstile (durchgehend, gestrichelt, gepunktet) in Liniendiagrammen
  4. Verschiedene Punktformen in Streudiagrammen
  5. Direkte Beschriftungen auf Datenreihen
  6. Schraffur oder Muster in Balkendiagrammen

  7. Mit einem Simulator testen. Verwenden Sie den Farbsehschwache-Simulator, um Ihre Palette durch deuteranopische, protanopische und tritanopische Filter zu sehen, bevor Sie veroffentlichen.

  8. Etablierte barrierefreie Paletten verwenden. Wong (2011) veroffentlichte eine 8-Farben-Palette, die speziell fur Farbsehschwache-Robustheit entworfen wurde: Schwarz, Orange, Himmelblau, Blaulichgrun, Gelb, Blau, Zinnoberrot und Rotlichlila.


Best Practices und haufige Fehler

Best Practices

Skalentyp dem Datentyp anpassen. Sequentiell fur geordnete kontinuierliche Daten. Divergierend fur Daten mit einem sinnvollen Zentrum. Kategorisch fur ungeordnete nominale Daten. Das Vermischen dieser Typen (z. B. eine sequentielle Skala fur kategorische Daten) erzeugt implizierte Reihenfolge, die irrefuhrt.

Die dunkelsten Farben den wichtigsten Daten zuordnen. Dunklere Werte erzielen mehr Aufmerksamkeit. Wenn Ihre hochsten Werte am handlungsrelevantesten sind, passt die Verankerung am dunklen Ende einer sequentiellen Skala die visuelle Aufmerksamkeit an die Datenprioritat an.

Den Hintergrund berucksichtigen. Farben erscheinen auf weissen, grauen oder dunklen Hintergrunden verschieden. Eine auf weissem Hintergrund entworfene Skala kann auf einem grauen Dashboard flach oder trub aussehen. Auf dem tatsachlichen Hintergrund testen.

Konsistente Skala uber verwandte Diagramme hinweg verwenden. Wenn drei Diagramme in einem Dashboard alle Verkaufszahlen zeigen, verwenden Sie fur dieselbe Metrik dieselbe Farbskala. Inkonsistenz zwingt Betrachter, jede Legende neu zu lesen.

Legenden nah an den Daten halten. Je weiter die Legende entfernt ist, desto mehr kognitive Arbeit mussen Betrachter leisten, um die Farben zu dekodieren. Direkte Beschriftungen eliminieren das Nachschlagen in der Legende vollig.

Haufige Fehler

Regenbogenskalen fur kontinuierliche Daten. Wie oben erwahnt, fuhren spektrale Farbverlaufe zu falschen Wahrnehmungskanten und verzerren die Daten. Eine wahrnehmungsgleichmaßige einfarbige Skala ist fast immer uberlegen.

Farbe als einzige Kodierung verwenden. Wenn Ihr Diagramm vollstandig scheitern wurde, wenn es in Graustufen konvertiert wird, verlasst es sich zu sehr auf Farbe. Fugen Sie Form, Position oder direkte Beschriftungen hinzu.

Zu viele kategorische Farben. Mehr als 7–8 unterschiedliche Farben in einer Legende ist ein Signal, dass die Daten neu strukturiert werden mussen, nicht dass eine grossere Palette benotigt wird.

Kontrarme Farben bei Kartenfullungen. Geografische Karten zeigen viele Farben gleichzeitig bei kleinen Polygongrossen. Farben, die isoliert unterschiedlich aussehen, können in Kartenmassstab schwer zu unterscheiden sein. In der tatsachlichen Anzeigegrösse testen.

Den Projektoreffekt ignorieren. Projektoren waschen Farbe erheblich aus. Eine Palette, die auf dem Bildschirm schon aussieht, kann in einer Konferenzraumprasentation alle mittleren Unterscheidungen verlieren. Kontrastpuffer einplanen.

Nur auf Farbe beim Drucken kodieren. Druck kann Farben anders reproduzieren als der Bildschirm, und Barrierefreiheit fur gedruckte Materialien ist ebenso wichtig. Mit Graustufendruck im Hinterkopf entwerfen.


Wichtige Erkenntnisse

  • Verwenden Sie sequentielle Skalen (hell bis dunkel, einfarbig) fur geordnete kontinuierliche Daten, bei denen ein Extrem mehr von etwas bedeutet.
  • Verwenden Sie divergierende Skalen (zwei Farbton-Endpunkte, neutrales Zentrum) fur Daten mit einem sinnvollen Mittelpunkt — finanzielle, politische, Abweichung von der Basislinie.
  • Verwenden Sie kategorische Skalen (wahrnehmungsmaßig unterschiedliche Farbtöne) fur nominale Daten ohne implizierte Reihenfolge; maximal 7–10 Kategorien.
  • Regenbogenfarbverlaufe fur sequentielle Daten vermeiden — sie fuhren zu falschen Kanten und irrefuhrender Wahrnehmung.
  • Rot-Grun-Kodierung scheitert bei ca. 6–8 % der Manner; durch Blau-Orange oder Lila-Grun-divergierende Paare ersetzen.
  • Jede Palette mit dem Farbsehschwache-Simulator vor der Veroffentlichung testen.
  • Redundante Kodierungen (Formen, Beschriftungen, Linienstile) hinzufugen, damit die Visualisierung auch dann lesbar bleibt, wenn Farbe versagt.
  • Den Palette-Generator verwenden, um Farbpaletten fur Ihren spezifischen Datentyp aufzubauen und zu evaluieren.

Ähnliche Farben

Ähnliche Marken

Ähnliche Werkzeuge