Farbenblindheit-Simulator für Screenshots und Paletten
Farbenblindheit-Simulator
Farbenblindheit-Simulator: Screenshot oder Palette in 8 Sehtypen testen | We.Inc
Sieh einen Screenshot oder eine Farbpalette nebeneinander mit acht Arten von Farbsehschwäche. Markiert Farbpaare, die schwer zu unterscheiden sind, und schlägt einen sichereren Farbton vor. Läuft in deinem Browser.
Ein Farbenblindheit-Simulator stellt Farben so dar, wie Menschen mit einem fehlenden oder schwachen Zapfentyp sie sehen. Lade einen Screenshot hoch oder füge deine Palette ein, um sie in acht Sehtypen gleichzeitig zu sehen. Das Tool markiert außerdem Farbpaare, die für die meisten Menschen klar verschieden aussehen, für andere aber verschmelzen, und schlägt einen helleren oder dunkleren Ersatz vor.
Die wichtigsten Arten von Farbsehschwäche
Typ
Was sich ändert
Häufig verwechselt
Deuteranomalie und Deuteranopie
Schwache oder fehlende Grünzapfen
Rot und Grün, Braun und Grün, Blau und Lila
Protanomalie und Protanopie
Schwache oder fehlende Rotzapfen; Rottöne wirken dunkler
Rot und Grün, Rot und Schwarz
Tritanomalie und Tritanopie
Schwache oder fehlende Blauzapfen (selten)
Blau und Grün, Gelb und Rosa
Achromatopsie
Keine funktionierenden Zapfen (sehr selten)
Alles außer der Helligkeit
Zwei Wege hinein: Zieh einen Screenshot einer Seite, eines Diagramms oder Designs hinein oder füge eine Liste von Hex-Farben ein. Jede Simulation läuft in deinem Browser, und nichts wird hochgeladen.
Zieh einen Screenshot (PNG, JPG oder WebP) hinein oder wähle einen aus, oder füge Hex-Farben ein, eine pro Zeile oder durch Kommas getrennt.
Das Bild oder die Palette wird achtmal neu gezeichnet, einmal pro Sehtyp, mit einem veröffentlichten Modell dafür, wie Zapfen reagieren.
Bei Paletten wird jedes Paar unter jeder Simulation verglichen. Paare, deren Unterschied unter einen kleinen Schwellenwert fällt, werden markiert.
Zu jedem markierten Paar gibt es einen Ersatzvorschlag: die zweite Farbe heller oder dunkler, bis sie sich wieder abhebt.
Lass Farbe nie das einzige Signal sein. Ergänze eine Beschriftung, ein Icon, ein Muster oder eine Position, was auch WCAG-Erfolgskriterium 1.4.1 verlangt.
Helligkeitskontrast übersteht jede Art von Farbenblindheit. Ein dunkles Rot neben einem hellen Grün bleibt lesbar; ein mittleres Rot neben einem mittleren Grün nicht.
Beschrifte Linien in Diagrammen direkt oder variiere den Linienstil, und wähle Paletten, die sich in der Helligkeit wie auch im Farbton abstufen.
Fehlerzustände in Formularen sollten ein Icon und Text tragen, nicht nur einen roten Rahmen.
Häufige Fragen
Wie verbreitet ist Farbenblindheit?
Laut dem US National Eye Institute ist die Rot-Grün-Farbenblindheit die häufigste Form, und sie kommt bei Männern weit häufiger vor als bei Frauen. Bei Menschen nordeuropäischer Abstammung betrifft sie bis zu etwa 1 von 12 Männern und 1 von 200 Frauen. Blau-Gelb-Typen und vollständige Farbenblindheit sind selten.
Wie genau ist die Simulation?
Sie nutzt das Modell von Machado, Oliveira und Fernandes, das weit verbreitet und anerkannt ist, mit voller Stärke für die -opie-Typen und mittlerer Stärke für die -anomalie-Typen. Echte Menschen unterscheiden sich: Zwei Personen mit derselben Diagnose können etwas unterschiedlich sehen, und auch Bildschirme und Beleuchtung verändern den Eindruck. Betrachte sie als starken Anhaltspunkt, nicht als Diagnose.
Kann ich eine Live-Website über ihre URL prüfen?
Nicht von dieser Seite aus. Browser erlauben einer Website nicht, die Pixel einer anderen Website zu laden und auszulesen. Mach stattdessen einen Screenshot der Seite (auf den meisten Systemen Shift + Cmd + 4 auf dem Mac oder Win + Shift + S unter Windows) und zieh ihn hier hinein.
Bedeutet ein bestandener Kontrast-Check, dass meine Farben für Farbenblinde sicher sind?
Nicht ganz. Kontrast-Checker vergleichen die Helligkeit von Text und Hintergrund, was allen hilft. Aber zwei Diagrammfarben oder zwei Statusfarben können jeweils gegen Weiß bestehen und für jemanden mit Deuteranopie trotzdem gleich aussehen. Prüfe Farbpaare, die unterscheidbar sein müssen, und genau das macht der Paletten-Check hier.
Warum Rot und Grün die meisten Probleme machen
Die Rot- und Grünzapfen im Auge reagieren auf überlappende Lichtbereiche. Fehlt einer von ihnen oder ist er verschoben, verliert das Gehirn den größten Teil des Unterschieds zwischen Rot, Orange, Gelb und Grün, und diese Farben reihen sich auf einer einzigen Skala von dunkel bis hell auf.
Deshalb sind Ampel-Statusfarben, rote und grüne Diagrammlinien sowie Erfolgs- oder Fehlerbadges die üblichen Problemfälle. Transportiere die Bedeutung über ein Wort oder Icon und lass die beiden Farben sich in der Helligkeit unterscheiden.
So funktioniert der Paar-Check
Jede Farbe wird in OKLab umgerechnet, einen Farbraum, der so gestaltet ist, dass gleiche Abstände ungefähr gleich verschieden aussehen. Das Tool misst den Abstand zwischen jedem Paar vor und nach der Simulation. Ein Paar, das normalerweise deutlich verschieden ist, in einer Simulation aber unter den Schwellenwert fällt, wird markiert.
Der Schwellenwert ist eine Ermessensentscheidung für kleine flächige Elemente wie Diagrammlinien, Legendenfelder und Badges. Große Farbflächen sind leichter zu unterscheiden, daher kann ein markiertes Paar als zwei Abschnitte in voller Breite in Ordnung sein.
Normales Sehen
Alle drei Zapfentypen funktionieren.
Protanopie
Keine Rotzapfen. Rottöne wirken dunkel und ähneln Grüntönen.
Protanomalie
Schwache Rotzapfen. Eine mildere Rot-Grün-Verwechslung.
Deuteranopie
Keine Grünzapfen. Rot und Grün sehen gleich aus.
Deuteranomalie
Schwache Grünzapfen. Der häufigste Typ.
Tritanopie
Keine Blauzapfen. Blau und Grün, Gelb und Rosa werden verwechselt.
Tritanomalie
Schwache Blauzapfen. Eine mildere Blau-Gelb-Verwechslung.
Achromatopsie
Kein Farbsehen. Nur die Helligkeit bleibt.
Achromatomalie
Stark eingeschränktes Farbsehen.
Wähle eine Bilddatei.
Dieses Bild konnte nicht gelesen werden.
Zieh einen Screenshot hierher oder klicke, um einen auszuwählen. Er bleibt auf deinem Gerät.