Ein grundsolides Verständnis über Farben und ihre Wirkung ist eine der wichtigsten Voraussetzungen, um effektive Datenvisualisierungen erstellen zu können.

Du solltest Farben nicht dazu verwenden, um eine langweilig aussehende Visualisierung einfach nur bunter zu gestalten.

Der Einsatz von Farben dient immer einem ganz bestimmten Zweck.

Über Farben in Datenvisualisierungen

Beim Visualisieren von Daten gibt es grundsätzlich drei Einsatzzwecke für Farben:

Farbe wird verwendet…

  • um verschiedene Kategorien zu unterscheiden
  • zur Darstellung von Werten
  • zur Lenkung der Aufmerksamkeit

Zu diesen Einsatzzwecken gibt es drei dazugehörige Hauptkategorien von Farbskalen:

  • Qualitativ
  • Sequenziell
  • Divergierend

Du solltest die Auswahl von Farben nicht willkürlich machen. Ich empfehle Dir die Verwendung von standardisierten Farbskalen, wie beispielsweise vom kostenlosen Online Tool “ColorBrewer“; das ist auch mein persönlicher Favorit.

Nachfolgend eine detaillierte Beschreibung der Einsatzzwecke und der dazugehörigen Farbskalen.

Der Einsatz von Farben zur Unterscheidung zwischen verschiedenen Kategorien

Bei nicht numerischen Daten (kategorial) werden für jede Kategorie Kontrastfarben verwendet.

Zur Unterscheidung von verschiedenen Kategorien (Filialen, Produkte, Länder, etc.) kommt die qualitative Farbskala zum Einsatz.

Qualitative Farbskala

Abbildung 1: Qualitative Farbskala – ColorBrewer Dark2

Eine solche Skala hat endlich viele spezifische Farben. Wichtig dabei ist, dass sich einerseits die Farben gut voneinander unterscheiden und andererseits aber auch gleichwertig zueinander sind.

Folgende Punkte solltest Du bei der Verwendung von qualitativen Farbskalen beachten:

  • Verwende so wenig wie möglich unterschiedliche Farben. Forschungen zeigen, dass wir Menschen mit drei bis vier unterschiedlichen Farben sehr gut zurechtkommen, aber bei mehr als sechs Farben erhebliche Probleme mit der Wahrnehmung bekommen. Wie Du den Einsatz von Farben in Diagrammen effektiv reduzieren kannst, erfährst Du in diesem Blogartikel.
  • Vermeide Farben, welche für Menschen mit Farbsehschwäche schwer zu unterscheiden sind.
  • Überlege Dir genau, welche Farbsequenz (Helligkeitsstufe) Du verwenden möchtest. Dunklere Farben werden vom Publikum mit größeren Zahlen assoziiert und vice versa.
  • Die unterschiedlichen Farbtöne sollten in der gleichen Helligkeitsstufe (Sequenz) liegen.
Qualitative Farbskala

Abbildung 2: Farbring. Die Punkte repräsentieren die Farben der einzelnen Filialen und befinden sich alle auf der gleichen Helligkeitsstufe (Farbsequenz)

ANWENDUNG

Betrachte das nachfolgende Beispiel für die Verwendung qualitativer Farbskalen.

Beispiel Qualitative Farbskala

Abbildung 3: Umsatzentwicklung 2017 bis 2020 pro Produkt. Die Produkte A bis E werden anhand der qualitativen Farbskala von ColorBrewer 5-class Paired dargestellt.

Der Einsatz von Farben zur Darstellung von Werten

Für die Darstellung von quantitativen Daten wie Umsatz, Temperatur, Rangwerte, Umfrageergebnisse etc. kommen sequenzielle oder divergierende Farbskalen zum Einsatz.

Sequenzielle Farbskala

Sequenzielle Farbskala

Abbildung 4: Sequenzielle Farbskala – ColorBrewer Blues

Eine solche Skala enthält eine Folge von Farben, wo klar ersichtlich wird, welche Werte größer oder kleiner sind (je dunkler desto größer und je heller desto kleiner ist der Wert). 

Sequenzielle Skalen können auf einem einzelnen Farbton basieren (z.B. reichen sie von Hellblau bis Dunkelblau; Abbildung 5) oder auf mehreren Farbtönen (z.B. von Hellgrün bis Dunkelblau; Abbildung 6). 

Sequenzielle Farbskala mit einem Farbton

Abbildung 5: Sequenzielle Farbskala mit einem einzigen Farbton

Sequenzielle Farbskala mit mehreren Farbtönen

Abbildung 6: Sequenzielle Farbskala mit mehreren Farbtönen

Folgende Punkte solltest Du bei der Verwendung von sequenziellen Farbskalen beachten:

  • Für größere Zahlen verwende die dunkleren Farben auf der Skala (dunkle Werte werden stärker wahrgenommen und deshalb mit größer assoziiert).
  • Verwende für den dunkleren Farbbereich natürliche Farben wie Blau oder Violett und für den helleren Grün oder Gelb.
  • Verwende keine Regenbogenskala mit zu vielen Farben. Untersuchungen haben gezeigt, dass solche Farbskalen für uns Menschen sehr schwer akkurat zu interpretieren sind.  

ANWENDUNG

Die Darstellung von Werten anhand der sequenziellen Farbskala ist beispielsweise in Kartendiagrammen besonders nützlich.

Die Karte einer geografischen Region wird dann entsprechend den Datenwerten eingefärbt. Solche Karten werden Choroplethen (auch Flächenkartogramme) genannt.

Abbildung 7 zeigt ein Beispiel, in dem die Umsätze in Österreich nach Bundesländern auf einer Karte abgebildet werden. Je geringer der Umsatz desto heller die Fläche und vice versa.

Sequenzielle Farbskala mit einem Farbton

Abbildung 7: Sequenzielle Farbskala mit einem einzigen Farbton – Umsatz nach Bundesländern – ColorBrewer 9-class Blues

Divergierende Farbskala

Divergierende Farbskala

Abbildung 8: Divergierende Farbskala – ColorBrewer BrBG

Bei dieser Art von Skala werden zwei Farbtöne verwendet, um eine Teilung anzuzeigen, beispielsweise in positive und negative Werte. Du kannst Dir eine divergierende Farbskala wie zwei sequenzielle Skalen vorstellen, die an einem gemeinsamen Mittelpunkt zusammengefügt sind. Dieser Mittelpunkt ist normalerweise durch eine helle Farbe dargestellt.

Divergierende Farbskala

Abbildung 9: Divergierende Farbskala

Folgende Punkte solltest Du bei der Verwendung von divergierenden Farbskalen beachten:

  • Stelle sicher, dass die Farbtöne jeder Skala nicht zu nahe beieinander liegen, da sonst der Abstand vom Mittelpunkt eher verdeckt statt betont wird.
  • Die Helligkeitswerte der Farben müssen ausbalanciert sein, sodass der Übergang von hellen Farben in der Mitte zu dunklen Farben auf der Außenseite eine ähnliche stufenweise Veränderung aufweist.
  • Verwende für divergierende Farbskalen vorzugsweise Braun bis Grünblau, Rosa bis Gelbgrün und Blau bis Rot.

ANWENDUNG

Die Darstellung von Werten anhand der divergierenden Farbskala kommt häufig bei Umfrageauswertungen anhand der Likert-Skala zum Einsatz.

Abbildung 10 zeigt ein Beispiel, wo anhand der Likert-Skala die divergierende Farbskala angewendet wird.

Divergierende Farbskala anhand der Likert-Skala

Abbildung 10: Divergierende Farbskala anhand der Likert-Skala – Umfrageergebnis von “Stimme voll zu” bis “Stimme gar nicht zu” – ColorBrewer 5-class BrBG

Der Einsatz von Farben zur Lenkung der Aufmerksamkeit

An dieser Stelle unterscheiden wir zwischen Hervorhebung und Warnung/Alarmierung.

Hervorhebung

Farbe zum Hervorheben wird verwendet, um die Aufmerksamkeit des Betrachters aktiv in einer Visualisierung zu lenken, d.h. mit Hervorhebungen wird dem Betrachter gezeigt, wo er in der Visualisierung hinschauen soll. Farbe zum Hervorheben bedeutet aber nicht warnen oder alarmieren.

Hervorhebungen können auf verschiedene Art und Weise erfolgen:

Hervorheben…

  • eines bestimmten Datenpunkts
  • von Werten in einer Tabelle
  • einer bestimmten Linie in einem Liniendiagramm
  • eines bestimmten Balkens in einem Balkendiagramm
  • etc.

Eine Möglichkeit um die Aufmerksamkeit zu Lenken, besteht darin, die relevanten Elemente in einer Visualisierung mit sogenannten Akzentfarben einzufärben, die sich stark von den anderen Elementen im Diagramm abheben.

Es gibt dafür eigene Farbskalen, die einerseits in der Farbintensität reduzierte Farben und andererseits dazu passende, dunklere und farbintensivere Farben enthalten. 

Nachfolgend eine Farbskala von ColorBrewer. Die ersten vier Farben von links sind die Grundfarben und etwas heller, die restlichen drei Farben sind die Akzentfarben, kräftiger und intensiver in der Erscheinung.

Akzentfarbskala

Abbildung 11: Akzentfarbskala – ColorBrewer 7-class Accent

Du kannst natürlich auch jede beliebige Farbskala nehmen und einige Farben aufhellen und andere dunkler, intensiver darstellen.

Eine weitere Möglichkeit besteht darin, Grauwerte zu nehmen und mit Farben zu kombinieren. Diese Variante ist mein persönlicher Favorit, weil sich Farben von Grautönen sehr gut abheben und die Lenkung der Aufmerksamkeit aus meiner Sicht am besten funktioniert. 

Akzentfarbskala mit Grau

Abbildung 12: Akzentfarbskala mit Grau

ANWENDUNG

Als Beispiel eine Umfrageauswertung zu diversen Getränken. 

Beispiel Akzentfarbskala

Abbildung 13: Akzentfarbskala – ColorBrewer 5-class set2

Bei der Anwendung von Akzentfarben ist zu beachten, dass die Grundfarben nicht um Aufmerksamkeit konkurrieren. Mach nicht den Fehler und verwende zu bunte Grundfarben.

Auf der sicheren Seite (meine Empfehlung) bist Du, wenn Du als Grundfarbe Grau verwendest, wie in Abbildung 13.

Warnung/Alarmierung

Alarmierende Farbe wird verwendet, wenn der Betrachter auf ein kritisches Ereignis aufmerksam gemacht werden soll.

In diesem Fall solltest Du helle, alarmierende Farben verwenden, wie im folgenden Beispiel.

Beispiel Warnung

Abbildung 14: Warnung/Alarm

Farbsehschwäche (Farbenblindheit)

Ungefähr 8% der Männer und 0,5% der Frauen leiden an einer Art von Farbsehschwäche (engl. Color Vision Deficiency (CVD))[Birch 1993].

Dieser Mangel wird durch das Fehlen einer von drei Arten von Zapfen im Auge verursacht, die benötigt werden, um alle Farben zu sehen.

Dieser Mangel wird allgemein als Farbenblindheit bezeichnet, aber dieser Begriff ist nicht ganz korrekt. Menschen, die an CVD leiden, können Farben sehen, aber sie können die Farben nicht so unterscheiden wie der Rest der Bevölkerung. Der genauere Begriff ist deshalb “Farbsehschwäche”.

Je nachdem, welcher Zapfen fehlt, kann es für Menschen mit CVD aufgrund der Art und Weise, wie sie das Farbspektrum sehen, sehr schwierig sein, bestimmte Farben zu unterscheiden.

Es gibt 3 Arten von CVD:

  1. Protanopie (Schwäche, Rot zu sehen)
  2. Deuteranopie (Schwäche, Grün zu sehen)
  3. Tritanopie (Schwäche, Blau zu sehen. Sehr selten, nur bei ca. 0,5% der Gesamtbevölkerung)

CVD ist meist vererbt und in erster Linie sind Männer betroffen. 8% scheint nicht viel zu sein, aber betrachte eine Gruppe von 9 Männern, dann besteht eine fast 50% Wahrscheinlichkeit, dass einer davon eine Farbsehschwäche hat.

In einer Gruppe von 25 Männern besteht eine 88% Chance, dass einer davon CVD hat.

Aus diesem Grund müssen Datenvisualisierungen für ein größeres Zielpublikum (Publikationen, Präsentationen in große Unternehmen, etc.) unbedingt farbenblind-freundlich gestaltet werden.

Am häufigsten kommt bei Menschen die Rot- und Grün-Schwäche vor, d.h. sie haben Probleme diese beiden Farben zu unterscheiden. Verzichte deshalb, wenn möglich, auf die Kombination von Rot und Grün und generell auf die gängigen Ampelfarben. 

Betrachte das Problem doch einfach selbst

Schauen wir uns ein Beispiel an, wo sehr schnell klar wird, dass eine schlechte Farbenkombination bei Menschen mit CVD sehr leicht für Verwirrung sorgen kann.

In Abbildung 15 ein Diagramm mit den traditionellen Ampelfarben rot, gelb und grün.

In Abbildung 16 siehst Du dann eine Deuteranopie-Simulation. So würde eine Person mit dieser Farbsehschwäche das Diagramm sehen.

Ampelfarben

Abbildung 15: Diagramm mit traditionellen Ampelfarben

Ampelfarben für Menschen mit CVD

Abbildung 16: Deuteranopie-Simulation – So sehen Menschen mit CVD das Diagramm

Rot und Grün ist in Abbildung 16 für Menschen mit Deuteranopie nicht mehr zu unterscheiden.

In der Praxis gibt es eine gängige Lösung für dieses Problem. Du verwendest einfach die Farben Blau und Orange.

Blau statt Grün für positiv (gut) und Orange statt Rot für negativ (schlecht) funktioniert sehr gut, weil fast alle Menschen Blau und Orange voneinander unterscheiden können.

Abbildung 17 mit den Farbenblind-freundlichen Farben Orange und Blau. In Abbildung 18 zeigt die Deuteranopie-Simulation sehr schön, dass diese Farben sehr gut unterschieden werden können.

Farbenblind-freundliche Farben Orange und Blau

Abbildung 17: Blau statt Grün und Orange statt Rot

Farbenblind-freundliche Farben Deuteranopie-Simulation

Abbildung 18: Deuteranopie-Simulation 

Weiter unten zeige ich noch weitere alternative Farben zu den Ampelfarben und mögliche Lösungen für die gemeinsame Verwendung von Rot und Grün.

An dieser Stelle etwas zum Überlegen: Wie glaubst Du gehen Personen mit einer Rot-Grün-Sehschwäche mit Ampelsignalen um, die Rot für Stopp und Grün für Fahren verwenden?

Antwort: Sie merken sich die Reihenfolge der Lichtsignale.

EMPFEHLUNG

Bevor Du eine Visualisierung auf die große weite Welt loslässt, überprüfe diese mit einem CVD-Simulator. Ich kann Dir folgende zwei kostenlose Online-Tools empfehlen:

Coblis – Color Blindness Simulator

Chromatic Vision Simulator

 

Farbenblind-freundliche Visualisierungen entwerfen

Die gemeinsame Verwendung der Farben Rot und Grün in Visualisierungen ist ein häufiges Problem.

Menschen mit einer starken CVD nehmen sowohl Rot als auch Grün als Braun wahr. Menschen mit einer schwachen CVD können zwar fettes Rot und Grün unterscheiden aber können trotzdem Probleme haben diese zu Unterscheiden, wenn das Rot nicht rot genug und das grün nicht grün genug ist.

Verwende eine farbenblind-freundliche Farbpalette

Abbildung 19 zeigt eine qualitative Farbpalette (zur Unterscheidung von verschiedenen Kategorien), welche für alle Farbstörungen sehr gut geeignet ist. 

Die verschiedenen Simulationen zeigen, dass die Farben für alle Farbsehschwächen sehr gut zu unterscheiden sind.

Qualitative Farbpalette – geeignet für alle Farbstörungen

Farbenblind-freundliche Farbpalette

Protanopie-Simulation

Protanopie-Simulation

Deuteranopie-Simulation

Deuteranopie-Simulation

Tritanopie-Simulation

Tritanopie-Simulation

Abbildung 19: Farbenblind-freundliche Farbpalette mit Protanopie-, Deuteranopie- und Tritanopie-Simulation

Das Problem beschränkt sich nicht nur auf Rot und Grün

Die Nutzung folgender Farben ist problematisch:

Vermeide die gemeinsame Verwendung von

  • Rot und Grün
  • Orange und Braun.

Bei Menschen mit einer starken Rot-Schwäche (Protanopie) erscheint Rot, Grün und Orange als Braun, siehe Abbildung 20.

Protanopie-Simulation

Abbildung 20: Rot, Grün, Orange, Braun – Protanopie-Simulation

Vermeide auch die gemeinsame Verwendung von

  • Blau und Violett
  • Pink und Grau

Bei einer starken Grün-Schwäche (Deuteranopie) kann Blau nicht von Violett und Pink nicht von Grau unterschieden werden, siehe Abbildung 21.

Deuteranopie-Simulation

Abbildung 21: Blau, Violett, Pink, Grau -Deuteranopie-Simulation

Was tun, wenn die Verwendung von Rot und Grün unbedingt notwendig ist?

Vielleicht sind die Farben Rot und Grün Teil des Corporate Designs vom Unternehmen.

Vielleicht möchte auch einfach nur ein Kunde oder der sture Chef, dass Du diese beiden Farben im Diagramm verwendest. Was kannst Du in diesem Fall tun?

Nachfolgend 2 praktische Tipps:

1.  Zusätzliche Hinweise zur Unterscheidung anbieten

Eine einfach Möglichkeit um Menschen mit Farbsehschwäche entgegenzukommen, ist die Verwendung von zusätzlichen Indikatoren wie Pfeile, Symbole, Beschriftungen, Vorzeichen etc., welche darauf hinweisen, ob ein Wert beispielsweise positiv oder negativ ist. 

Abbildung 22 zeigt ein Beispiel, wo es unproblematisch ist, die Farben Grün und Rot gemeinsam zu verwenden, da zusätzliche Pfeile und die Verwendung der Vorzeichen (+) und (-) bei den Werten Interpretationshinweise geben.

Zusätzliche Hinweise

Abbildung 22: Pfeile und Vorzeichen bei den Werten helfen Menschen mit Farbsehschwäche das Diagramm richtig zu interpretieren.

2.  Verwende sehr helle und dunkle Farben, um einen guten Kontrast zwischen Grün und Rot zu erzeugen

Bei den meisten Menschen mit Farbsehschwäche ist diese nur leicht ausgeprägt. Diese Menschen haben kaum ein Problem den Farbwert, also hell oder dunkel zu erkennen, sondern ein Problem den Farbton (Rot und Grün) zu unterscheiden. 

Das bedeutet, eine praktische Lösung ist die Verwendung von einem sehr hellen Grün und einem sehr dunklen Rot.

Auch Menschen mit einer schweren Farbsehschwäche können so zumindest noch einen Unterschied anhand der Helligkeit zwischen diesen beiden Farben erkennen.

Die folgenden Abbildungen sollen diesen Effekt verdeutlichen.

Rot-Grün-Deuteranopie-Simulation

Abbildung 23: Rot-Grün-Vergleich. Die Deuteranopie-Simulation zeigt, dass keine Unterscheidung zwischen den Farben für Menschen mit Farbsehschwäche möglich ist.

Rot-Grün-Deuteranopie-Simulation

Abbildung 24: Alternative Rot-Grün Variante, farbenblind-freundlich. Dunkles Rot und helles Grün mit Deuteranopie-Simulation.

Zusammenfassung

Du solltest die Auswahl von Farben nicht willkürlich machen. Nutze standardisierten Farbskalen, wie beispielsweise vom kostenlosen Online Tool “ColorBrewer“.

Verwendung von Farben in der Datenvisualisierung

Zusammenfassung_Einsatzzweck_Farbskalen

Abbildung 25: Einsatzzweck von Farben und dazugehöriger Farbskalentyp.

Farbsehschwäche (Farbenblindheit)

Ungefähr 8% der Männer und 0,5% der Frauen leiden an einer Art von Farbsehschwäche (engl. Color Vision Deficiency (CVD)).

Es gibt 3 Arten von Farbsehschwäche:

  1. Protanopie (Schwäche, Rot zu sehen)
  2. Deuteranopie (Schwäche, Grün zu sehen)
  3. Tritanopie (Schwäche, Blau zu sehen. Sehr selten, nur bei ca. 0,5% der Gesamtbevölkerung)

Nutze farbenblind-freundliche Farbpaletten (ColorBrewer), vor allem dann, wenn Deine Visualisierung einem großen Publikum zugänglich ist (Publikationen, Firmenpräsentationen, etc.).

Sogenannte CVD-Simulatoren (Coblis, Chromatic Vision Simulator) zeigen Dir an, ob Deine Visualisierung farbenblind-freundlich ist oder nicht.

Rot und Grün gemeinsam verwenden

Die gemeinsame Verwendung der Farben Rot und Grün in Visualisierungen ist durchaus möglich. Verwende einfach zusätzliche Hinweise in Form von Symbolen, Pfeilen, Zeichen etc., um den Unterschied hervorzuheben.

Eine weitere Möglichkeit ist die Verwendung von sehr hellen und dunklen Farbwerten für Grün und Rot.

Ich hoffe dieser Artikel hat Dir gefallen und Du kannst einiges für Dich mitnehmen und und in der Praxis anwenden.

Hinterlasse ein Kommentar unten, wenn Du etwas anregen oder mitteilen möchtest, ich würde mich sehr darüber freuen!

Beste Grüße,

Joe

Passender Kurs

€1

Datenvisualisierung & Storytelling – Advanced

Von der Datenstory zur Visualisierung