Ratgeber farbenblindfreundliche Paletten – praktische Regeln für Design und Entwicklung

Okabe-Ito- und Paul-Tol-Paletten im Vergleich mit Protan-, Deutan- und Tritan-Simulation sowie Designregeln, die nicht auf Farbe angewiesen sind: Helligkeitskontrast, doppelte Kodierung und WCAG-Kriterien.

Wenn etwa jeder zwölfte Mann (bei europäischer Abstammung) eine Rot-Grün-Störung hat, sind unter den Betrachtern von Diagrammen, Karten und Dashboards immer auch Menschen mit Farbsehschwäche. Die gute Nachricht: Mit ein paar Regeln verschwinden die meisten Probleme.

Regel 1 – Informationen nie nur über Farbe vermitteln

Das WCAG-Erfolgskriterium 1.4.1 „Benutzung von Farbe“ legt fest, dass Farbe nicht das einzige visuelle Mittel zur Informationsvermittlung sein darf. Fehlerhafte Eingabefelder erhalten neben dem roten Rahmen ein Symbol und einen Text, Diagrammlinien neben der Farbe eine Form, eine Strichelung oder eine direkte Beschriftung.

Regel 2 – Helligkeitsunterschiede sicherstellen

Auch bei Farbsehschwäche werden Helligkeitsunterschiede gut wahrgenommen. Wählen Sie Farben, die unterschieden werden müssen, mit deutlich verschiedener Helligkeit. Am einfachsten prüfen Sie das, indem Sie testen, ob alles auch im Schwarz-Weiß-Druck unterscheidbar bleibt.

Regel 3 – Rot-Grün-Paare vermeiden, Blau-Orange verwenden

„Gut = Grün, schlecht = Rot“ ist der häufigste Fehler. Bei Protan und Deutan erscheinen beide als ähnliches Ocker. Braucht man einen Kontrast zwischen zwei Kategorien, ist Blau ↔ Orange am sichersten.

Bewährte Paletten

Die von Okabe und Ito vorgeschlagene Palette für „Color Universal Design“ besteht aus 8 Farben, die auch bei Rot-Grün-Störungen unterscheidbar sind. Die Tabelle unten zeigt dieselben Farben in einer Dichromasie-Simulation (Machado 2009, Stärke 100 %).

Okabe-Ito-Palette (8 Farben) – jede Zeile zeigt dieselbe Farbe, simuliert für jeden Typ
Normales Farbsehen	`#000000`	`#E69F00`	`#56B4E9`	`#009E73`	`#F0E442`	`#0072B2`	`#D55E00`	`#CC79A7`
Protan-Dichromasie	`#000000`	`#B9A200`	`#9BB3EC`	`#9A9271`	`#F8DC23`	`#5375B5`	`#817100`	`#808BA9`
Deutan-Dichromasie	`#000000`	`#CAB411`	`#87A4E8`	`#8A8676`	`#FCE34E`	`#3B67B1`	`#9E8C00`	`#9498A5`
Tritan-Dichromasie	`#000000`	`#FB8C87`	`#00C2C6`	`#009E92`	`#FFD4C5`	`#008289`	`#EB4050`	`#D6788A`

Auch Paul Tols Palette „bright“ ist so zusammengestellt, dass sie Farbsehschwächen und Schwarz-Weiß-Druck zugleich berücksichtigt.

Paul-Tol-Palette „bright“ (7 Farben)
Normales Farbsehen	`#4477AA`	`#EE6677`	`#228833`	`#CCBB44`	`#66CCEE`	`#AA3377`	`#BBBBBB`
Protan-Dichromasie	`#6179AC`	`#848177`	`#8A7B2A`	`#CCB634`	`#B8C8F0`	`#445579`	`#BBBBBB`
Deutan-Dichromasie	`#546FA9`	`#A79D74`	`#7E733A`	`#D1BD4B`	`#A4B9EE`	`#666A74`	`#BBBBBB`
Tritan-Dichromasie	`#008389`	`#FF526D`	`#008576`	`#DBAEA3`	`#00D7D7`	`#B62D50`	`#BBBBBB`

Häufig verwendete Kombinationen aus stark gesättigtem Rot, Grün und Orange überschneiden sich dagegen bei Protan und Deutan.

Negativbeispiel – Kombination aus stark gesättigtem Rot und Grün
Normales Farbsehen	`#E41A1C`	`#4DAF4A`	`#FF7F00`	`#984EA3`	`#A65628`	`#F781BF`
Protan-Dichromasie	`#645817`	`#B3A040`	`#A59100`	`#4166A6`	`#6D6122`	`#8D9CC1`
Deutan-Dichromasie	`#938208`	`#A69852`	`#C4AE00`	`#586EA1`	`#807327`	`#ACB0BC`
Tritan-Dichromasie	`#FC0020`	`#3EAA99`	`#FF616D`	`#9A5971`	`#B6454C`	`#FF7E98`

Gleichmäßige Helligkeitsverläufe für stetige Werte

Für stetige Werte wie Temperatur oder Dichte eignen sich sequenzielle Farbskalen, deren Helligkeit gleichmäßig in eine Richtung verläuft (viridis, cividis u. a.). cividis wurde gezielt mit Blick auf Farbsehschwächen entwickelt.
Regenbogenskalen (jet) haben sprunghafte Helligkeitsverläufe, führen auch ohne Farbsehschwäche zu Fehldeutungen und verlieren im Rot-Grün-Bereich Information.
Für Werte, die in zwei Richtungen abweichen (Zunahme/Abnahme), sind divergierende Skalen in Blau-Weiß-Orange (oder Rot) sicherer als Rot-Grün-Skalen.

Text und Kontrast

Für den Helligkeitskontrast zwischen Fließtext und Hintergrund empfiehlt WCAG 1.4.3 mindestens 4,5:1. Rote Schrift auf schwarzem Hintergrund verliert für Menschen mit Protan-Störung stark an Kontrast.
Ändern Sie bei Links nicht nur die Farbe, sondern behalten Sie die Unterstreichung bei.

Prüfreihenfolge

1. Ist alles auch in Graustufen unterscheidbar?
2. Ist alles im Simulator mit Protan und Deutan bei 100 % unterscheidbar?
3. Gibt es neben der Farbe weitere Hinweise wie Form, Beschriftung oder Muster?
4. Lassen sich Beschriftungen statt einer Legende direkt ans Diagramm setzen?

Wer diese vier Punkte erfüllt, macht seine Unterlagen nicht nur für Menschen mit Farbsehschwäche leichter lesbar, sondern auch für alle, die auf einem blassen Bildschirm, im Schwarz-Weiß-Ausdruck oder draußen bei hellem Licht lesen.

Im Simulator ansehen →