Wie man farbenblind-freundliche Paletten gestaltet

Das erste Mal, dass ich Farbenblindheit wirklich verstand, war nicht durch eine Spezifikation – es war durch ein Code-Review. Ich hatte ein Status-Dashboard gebaut, in dem grüne Punkte 'gesund' und rote Punkte 'ausgefallen' bedeuteten, und ein Backend-Entwickler im Team erwähnte, fast entschuldigend, dass er nicht erkennen könne, welche Server in Flammen stünden. Er ist einer von etwa einem von zwölf Männern mit einer Rot-Grün-Farbsehschwäche. Mein schönes Ampelsystem war für ihn ein Raster identischer bräunlich-grauer Kreise. Am Code war nichts kaputt. Am Design war alles kaputt.

Genau das ist das Tückische an der Gestaltung einer farbenblind-freundlichen Palette: Die Fehler sind für die Person, die sie ausgeliefert hat, unsichtbar. Du kannst den Bug nicht fühlen. Also musst du dir die Gewohnheit antrainieren, so zu gestalten, als wäre Farbe eine Information, die du jederzeit verlieren könntest – denn für einen nennenswerten Teil deiner Nutzer ist sie das bereits.

Wie häufig ist sie, und was geht tatsächlich schief

Farbsehschwäche (CVD) betrifft etwa 8 % der Männer und 0,5 % der Frauen nordeuropäischer Abstammung – grob 1 von 12 Männern und 1 von 200 Frauen. Bei einem Produkt mit nennenswertem Publikum ist das kein Randfall. Das ist eine Spalte in deinen Analytics.

Die Schwäche ist nicht 'in Schwarzweiß sehen' – echte Monochromasie ist verschwindend selten. Was passiert, ist, dass ein Zapfentyp im Auge verschoben oder nicht vorhanden ist, was bestimmte Farben aufeinander zusammenfallen lässt. Die Haupttypen, nach Häufigkeit:

• Deuteranomalie und Deuteranopie – verminderte oder fehlende Grünzapfen-Reaktion. Das ist der große Fall: Deuteranomalie allein betrifft rund 5 % der Männer und ist damit die mit Abstand häufigste Form. Rot, Grün, Braun und Orange verschwimmen miteinander.
• Protanomalie und Protanopie – verminderte oder fehlende Rotzapfen-Reaktion, rund 1 % der Männer für die volle Form. Ähnliche Rot-Grün-Verwechslung, aber Rottöne wirken auch dunkler und können gegen Schwarz verschwinden.
• Tritanopie und Tritanomalie – Blau-Gelb-Schwäche. Wirklich selten (in der Größenordnung von 0,01 % und nicht geschlechtsgebunden, betrifft also Männer und Frauen etwa gleich), aber einen Blick wert, weil sie die Blau-Grün- und Gelb-Pink-Unterscheidungen bricht, die die anderen Typen unberührt lassen.

Die praktische Quintessenz: rund 99 % der CVD ist Rot-Grün. Wenn deine Palette eine Rot-Grün-Simulation übersteht, hast du die überwältigende Mehrheit der betroffenen Nutzer abgedeckt. Genau dort solltest du deine Aufmerksamkeit zuerst hinlenken.

Das ist ein anderes Problem als Kontrast

Hier ist die Unterscheidung, die selbst sorgfältige Teams stolpern lässt. Helligkeitskontrast (die WCAG-Art) geht um hell gegen dunkel – kannst du den Text lesen. Farbsehschwäche geht um Farbtonverwechslung – kannst du zwei Farben auseinanderhalten, wenn sie zufällig ähnlich hell sind. Das sind unabhängige Probleme, und du kannst das eine versagen, während du das andere meisterst.

Das klassische Beispiel: Reines Rot #FF0000 auf reinem Grün #008000 hat einen Helligkeitskontrast von etwa 1,3:1, was WCAG böse durchfällt – aber selbst wenn du den Kontrast 'reparieren' würdest, hätte ein Deuteranop weiterhin Mühe, weil die beiden Farbtöne selbst zusammenfallen. Umgekehrt können zwei Farben einen wunderbaren Kontrast haben und trotzdem eine CVD-Falle sein, wenn du ihren Farbton, und nur ihren Farbton, zur Bedeutungsübermittlung nutzt.

Eine farbenblind-freundliche Palette und eine WCAG-konforme Palette sind also überlappende Kreise, nicht derselbe Kreis. Du brauchst beide. Falls noch nicht geschehen, lohnt es sich, WCAG-Kontrastverhältnisse erklärt ergänzend dazu zu lesen – Helligkeitskontrast ist das Fundament, und CVD-sicheres Design ist die Schicht darüber.

Die eine Regel, die das meiste löst: verlass dich nie allein auf Farbe

Wenn du ein einziges Prinzip aus diesem Artikel mitnimmst, dann dieses: Verlass dich nicht allein auf Farbe, um Informationen zu übermitteln. Das W3C macht das zu einer ausdrücklichen Anforderung – WCAG-Erfolgskriterium 1.4.1, Benutzung von Farbe – und es ist die wirkungsvollste Gewohnheit, die du dir antrainieren kannst.

Die Lösung ist fast immer Redundanz. Wann immer Farbe Bedeutung trägt, paare sie mit einem zweiten, farbunabhängigen Signal:

• Text oder Beschriftungen. Mein Server-Dashboard wurde in dem Moment besser, in dem jeder Punkt zusätzlich 'Up' oder 'Down' sagte. Langweilig, kugelsicher.
• Icons und Formen. Ein Häkchen, ein X, ein Warndreieck. Fehlerzustände bekommen ein anderes Icon, nicht nur eine andere Farbe. Deshalb zeigt ein gutes Formular einen roten Rahmen und ein Fehler-Icon und eine Meldung.
• Muster und Texturen. Füll in Diagrammen Balken oder Flächen mit Schraffuren, Punkten oder Strichen, damit sich Kategorien auch in Graustufen unterscheiden.
• Position und Reihenfolge. Eine Legende, die derselben Reihenfolge von oben nach unten folgt wie die gestapelten Flächen, die sie beschreibt, lässt Menschen nach Position statt nach Farbton zuordnen.

Der schnelle Test, den ich auf jeden Screen anwende: Stell dir vor, er wäre auf einem Schwarzweiß-Laserdrucker ausgedruckt. Wenn du ihn dann noch verstehst, verlässt du dich nicht allein auf Farbe. Wenn zwei Zustände identisch werden, hast du deinen Bug gefunden.

Farbtöne wählen, die CVD überstehen

Redundanz kümmert sich um die Bedeutung. Aber du willst trotzdem, dass die Farben selbst nach Möglichkeit unterscheidbar bleiben – besonders in der Datenvisualisierung, wo du nicht jeden von 200 Datenpunkten mit einer Textbeschriftung versehen kannst.

Ein paar Faustregeln aus der Praxis:

• Vermeide Rot-Grün als deinen einzigen Kontrast. Die 'gut/schlecht'-, 'vorher/nachher'-, 'Team A/Team B'-Paarung, die standardmäßig auf Rot und Grün zurückgreift, ist der mit Abstand häufigste CVD-Fehler. Wenn du zwei gegensätzliche Farben brauchst, ist Blau und Orange das sicherste Paar auf dem Planeten – es bleibt über jeden CVD-Typ hinweg unterscheidbar. Blau und Rot ist eine solide zweite Wahl.
• Stütz dich auf Helligkeitsunterschiede, nicht nur auf den Farbton. Wenn sich zwei Kategorien auch in der Helligkeit unterscheiden, können CVD-Betrachter sie auseinanderhalten, selbst wenn die Farbtöne zusammenfallen. Ein helles Blau gegen ein dunkles Blau liest sich für alle als zwei Dinge.
• Sei vorsichtig mit den Zwischen-Farbtönen. Türkis, Oliv, Braun und schlammige Orangetöne sitzen genau in der Gefahrenzone der Rot-Grün-Schwäche. Reine, gut getrennte Farbtöne schneiden besser ab als trübe.

Statt das neu zu erfinden, stell dich auf die Schultern derer, die es streng gelöst haben. Die Okabe-Ito-Palette (auch Wong-Palette, nach Bang Wongs Artikel in Nature Methods von 2011) ist ein achtfarbiges Set, das so konstruiert wurde, dass es über alle gängigen CVD-Typen hinweg unterscheidbar bleibt. Die Hex-Codes lohnt es sich zu speichern: Orange #E69F00, Himmelblau #56B4E9, Blaugrün #009E73, Gelb #F0E442, Blau #0072B2, Zinnoberrot #D55E00, rötliches Violett #CC79A7 und Schwarz #000000. Ich habe sie als kategoriale Palette für mehr Dashboards verwendet, als ich zählen kann, und sie hat noch nie eine Simulation nicht bestanden.

Wenn du eine Marken- oder UI-Palette statt eines Diagramms baust, brauchst du in der Regel keine acht CVD-unterscheidbaren Farben – du brauchst ein paar Akzente, die nicht kollidieren. Genau da rechtfertigt der Farbpaletten-Generator seinen Platz: Bau deine Harmonie (ein Split-Komplementär- oder triadisches Schema), lies die HSL-Werte ab und schieb dann deine zwei semantisch wichtigsten Farben bewusst sowohl in der Helligkeit als auch im Farbton auseinander. Die HSL-Anzeige macht das leicht – senke die Helligkeit der einen, erhöhe die der anderen, und schon hast du dir eine Trennung erkauft, die CVD übersteht. Wenn du verstehen willst, warum bestimmte Kreisbeziehungen stärker kollidieren als andere, geht Split-Komplementär vs. triadische Paletten auf die Geometrie ein.

Teste es – vertraue nicht deinen eigenen Augen

Das kannst du nicht nach Augenmaß beurteilen, denn (statistisch) hast du vermutlich normales Farbsehen, und der ganze Witz ist, dass der Fehler für dich unsichtbar ist. Du simulierst.

• Coblis (der Color Blindness Simulator auf Colblindor) lässt dich einen Screenshot hochladen und ihn durch acht verschiedene Schwächetypen betrachten. Alles läuft lokal in deinem Browser, du kannst also Exporte in voller Auflösung darauf werfen. Das ist meine erste Wahl, um einen fertigen Screen zu prüfen.
• Browser-DevTools. Chromes Rendering-Panel hat ein Dropdown 'Emulate vision deficiencies' – Protanopie, Deuteranopie, Tritanopie und verschwommenes Sehen – live auf die echte Seite angewandt. Brillant, um Probleme schon im Markup zu erwischen.
• Figma- und Sketch-Plugins wie Stark oder die eingebauten Sehsimulatoren lassen dich Designs prüfen, bevor sie überhaupt gebaut sind.

Mein tatsächlicher Arbeitsablauf: normal gestalten, dann die zentralen Screens – Dashboards, Diagramme, Formularfehler, alles, wo Farbe etwas bedeutet – zuerst durch Deuteranopie (am häufigsten) laufen lassen, dann Protanopie, dann ein kurzer Tritanopie-Durchgang. Neunzig Prozent der Probleme, die ich finde, stecken in dieser ersten Deuteranopie-Ansicht. Behebe die, und du hast den meisten Menschen mit dem geringsten Aufwand geholfen.

Die Fehler, die ich immer wieder sehe

• Rot/grüne Validierungszustände ohne Icon. Der häufigste. Ein roter Rahmen und ein grüner Rahmen sind für Millionen von Nutzern derselbe Rahmen. Füge ein Icon und eine Meldung hinzu, immer.
• Heatmaps und Diagramme, die nur den Farbton variieren. Eine Grün-zu-Rot-Heatmap ist ein CVD-Minenfeld. Verwende eine sequenzielle Skala, die auch die Helligkeit hochfährt (etwa hellgelb bis dunkelblau), oder ergänze Wertbeschriftungen.
• Farbcodierte Legenden, die nur über die Farbe zugeordnet werden. Wenn die einzige Möglichkeit, eine Linie ihrer Beschriftung zuzuordnen, lautet 'finde die grüne', sind CVD-Nutzer aufgeschmissen. Ordne die Legende passend zu den Daten an oder beschrifte direkt an der Linie.
• Annehmen, dass 'es hat WCAG bestanden' bedeutet 'es ist barrierefrei'. Kontrast und CVD sind verschiedene Achsen. Eine Palette kann überall 4,5:1 erreichen und bei Deuteranopie trotzdem zu Brei zusammenfallen. Teste beides.
• Nur auf dem eigenen perfekten Monitor gestalten. Derselbe blinde Fleck, der Kontrastprobleme verbirgt, verbirgt auch CVD-Probleme. Simuliere, jedes Mal.

Nichts davon verlangt von dir, hässliche Interfaces zu gestalten oder auf Farbe zu verzichten. Farbe ist wunderbar, und du solltest sie frei einsetzen. Die Disziplin besteht nur in diesem: Lass Farbe die erfreuende Schicht sein, niemals die einzige Schicht. Paare jeden bedeutungstragenden Farbton mit einer Beschriftung, einem Icon oder einer Form; wähle Paarungen, die einen Rot-Grün-Kollaps überstehen; stütz dich auf Helligkeit ebenso wie auf den Farbton; und lass den Simulator laufen, bevor du es für fertig erklärst. Tu das, und der nächste Entwickler, der deine grünen Punkte nicht sehen kann, wird trotzdem genau wissen, welche Server in Flammen stehen.