Ist ein Farbenblindheitstest dasselbe wie ein Farbenblindheits-Simulator?

Nein. Ein Farbenblindheitstest misst das Farbsehen einer Person. Ein Simulator zeigt dagegen ungefähr, wie Ihr Design für jemanden mit Farbsehschwäche aussehen kann. Er stellt keine Diagnose.

Wie häufig ist Farbenblindheit?

Laut Colour Blind Awareness ist etwa jeder zwölfte Mann und jede zweihundertste Frau farbenblind. Am häufigsten ist die Rot-Grün-Gruppe.

Sollte ich Rot und Grün gar nicht verwenden?

Sie können sie verwenden. WCAG 1.4.1 verbietet Farbe nicht, sondern dass Farbe der einzige Hinweis ist. Setzen Sie Text, Form oder Muster daneben und rücken Sie die Helligkeit der beiden Farben auseinander.

Wie genau ist die Simulation?

Sie ist eine Annäherung. Die Matrizen stammen aus dem Modell von Machado, Oliveira und Fernandes von 2009 und zeigen die vollständige Form. Bei jemandem mit einer leichten Form ist der Farbverlust geringer als auf dem Bildschirm.

Ist die Warnung „Verwechselbar“ eine WCAG-Regel?

Nein. Die Schwelle von 0,10 ist eine Demo-Regel dieses Tools. Die Zahl in WCAG 1.4.1 ist das Kontrastverhältnis von 3:1 für den Helligkeitsunterschied.

Farbenblindheits-Simulator: Farben prüfen

Probieren Sie Ihre Farben aus

Farbenblindheits-Simulator

Anträge dieser Woche (Beispieldaten)

In Prüfung
Abgelehnt
Genehmigt
Ausstehend

Statusetiketten

In Prüfung
Abgelehnt
Genehmigt
Ausstehend

Ihr Antrag ist in Prüfung. Details finden Sie auf der Seite zum Antrag.

Farbpaare (mit simulierten Farben)

Bei normaler Sicht ist kein Paar verwechselbar.

In Prüfung und AbgelehntAbstand 0,37 · Helligkeit 1,03:1Unterscheidbar
In Prüfung und GenehmigtAbstand 0,33 · Helligkeit 1,47:1Unterscheidbar
In Prüfung und AusstehendAbstand 0,44 · Helligkeit 2,40:1Unterscheidbar
Abgelehnt und GenehmigtAbstand 0,33 · Helligkeit 1,42:1Unterscheidbar
Abgelehnt und AusstehendAbstand 0,25 · Helligkeit 2,33:1Unterscheidbar
Genehmigt und AusstehendAbstand 0,26 · Helligkeit 1,63:1Unterscheidbar

In der Simulation der Protanopie ist 1 Paar verwechselbar: Genehmigt und Ausstehend.

In Prüfung und AbgelehntAbstand 0,30 · Helligkeit 1,67:1Unterscheidbar
In Prüfung und GenehmigtAbstand 0,31 · Helligkeit 1,32:1Unterscheidbar
In Prüfung und AusstehendAbstand 0,37 · Helligkeit 1,73:1Unterscheidbar
Abgelehnt und GenehmigtAbstand 0,19 · Helligkeit 2,21:1Unterscheidbar
Abgelehnt und AusstehendAbstand 0,27 · Helligkeit 2,90:1Unterscheidbar
Genehmigt und AusstehendAbstand 0,08 · Helligkeit 1,31:1Verwechselbar

In der Simulation der Deuteranopie ist 1 Paar verwechselbar: Abgelehnt und Genehmigt.

In Prüfung und AbgelehntAbstand 0,32 · Helligkeit 1,25:1Unterscheidbar
In Prüfung und GenehmigtAbstand 0,31 · Helligkeit 1,41:1Unterscheidbar
In Prüfung und AusstehendAbstand 0,44 · Helligkeit 2,65:1Unterscheidbar
Abgelehnt und GenehmigtAbstand 0,04 · Helligkeit 1,12:1Verwechselbar
Abgelehnt und AusstehendAbstand 0,20 · Helligkeit 2,11:1Unterscheidbar
Genehmigt und AusstehendAbstand 0,18 · Helligkeit 1,87:1Unterscheidbar

In der Simulation der Tritanopie ist 1 Paar verwechselbar: In Prüfung und Genehmigt.

In Prüfung und AbgelehntAbstand 0,34 · Helligkeit 1,06:1Unterscheidbar
In Prüfung und GenehmigtAbstand 0,08 · Helligkeit 1,21:1Verwechselbar
In Prüfung und AusstehendAbstand 0,31 · Helligkeit 1,87:1Unterscheidbar
Abgelehnt und GenehmigtAbstand 0,35 · Helligkeit 1,28:1Unterscheidbar
Abgelehnt und AusstehendAbstand 0,19 · Helligkeit 1,98:1Unterscheidbar
Genehmigt und AusstehendAbstand 0,29 · Helligkeit 1,54:1Unterscheidbar

In der Simulation der Achromatopsie sind 3 Paare verwechselbar: In Prüfung und Abgelehnt; In Prüfung und Genehmigt; Abgelehnt und Genehmigt.

In Prüfung und AbgelehntAbstand 0,01 · Helligkeit 1,03:1Verwechselbar
In Prüfung und GenehmigtAbstand 0,09 · Helligkeit 1,47:1Verwechselbar
In Prüfung und AusstehendAbstand 0,23 · Helligkeit 2,41:1Unterscheidbar
Abgelehnt und GenehmigtAbstand 0,09 · Helligkeit 1,42:1Verwechselbar
Abgelehnt und AusstehendAbstand 0,22 · Helligkeit 2,33:1Unterscheidbar
Genehmigt und AusstehendAbstand 0,13 · Helligkeit 1,63:1Unterscheidbar

Weil JavaScript ausgeschaltet ist, können Sie die Farben nicht ändern. Die Wahl der Sehart und die Ergebnisse für die Beispielfarben funktionieren trotzdem.

Tippen Sie einen Hex-Code oder nutzen Sie die Farbauswahl und wählen Sie dann eine Art des Sehens. Die Werte im Diagramm sind Beispiele. Der Link unterscheidet sich absichtlich nur durch die Farbe. Die Warnung „Verwechselbar“ ist eine Regel dieses Tools, kein Standard.

Formen der Farbenblindheit

Das US-amerikanische National Eye Institute (NEI) beschreibt Farbenblindheit als Farbsehschwäche. Laut Colour Blind Awareness betrifft sie etwa jeden zwölften Mann (8 %) und jede zweihundertste Frau. Weltweit sind das etwa 300 Millionen Menschen.

Am häufigsten ist die Rot-Grün-Gruppe. Das NEI beschreibt die Formen im Simulator so:

Form	Gruppe	Was passiert
Protanopie	Rot-Grün	Rot und Grün lassen sich gar nicht unterscheiden.
Deuteranopie	Rot-Grün	Rot und Grün lassen sich gar nicht unterscheiden.
Tritanopie	Blau-Gelb, seltener	Blau und Grün, Lila und Rot, Gelb und Rosa lassen sich nicht unterscheiden. Farben wirken blasser.
Achromatopsie (Monochromasie)	Vollständige Farbsehschwäche, selten	Es werden gar keine Farben gesehen.

Von diesen Formen gibt es auch leichte Ausprägungen. Laut NEI lässt die Deuteranomalie manche Grüntöne röter erscheinen. Die Protanomalie lässt manche Rottöne grüner und blasser erscheinen. Beide sind leicht und behindern den Alltag meist nicht.

Der Simulator zeigt die vollständigen Formen. Bei jemandem mit einer leichten Form ist der Farbverlust geringer als auf dem Bildschirm.

Wie der Simulator funktioniert

Die Simulationsmatrizen stammen aus dem Artikel von Machado, Oliveira und Fernandes von 2009. Dieses auf der Physiologie beruhende Modell liefert für jede Form eine 3×3-Farbmatrix. Ich habe die Zeile für den Schweregrad 1,0 verwendet, also die vollständige Form.

Die Matrizen wende ich mit dem SVG-Filter feColorMatrix auf die Seite an. Laut der Spezifikation Filter Effects des W3C arbeiten diese Filter standardmäßig im linearen RGB-Raum (linearRGB). Der Artikel nennt nicht, in welcher Kodierung die Farben vorliegen. Auch die Paare berechne ich im selben Raum.

Für die Achromatopsie gibt es im Artikel keine Matrix. Ich zeichne sie, indem ich den saturate-Wert von feColorMatrix auf 0 setze. Diese Einstellung macht die Farbe vollständig grau, das Ergebnis ist eine Annäherung.

Die Warnregel ist meine Demo-Regel, kein Standard. Ich berechne den Abstand zweier simulierter Farben im Farbraum Oklab (ΔEOK). CSS Color 4 definiert diesen Abstand als euklidische Distanz in Oklab. Liegt der Abstand unter 0,10, wird das Paar als „verwechselbar“ markiert.

Warum nicht das Kontrastverhältnis? Das habe ich zuerst versucht. Bei den Beispielfarben lag das Verhältnis von Rot und Grün bei normaler Sicht bei 1,42:1, bei Deuteranopie bei 1,12:1. Das Verhältnis ändert sich wenig, verloren geht der Farbtonunterschied. Weil die WCAG auf den Helligkeitsunterschied schaut, habe ich das Verhältnis trotzdem in jede Zeile geschrieben.

WCAG 1.4.1: Farbe darf nicht der einzige Hinweis sein

Das Kriterium 1.4.1 Benutzung von Farbe der WCAG 2.2 gehört zur Stufe A. Farbe darf nicht das einzige visuelle Mittel sein, um Informationen zu vermitteln, eine Aktion anzuzeigen, zu einer Reaktion aufzufordern oder ein Element zu unterscheiden.

Die Erläuterungsseite des W3C nennt den Grund deutlich: Ein Farbunterschied erreicht Nutzer mit Farbsehschwäche womöglich nicht. Die Seite hält fest, dass auch Menschen mit eingeschränktem Sehvermögen und viele ältere Nutzer Farben nicht gut sehen.

Das Kriterium verbietet Farbe nicht. Es verlangt neben der Farbe einen zweiten visuellen Hinweis: Text, Form oder Muster. Laut W3C gilt auch ein Helligkeitsunterschied mit einem Kontrastverhältnis von mindestens 3:1 als visuelle Unterscheidung.

Die Teile des Simulators zeigen typische Fälle von 1.4.1:

Diagramm: Die Reihen unterscheiden sich nur durch Farbe und eine Legende. In der Liste der Techniken des W3C steht, Farbe und Muster zusammen zu verwenden (G111).
Link: Nicht unterstrichen, nur die Farbe ist anders. Einen Link, den man ohne Farbsehen nicht erkennt, führt das W3C als Fehler F73. Unterstreichen Sie nicht, sorgen Sie zwischen Link und umgebendem Text für mindestens 3:1 (G183).
Statusetiketten: Neben dem farbigen Punkt steht Text. Das ist richtig. Pflichtfelder oder fehlerhafte Felder in Formularen nur durch Farbe zu kennzeichnen, ist dagegen der Fehler F81.

Den Textkontrast können Sie zusätzlich mit dem Kontrastrechner messen. Den Rest des Kriteriums beschreibe ich im Ratgeber zur WCAG.

Wie ich verwechselbare Farben trenne

Beginnen Sie vor der Palette mit der Bedeutung, die die Farbe trägt. Trägt eine Farbe eine Bedeutung, setzen Sie Text daneben. Geben Sie Reihen im Diagramm direkte Beschriftungen oder Muster. Unterstreichen Sie Links.

Verbessern Sie dann die Palette. Rücken Sie die Helligkeit der beiden verwechselbaren Farben auseinander: Eine sollte dunkel, die andere hell sein. Ändern Sie im Simulator die beiden Farben und sehen Sie nach, ob die Warnung verschwindet.

Heben Sie ein einzelnes Element mit Farbe hervor, verlassen Sie sich auf den Von-Restorff-Effekt. Unterscheidet sich das Element nur durch Farbe, sehen farbenblinde Nutzer diesen Unterschied womöglich nicht. Nutzen Sie zusätzlich einen Unterschied in Größe oder Strichstärke.

Meine Notiz

Bedeutet in Dashboards Grün „gut“ und Rot „schlecht“ und haben beide dieselbe Helligkeit, sollten Sie unbedingt mit diesem Tool nachsehen. Wählen Sie mit den Beispielfarben die Deuteranopie: Abgelehnt und Genehmigt werden fast zum selben Olivton.

Der Simulator ist ein Ausgangspunkt und ersetzt keinen Test mit echten Nutzern. Die offensichtlichsten Verwechslungen zeigt er aber vor dem Launch.

Wollen Sie einen Ablauf Ihres Produkts von Anfang bis Ende prüfen lassen, deckt das UX Audit auch die grundlegenden Prüfungen der WCAG 2.2 ab.