Farbenblindheitssimulator
Der Color Blindness Simulator ist ein kostenloses Online-Tool, das zeigt, wie Ihre ausgewählten Farben und Designs für Menschen mit verschiedenen Arten von Farbfehlsichtigkeit (CVD) aussehen. Laden Sie ein Bild hoch oder wählen Sie Farben aus, um zu sehen, wie sie unter Simulationen von Protanopie, Deuteranopie, Tritanopie und Achromatopsie erscheinen. Dieses Tool ist unverzichtbar für Designer, Entwickler und Content-Ersteller, die sicherstellen möchten, dass ihre Websites, Apps, Infografiken und Datenvisualisierungen für die etwa 8 % der Männer und 0,5 % der Frauen zugänglich sind, die eine Form von Farbenblindheit haben. Testen Sie Ihre Farbpaletten, UI-Designs, Diagramme und Illustrationen, um inklusivere visuelle Inhalte zu erstellen.
Was ist
Farbfehlsichtigkeit (engl. Color Vision Deficiency, CVD), allgemein als Farbenblindheit bekannt, betrifft weltweit etwa 1 von 12 Männern (8 %) und 1 von 200 Frauen (0,5 %). Es handelt sich um eine genetische Erkrankung, die die Art und Weise beeinflusst, wie das Auge bestimmte Farben wahrnimmt, wodurch einige Farben nur schwer oder gar nicht zu unterscheiden sind. Simulierte Arten der Farbenblindheit: - Protanopie (Rotblindheit): Die roten Zapfen in der Netzhaut fehlen. Rote Farben erscheinen dunkel, und Rot/Grün-Unterschiede gehen verloren. Betrifft etwa 1 % der Männer. - Deuteranopie (Grünblindheit): Die grünen Zapfen fehlen. Dies ist die häufigste Form der Farbenblindheit. Grüne Farben erscheinen bräunlich, und Grün/Rot-Unterschiede gehen verloren. Betrifft etwa 5 % der Männer. - Tritanopie (Blau-Gelb-Blindheit): Die blauen Zapfen fehlen. Blau/Grün- und Gelb/Rot-Unterschiede gehen verloren. Sehr selten (ca. 0,01 % der Bevölkerung). - Achromatopsie (totale Farbenblindheit): Keinerlei Farbwahrnehmung. Die Welt erscheint in Graustufen. Extrem selten. - Protanomalie, Deuteranomalie, Tritanomalie: Verminderte Empfindlichkeit (kein vollständiges Fehlen) gegenüber Rot, Grün bzw. Blau. Dies sind mildere Formen. Warum Farbenblindheit im Design simulieren? - Barrierefreiheit: WCAG-Richtlinien erfordern, dass Informationen nicht ausschließlich durch Farbe vermittelt werden. - Datenvisualisierung: Diagramme und Grafiken müssen für alle Benutzer lesbar sein. - UI-Design: Fehlerzustände, Statusanzeigen und interaktive Elemente benötigen nicht-farbliche Hinweise. - Marketingmaterialien: Infografiken und Präsentationen sollten das breiteste Publikum erreichen. - Inklusives Design: Entwicklung von Produkten, die von jedem unabhängig von der Sehfähigkeit genutzt werden können. Die Simulation verwendet den Algorithmus von Brettel, Viénot und Mollon (1997) für eine präzise Farbtransformation, die die tatsächliche physiologische Reaktion der Zapfenzellen in der menschlichen Netzhaut modelliert.
Wie zu verwenden
- Wählen Sie Ihre Simulationsmethode: Laden Sie eine Bilddatei (PNG, JPG, SVG) hoch, um zu sehen, wie sie unter verschiedenen Arten von Farbenblindheit erscheint, oder verwenden Sie den Farbwähler, um einzelne Farben und Farbkombinationen zu testen.
- Für den Bild-Upload: Klicken Sie auf den Upload-Bereich oder ziehen Sie Ihr Bild per Drag & Drop hinein. Das Tool zeigt das Originalbild zusammen mit vier simulierten Versionen (Protanopie, Deuteranopie, Tritanopie, Achromatopsie) zum einfachen Vergleich an.
- Für Farbtests: Hex-Farbcodes eingeben oder den Farbwähler verwenden, um Farben auszuwählen. Das Tool zeigt, wie jede Farbe unter verschiedenen CVD-Typen erscheint, und hilft Ihnen, problematische Farbpaare zu identifizieren.
- Überprüfen Sie die simulierten Bilder Seite an Seite mit dem Original. Achten Sie auf Bereiche, in denen wichtige Informationen nicht mehr zu unterscheiden sind – zum Beispiel kann roter Fehlertext auf grünem Hintergrund unter Deuteranopie identisch aussehen.
- Verwenden Sie den in das Tool integrierten Kontrastverhältnis-Checker, um zu überprüfen, ob Ihre Farbkombinationen auch unter Simulation von Farbenblindheit den WCAG-AA- (4,5:1) oder AAA- (7:1) Kontrastanforderungen entsprechen.
- Passen Sie Ihre Farben basierend auf den Simulationsergebnissen an. Fügen Sie zusätzlich zur Farbe Muster, Beschriftungen, Symbole oder Text hinzu, um Informationen zu vermitteln. Testen Sie erneut, bis alle kritischen Unterscheidungen unter jedem Simulationstyp sichtbar bleiben.
- Laden Sie die simulierten Bilder herunter, um sie in die Barrierefreiheitsdokumentation aufzunehmen oder mit Ihrem Team zu teilen. Nutzen Sie die Funktion 'Bericht exportieren', um eine PDF-Zusammenfassung Ihrer Farbzugänglichkeitsanalyse zu erstellen.
Beispiele
Eingabe: Original: #FF0000 (Rot), Typ: Protanopie
Prozess: RGB→LMS-Farbraum → Protanopie-Filter anwenden → RGB
Ergebnis: Simuliert: Dunkelbrauner/gelblicher Farbton
Eingabe: Original: #00FF00 (Grün), Typ: Deuteranopie
Prozess: Grünspektrum verschieben → Rot-Grün-Verwechslungssimulation
Ergebnis: Simuliert: Gelblich-brauner Farbton
Verwandte Suchen
Leute suchen auch nach: Farbenblindheitssimulator, Farbsehschwäche, Barrierefreiheitstool, Farbenblindheitstest.
FarbenblindheitssimulatorFarbsehschwächeBarrierefreiheitstoolFarbenblindheitstest
Häufig gestellte Fragen
Wie genau ist die Simulation der Farbenblindheit?
Die Simulation verwendet den Brettel-Viénot-Mollon-Algorithmus, das am weitesten akzeptierte mathematische Modell zur Simulation von Farbschwäche. Es modelliert die tatsächliche physiologische Reaktion der Zapfenzellen in der Netzhaut. Obwohl keine bildschirmbasierte Simulation die subjektive Erfahrung der Farbenblindheit perfekt nachbilden kann (da Monitore RGB-Licht emittieren), liefert der Algorithmus eine sehr genaue Annäherung, die von professionellen Barrierefreiheitstools und Browser-Entwicklertools verwendet wird.
Was ist der Unterschied zwischen Protanopie und Protanomalie?
Protanopie bedeutet, dass die roten Zapfenzellen vollständig fehlen – die Person kann rotes Licht überhaupt nicht wahrnehmen. Protanomalie bedeutet, dass die roten Zapfenzellen vorhanden, aber defekt sind, was zu einer verminderten Empfindlichkeit für Rot führt. Protanopie ist schwerwiegender. Die gleiche Unterscheidung gilt für Deuteranopie/Deuteranomalie (grün) und Tritanopie/Tritanomalie (blau). Das Tool simuliert sowohl die Varianten der vollständigen Abwesenheit als auch der verminderten Empfindlichkeit.
Wie mache ich meine Designs für farbenblinde Nutzer zugänglich?
Wichtige Strategien: 1) Verlassen Sie sich nicht ausschließlich auf Farbe, um Informationen zu vermitteln – fügen Sie Textbeschriftungen, Muster oder Symbole hinzu. 2) Verwenden Sie hohen Kontrast zwischen Vorder- und Hintergrund. 3) Wählen Sie Farbpaletten, die auch unter CVD-Simulation unterscheidbar bleiben (Blau/Orange ist besser als Rot/Grün). 4) Testen Sie Diagramme zusätzlich zu Farben mit Mustern. 5) Verwenden Sie Unterstreichungen für Links, nicht nur Farbänderungen. 6) Fügen Sie Fehlersymbole neben rotem Fehlertext hinzu. Das Tool hilft Ihnen zu überprüfen, ob diese Strategien funktionieren.
Kann ich Farbenblindheit für eine gesamte Website simulieren?
Mit der Funktion zum Hochladen von Bildern können Sie Screenshots Ihrer Website testen. Für eine ganzseitige Simulation machen Sie Screenshots von wichtigen Seiten (Startseite, Formulare, Dashboards) und laden Sie diese hoch. Einige Browser-Erweiterungen (wie die Sehschwächen-Emulation der Chrome-Entwicklertools) können ganze Live-Seiten simulieren. Dieses Tool eignet sich am besten zum Testen spezifischer Farbauswahlen, UI-Komponenten und Datenvisualisierungen und nicht für eine ganzseitige Simulation.
Welche Farben sind am sichersten für farbenblindenfreundliches Design?
Blau und Orange bleiben für alle Arten von Farbenblindheit unterscheidbar, was sie zu einem der sichersten Farbpaare macht. Blau/Gelb funktioniert auch für die meisten CVD-Typen gut. Vermeiden Sie es, sich ausschließlich auf Rot/Grün-Unterscheidungen zu verlassen (problematisch für die häufigsten CVD-Typen). Wenn Sie Rot/Grün verwenden müssen (z. B. für Fehler-/Erfolgszustände), ergänzen Sie dies stets mit Symbolen, Textbeschriftungen oder Mustern. Die Simulation des Tools ermöglicht es Ihnen, jede Farbkombination zu überprüfen, bevor Sie sie implementieren.