Color Blindness Simulator
Visualisieren Sie jede Farbe so, wie sie Menschen mit Farbsehschwäche wahrnehmen — 6 Typen simuliert.
① HEX-Code eingeben oder Farbe wählen ② 6 Arten von Farbenblindheit simulieren ③ Simulierten HEX kopieren
Preset ausprobieren:
Was ist Farbenblindheit und warum ist sie für Design wichtig?
Farbenblindheit (Farbsehschwäche) betrifft etwa 8% der Männer und 0,5% der Frauen weltweit. Die häufigsten Typen — Deuteranopie und Deuteranomalie — beinhalten Verwechslungen zwischen roten und grünen Farbtönen. WCAG 2.1 SC 1.4.1 verlangt, dass Farbe nicht das einzige visuelle Mittel zur Informationsvermittlung ist. Dieser Simulator verwendet das wissenschaftlich validierte LMS-Farbmodell (Viénot 1999)
Häufig gestellte Fragen
Farbenblindheit (Farbsehschwäche) ist die Unfähigkeit, bestimmte Farben zu unterscheiden, aufgrund fehlender oder defekter Zapfenzellen in der Netzhaut. Etwa 8% der Männer und 0,5% der Frauen sind betroffen. Die häufigste Form ist Deuteranomalie (reduzierte Grünempfindlichkeit), gefolgt von Protanomalie. Tritanopie (Blau-Gelb) ist mit etwa 0,01% deutlich seltener.
Das Tool verwendet das LMS-Farbmodell (Viénot-1999-Methode). Die Pipeline: HEX → sRGB [0,1] → lineares RGB (Gamma-Entfernung) → LMS-Zapfenantworten über Hunt-Pointer-Estevez-Matrix → Defizit-Simulationsmatrix → LMS → lineares RGB → sRGB (Gamma) → HEX. Dies erzeugt wahrnehmungsgenau Ergebnisse, die klinischen Studien entsprechen.
Deuteranopie: M-Zapfen (grünempfindlich) fehlen — Grün, Rot und Orange wirken ähnlich. Protanopie: L-Zapfen (rot) fehlen — Rot erscheint sehr dunkel und wird mit Grün/Braun verwechselt. Tritanopie: S-Zapfen (blau) fehlen — Blau und Grün werden mit Rot und Rosa verwechselt. Anomale Trichromasie (Deuteranomalie, Protanomalie) bedeutet reduzierte statt fehlende Zapfenempfindlichkeit.
Geben Sie jede wichtige UI-Farbe ein — primäre Buttons, Statusindikatoren, Diagramme, Badges. Prüfen Sie für jede Simulation, ob die Farbe noch die beabsichtigte Bedeutung vermittelt. Wenn die simulierte Farbe einem anderen Element zu ähnlich wird, fügen Sie ein zweites Signal hinzu: Icon, Muster, Beschriftung oder Rahmen. Testen Sie Ihre gesamte Palette systematisch.
WCAG 2.1 SC 1.4.1 (Stufe A): Farbe darf nicht das einzige visuelle Mittel zur Informationsvermittlung sein. SC 1.4.3 (Stufe AA): Textkontrast muss mindestens 4,5:1 betragen (3:1 für großen Text). Diese Anforderungen gelten unabhängig vom Farbsehtyp.
Die sichersten Kombinationen behalten hohen Luminanzkontrast unabhängig vom Farbton. Blau-Orange und Blau-Gelb funktionieren für die meisten Defizittypen. Rot-Grün-Kombinationen sind für Deuteranopie und Protanopie am problematischsten. Fügen Sie Icons oder Muster neben Farbcodierungen hinzu und prüfen Sie stets Kontrastverhältnisse.
Dieses Tool simuliert eine Farbe auf einmal — ideal für Markenfarben, Paletteneinträge und wichtige UI-Elemente. Für vollständige SeitenTests verwenden Sie Browser-Erweiterungen wie NoCoffee (Chrome/Firefox) oder Colorblinding, oder die OS-eigenen Farbfilter (macOS: Systemeinstellungen → Bedienungshilfen → Anzeige → Farbfilter; Windows 11: Einstellungen → Barrierefreiheit → Farbfilter).