Color Blindness Simulator

So verwendest du den Farbenblindheits-Simulator

1. Gib eine Farbe ein im HEX-Eingabefeld oder öffne die Farbauswahl zum visuellen Auswählen.
2. Klicke Simulieren. Das Werkzeug rendert fünf Felder nebeneinander: normales trichromates Sehen, Protanopie, Deuteranopie, Tritanopie und Achromatopsie.
3. Vergleiche jedes Feld mit dem Normal-Sehen-Basiswert. Felder, die benachbarten nahezu identisch aussehen, repräsentieren echte Fehlermodi - die beiden Farben sind für diesen Betrachter nicht unterscheidbar.
4. Iteriere: Ändere die Farbe und führe sie erneut aus, bis das kritische Paar in deiner Benutzeroberfläche (Erfolg/Fehler, aktiv/inaktiv) unter jedem simulierten Sehtyp unterscheidbar bleibt.

Was die Simulation tatsächlich berechnet

Die Simulation von Farbsehschwäche ist keine einfache Farbtonverschiebung - sie erfordert die Modellierung, wie eine fehlerhafte Netzhaut Licht transformiert. Das Werkzeug verwendet den Brettel-Vienot-Mollon-Algorithmus, die Standardreferenz in der Visual-Accessibility-Forschung seit ihrem 1997er Paper Computerized simulation of color appearance for dichromats. Der Algorithmus transformiert die sRGB-Eingabefarbe in den LMS-Farbraum (benannt nach den langen, mittleren und kurzen Kegelantwortkurven der menschlichen Netzhaut), dann projiziert die Farbe auf eine reduzierte Ebene, bei der einer der drei Kegeltypen fehlt: die L-Ebene für Protanopie, die M-Ebene für Deuteranopie, die S-Ebene für Tritanopie. Bei Achromatopsie (totales Stäbchen-Sehen) wird die Farbe auf ihren Luminanzwert über die Standard-Rec.-709-Luma-Koeffizienten kollabiert. Die transformierte LMS-Farbe wird durch die inverse Matrix zurück zu sRGB konvertiert und gamma-korrigiert zur Anzeige. Das Werkzeug wendet die veröffentlichte Hunt-Pointer-Estevez-LMS-Matrix und Brettes vorberechnete Projektionsmatrizen für jeden Schwächetyp an, sodass die Ausgabe mit dem übereinstimmt, was akademische Simulatoren wie Vischeck und Coblis seit zwei Jahrzehnten produzieren.

Wo das in der Praxis wichtig ist

• Diagramm- und Grafik-Farbpaletten, bei denen eine Rot-Grün-Kombination für die 4-5 % der Benutzer mit Deuteranomalie nicht unterscheidbar ist - ColorBrewers "farbenblind-sichere" Paletten existieren genau aus diesem Grund.
• Ampel-Statusanzeigen (rote Fehler, gelbe Warnungen, grüne Erfolge) - der kanonische Rot-Grün-Fehlerfall - bei denen du Farbe mit einer Ikonform oder Textbeschriftung paaren musst.
• Datenvisualisierungen mit Heatmaps oder divergenten Farbskalen, bei denen tritanopische Benutzer die Blau-Gelb-Achse verlieren, auf die Designer als "die farbenblind-sichere Achse" setzen.
• Formularvalidierung, bei der rot umrandete Felder für Fehler unter WCAG 1.4.1 (Verwendung von Farbe) mit Text oder Symbolen gepaart sein müssen.
• Spiel-Benutzeroberflächen, bei denen Teamfarben (Rot vs. Grün, Blau vs. Lila) für Wettbewerbsfairness unterscheidbar bleiben müssen.

Fallstricke und wissenschaftliche Grenzen

Erstens modelliert der Simulator Dichromasie - das vollständige Fehlen eines Kegeltyps - was das schwere Ende des Spektrums ist. Die meisten farbsehschwachen Benutzer sind anomale Trichromaten (Protanomalie, Deuteranomalie, Tritanomalie), die einen verschobenen statt fehlenden Kegel haben und mehr Farbe wahrnehmen als der simulierte Dichromat, aber weniger als ein normaler Trichromat. Die Simulation von Anomalie erfordert ein parametrisches Modell mit einem Schwereschieberegler, den dieses Werkzeug nicht exponiert; nimm an, dass die Simulation der schlechteste Fall ist und deine tatsächlichen Benutzer etwas mehr Differenzierung sehen als gezeigt. Zweitens ist die Monitorkalibrierung wichtig: Der Algorithmus geht von sRGB-Ausgabe auf einem Standarddisplay aus. Auf einem Wide-Gamut-P3-Display, das als sRGB getaggtes Inhalt rendert, sollte die OS-Farbverwaltung korrekt übersetzen, aber wenn du Farben auf einem unkalibrierten Laptop-Bildschirm auswertest, sinkt die absolute Genauigkeit. Drittens ist das Brettel-Modell eine Annäherung: Echtes Farbsehen ist ein kontinuierliches Wahrnehmungsphänomen und keine Matrixtransformation erfasst die subjektive Erfahrung jedes Benutzers. Viertens ändert Kontext die Wahrnehmung: Zwei Farben, die isoliert identisch aussehen, können unterscheidbar sein, wenn sie neben einer dritten Farbe stehen, die eine Referenz bietet, sodass die Seite-an-Seite-Simulation hier eine strikte Untergrenze der realen Unterscheidbarkeit ist. Fünftens - verlasse dich niemals allein auf Farbe - WCAG 1.4.1 geht diesem Simulator voraus und seine Anleitung ist universell: Jeder Farbhinweis benötigt einen redundanten Nicht-Farb-Hinweis (Symbol, Beschriftung, Muster).

Die Biologie hinter dem Algorithmus

Normales Sehen ist trichromat: drei Kegeltypen mit Peakempfindlichkeit nahe 564 nm (L), 534 nm (M) und 420 nm (S). Der LMS-Farbraum beschreibt jede wahrgenommene Farbe als Dreifaches von Kegelaktivierungen. Protanopie ist das Fehlen von L-Kegeln - rotes Licht ist effektiv unsichtbar. Deuteranopie ist das Fehlen von M-Kegeln, erzeugt die klassische Rot-Grün-Verwechslung und betrifft etwa 1 % der männlichen Bevölkerung nordeuropäischer Abstammung. Tritanopie ist das Fehlen von S-Kegeln; sehr selten (<0,01 %) und greift die Blau-Gelb-Achse an, die Designer als "sicher" behandeln. Achromatopsie ist eine totale Kegeldysfunktion, die nur stäbchenvermittelte Luminanzwahrnehmung hinterlässt. Der Brettel-Algorithmus nutzt die Tatsache aus, dass Dichromasie gleichbedeutend ist mit der Projektion von LMS auf die Ebene der zwei funktionierenden Kegeltypen plus der Luminanzachse.

Vergleich mit anderen Simulatoren und Audit-Werkzeugen

Chrome DevTools bietet einen Farbwahrnehmungs-Emulator im Rendering-Tab (Protanopie, Deuteranopie, Tritanopie, Achromatopsie und verschwommenes Sehen), der die Transformation auf die gesamte gerenderte Seite anwendet - verwende ihn, wenn du eine Live-Site statt einer einzelnen Farbe auditieren möchtest. Stark und axe DevTools führen ganzseitige Scans für WCAG-1.4.1-Verstöße durch, was eine ergänzende Prüfung ist: Dieser Simulator sagt dir, wie eine Farbe aussieht, Stark sagt dir, ob das Farbpaar den Kontrast in jeder Schwäche besteht. Vischeck (jetzt eingestellt, aber weitgehend zitiert) und Coblis sind akademische Peer-Werkzeuge, die dieselben Brettel-Matrizen verwenden. Für Videospiele und Apps baken die Plattform-SDKs zunehmend systemweite Simulation ein (macOS hat seit Jahren Dichromasie-Displayfilter in den Barrierefreiheitseinstellungen). Verwende diesen Simulator für das Design einer einzelnen Farbe oder einer kleinen Palette; verwende DevTools oder Stark für ganzseitige Audits.