Color Blindness Simulator

Über dieses Tool

Der Farbblindheits-Simulator wendet CSS-Farbmatrix-Filter auf Beispielfarben an und zeigt, wie Designs für Menschen mit verschiedenen Farbsehschwächen aussehen.

Verwenden Sie dieses Tool beim Entwerfen von UI-Komponenten, Diagrammen, Karten oder anderen visuellen Inhalten, die Farbe zur Informationsvermittlung nutzen.

Farbblindheitstypen

• Normalsicht: Normalsicht: vollständige Farbwahrnehmung
• Protanopie (Rotblindheit): Protanopie: fehlende Rotzapfen (~1% der Männer)
• Deuteranopie (Grünblindheit): Deuteranopie: fehlende Grünzapfen (häufigste Form, ~1% der Männer)
• Tritanopie (Blaublindheit): Tritanopie: fehlende Blauzapfen (selten, ~0,003%)
• Achromatopsie (kein Farbe): Achromatopsie: keine Farbwahrnehmung, nur Graustufen (sehr selten)
• Achromatopsie partiell (reduzierte Farbe): Achromatopsie partiell: reduzierte Farbempfindlichkeit über mehrere Zapfentypen

Anleitung

1. Wählen Sie einen Simulationstyp aus dem Dropdown aus.
2. Beobachten Sie, wie sich Farbmuster und Spektrum unter dem ausgewählten Filter ändern.
3. Vergleichen Sie mit Normalsicht, um problematische Farbkombinationen zu identifizieren.

Anwendungsfälle

UI/UX-Designer überprüfen, ob Schaltflächenzustände und Statusindikatoren unterscheidbar bleiben. Datenvisualisierungsersteller stellen sicher, dass Diagrammfarben barrierefrei sind.

Häufige Fragen

• Wie genau sind diese Simulationen? — Sie verwenden etablierte Farbmatrix-Transformationen und sind gute Näherungen.
• Wie viel Prozent der Menschen haben Farbblindheit? — Etwa 8% der Männer und 0,5% der Frauen haben eine Form von Farbsehschwäche.
• Was ist die beste Designmethode für Farbblindheit? — Kombinieren Sie Farbe mit anderen visuellen Hinweisen wie Form, Muster, Beschriftung oder Textur. Stellen Sie ausreichend Kontrast sicher und testen Sie mit mehreren Simulationstypen.