Farbenblindheits-Simulator

Ihr Bild durch die Augen einer Person mit Farbsehschwäche sehen. Typ wählen, Vorschau anzeigen und Ergebnis herunterladen. Alles läuft in Ihrem Browser.

So funktioniert Farbenblindheits-Simulator

Color Blindness Simulator wendet Farbtransformationsmatrizen auf Ihr Bild an, um zu zeigen, wie es für Menschen mit Protanopie (Rotblindheit), Deuteranopie (Grünblindheit), Tritanopie (Blaublindheit) oder Achromatopsie (vollständige Farbenblindheit) aussieht. Die Matrizen werden Pixel für Pixel mithilfe von Canvas.getImageData() und Canvas.putImageData() in Ihrem Browser angewendet. Keine Bilddaten werden an einen Server übertragen.

Die Simulationen basieren auf veröffentlichten Wahrnehmungsmodellen, die aus Studien zu Farbsehstörungen abgeleitet wurden. Sie sind Annäherungen daran, wie das visuelle System einer betroffenen Person Farbe verarbeitet, keine exakten Reproduktionen individueller Erfahrungen, die variieren. Das Tool soll Designern und Entwicklern helfen, Kontrast- oder farbkodierungsprobleme zu identifizieren, die einen erheblichen Teil ihres Publikums betreffen würden: Etwa 8 Prozent der Männer und 0,5 Prozent der Frauen haben eine Form von Farbsehschwäche.

Verfasst von Bastien Sulyan

So wird Farbenblindheits-Simulator verwendet, Schritt für Schritt

Ziehen Sie Ihr Bild auf den Upload-Bereich oder klicken Sie, um zu suchen.
Wählen Sie einen Typ von Farbsehschwäche aus dem Menü: Protanopie, Deuteranopie, Tritanopie oder Achromatopsie.
Betrachte das simulierte Ergebnis neben dem Original im Vergleichspanel.
Wechsle zwischen Simulationstypen, um zu vergleichen, wie jede Bedingung das Bild beeinflusst.
Verwenden Sie die Nebeneinander-Ansicht, um Bereiche zu identifizieren, in denen Farbe allein Informationen vermittelt, die verloren gehen könnten.

Häufige Anwendungsfälle

Ein UI-Designer prüft, ob ein rot-grüner Statusindikator für Nutzer mit Deuteranopie unterscheidbar ist, bevor ein Feature ausgeliefert wird.
Ein Datenvisualisierungsautor prüft, ob ein mehrliniges Diagramm mit farbkodierten Reihen in der Protanopie-Simulation noch lesbar ist.
Eine Markendesignerin bewertet, wie ein Logo mit Verlaufsfarben unter Achromatopsie wirkt, um sicherzustellen, dass es eine erkennbare Form und ausreichend Kontrast behält.
Ein Spielentwickler prüft, ob farbkodierte Kartenzonen für Spieler mit Tritanopie unterscheidbar sind, und fügt Musterfüllungen als Ergänzung zur Farbkodierung hinzu.

Häufig gestellte Fragen

Wie genau sind die Farbenblindheits-Simulationen?

Die Simulationen wenden Wahrnehmungstransformationsmatrizen an, die aus veröffentlichter Forschung zu Farbsehschwächen stammen. Sie sind wissenschaftlich fundierte Annäherungen an typische Fälle jeder Bedingung. Die individuelle Erfahrung variiert: Der Schweregrad unterscheidet sich zwischen Menschen mit der gleichen Diagnose, und die Simulation kann keine Kompensationsstrategien berücksichtigen, die einige Nutzer entwickeln. Betrachte die Ausgabe als nützlichen Hinweis, nicht als endgültigen Test.

Deckt das Tool alle Arten von Farbenblindheit ab?

Die vier abgedeckten Typen sind die häufigsten Formen von Farbsehschwäche und vollständiger Farbenblindheit. Anomale Trichromatie-Typen (Protanomalie, Deuteranomalie, Tritanomalie), die partielle Schwächen darstellen, werden in der aktuellen Version nicht separat modelliert.

Wird mein Bild auf einem Server analysiert, um die Simulation zu erzeugen?

Nein. Die Farbmatrixtransformation wird lokal mithilfe von Canvas.getImageData() zum Lesen des Pixel-Arrays und Canvas.putImageData() zum Schreiben des Ergebnisses berechnet. Alle Verarbeitungen finden innerhalb des Browser-Tabs statt, und die Bilddaten bleiben auf Ihrem Gerät.

Kann ich dieses Tool verwenden, um Farbkontrastverhältnisse zu prüfen?

Dieses Tool zeigt, wie Farben für Menschen mit Farbsehschwäche aussehen, berechnet aber keine WCAG-Kontrastverhältnisse numerisch. Für numerische Kontrastprüfungen verwende das Color Converter Tool, das einen WCAG-Kontrastprüfer enthält.

Funktioniert das Tool mit Bildern, die Text enthalten?

Ja. Die Transformation wird auf das gesamte Pixel-Array angewendet, einschließlich aller im Bild gerenderten Texte. So können Sie prüfen, ob die Textfarbe vor dem Hintergrund unter jeder simulierten Bedingung gut lesbar bleibt.