Farbenblindfreundliche Farbpaletten und wie du Designs testest

Eine farbenblindfreundliche Palette ist eine Reihe von Farben, die für Menschen unterscheidbar bleiben, die bestimmte Farbtöne verwechseln, meist Rot und Grün. Der Trick: Trenne Farben nach Helligkeit und nach Farbton, und lass Farbe nie das einzige Signal sein. Ein dunkles Blau und ein helles Orange bleiben für fast alle verschieden; ein mittleres Rot und ein mittleres Grün mit ähnlicher Helligkeit können wie dasselbe trübe Braun aussehen. Unten findest du Paletten zum Kopieren, Paare, die du meiden solltest, und drei kostenlose Wege, deine Arbeit zu testen.

Formen der Farbenblindheit, kurz erklärt

Farbsehen beruht auf drei Arten von Zapfen im Auge, grob auf lange, mittlere und kurze Wellenlängen abgestimmt. Fehlt eine Art oder ist sie verschoben, sehen manche Farben, die für die meisten Menschen verschieden wirken, plötzlich gleich aus. Der WebAIM Artikel über Farbenblindheit erklärt die Biologie; fürs Design zählt diese Tabelle.

Der gemeinsame Nenner: Der Farbton wird unzuverlässig, aber die Helligkeit bleibt erhalten. Ein Mensch mit Deuteranopie sieht weiterhin klar, dass eine Farbe dunkler ist als eine andere. Diese eine Tatsache bestimmt jede Regel unten.

Eine farbenblindfreundliche Palette zum Kopieren

Das bekannteste sichere Set ist die Palette, die Masataka Okabe und Kei Ito für wissenschaftliche Abbildungen vorgeschlagen haben. Ihre acht Farben wurden so gewählt, dass sie bei den häufigen Formen der Farbenblindheit unterscheidbar bleiben, und sie funktioniert genauso gut für Diagramme, Karten, Labels und Statusfarben in einem Produkt.

Für Markenarbeit sind acht Farben meist zu viele. Das sicherste Einzelpaar ist Blau und Orange: Sie liegen auf entgegengesetzten Seiten der Rot-Grün-Verwechslungslinie und unterscheiden sich in der Helligkeit, daher wirken sie für fast alle verschieden. Blau mit Gelb sowie dunkles Lila mit hellem Grün halten ebenfalls gut.

Verläufe und Skalen für Daten

Für Heatmaps und Diagramme, die einen Bereich zeigen, nutze eine Skala, deren Helligkeit sich von einem Ende zum anderen gleichmäßig ändert. Eine Skala von Rot nach Grün scheitert doppelt: Die Enden verwirren farbenblinde Leser, und beide Enden sind ähnlich hell. Blau nach Orange oder ein einzelner Farbton von dunkel nach hell funktioniert für fast alle.

Paare, die du meiden solltest, und was stattdessen

Manche Kombinationen machen immer wieder Ärger. Das Rot #d7263d und das Grün #2e9e44 oben sehen für die meisten Menschen klar verschieden aus, aber ihre wahrgenommene Helligkeit ist fast gleich (rund 57 % und 62 % in OKLCH), sodass für jemanden mit Deuteranopie kaum etwas bleibt, um sie zu unterscheiden.

Wenn deine Markenfarben Rot und Grün sind, musst du sie nicht ändern. Mach eine davon deutlich dunkler als die andere, und nutze sie nie als einzigen Unterschied, etwa zwischen Gewinn und Verlust. Ein Pfeil oder ein Plus- und Minuszeichen löst das für alle. Wie du die Farben überhaupt auswählst, steht in Markenfarben wählen.

Verlass dich nie allein auf Farbe

Das ist die wichtigste Regel, und sie ist auch Teil der Web Content Accessibility Guidelines. Wenn sich eine Diagrammlegende, ein Formularfehler, ein Badge „auf Lager“ oder eine Karte nur durch Farbe unterscheidet, verlieren manche Leser die Bedeutung. Ergänze ein zweites Signal:

• Labels direkt an Linien und Balken im Diagramm statt einer Farblegende.
• Icons für Zustände: ein Haken für Erfolg, ein Kreuz oder Warnzeichen für Fehler.
• Muster oder Linienstile, etwa gestrichelte und durchgezogene Linien, in Diagrammen.
• Position und Reihenfolge, damit das erste Element immer dasselbe bedeutet.
• Textkontrast, der für sich besteht, geprüft mit einem Kontrastprüfer.

Social-Media-Grafiken brauchen dieselbe Sorgfalt. Ein Post, der „Grün heißt verfügbar“ über einem rot-grünen Kalender sagt, verliert einige Leser. Worte tragen das besser, und die Worte selbst müssen sich vom Hintergrund abheben, besonders auf Verläufen, wo sich der Kontrast über das Bild hinweg ändert. Text auf Verläufen erklärt das ausführlich.

Die rechte Version macht ein Gradiently Mark von selbst: Er schiebt seine ruhigste, kontrastreichste Fläche hinter den Text, und die automatische Schriftfarbe wählt für jede Zeile helle oder dunkle Schrift, sodass die Trennung aus der Helligkeit kommt statt aus dem Farbton.

So testest du ein Design auf Farbenblindheit

1. 1

   Mach den Graustufentest

   Exportiere das Design oder mach einen Screenshot und wandle ihn in Graustufen um. Werden zwei Farben mit verschiedener Bedeutung zum selben Grau, ändere die Helligkeit einer davon.

2. 2

   Im Browser simulieren

   Öffne in Chrome oder Edge die Entwicklertools, rufe das Befehlsmenü auf, tippe Rendering und nutze Emulate vision deficiencies, um die Live-Seite als Protanopie, Deuteranopie, Tritanopie oder Achromatopsie zu sehen.

3. 3

   Den ganzen Bildschirm in Grau prüfen

   Mac und Windows haben in den Bedienungshilfen einen Graustufenfilter. Schalte ihn ein, um Apps, Designdateien und Exporte zu prüfen, nicht nur Webseiten.

4. 4

   Farbe entfernen und neu lesen

   Frag dich, ob jedes Diagramm, jedes Badge und jeder Status allein mit Labels und Icons noch Sinn ergibt. Wenn ja, ist Farbe Dekoration, und genau da gehört sie hin.

Simulationen sind Annäherungen, und Farbsehen ist von Mensch zu Mensch verschieden. Wenn Barrierefreiheit für dein Produkt zählt, bitte farbenblinde Menschen, die du kennst, sich das echte Ergebnis anzusehen. Speziell für Diagramme findest du in Infografik-Design mehr zu Beschriftung und Layout, und Farbharmonie hilft, wenn du eine sichere Palette brauchst, die trotzdem durchdacht wirkt.