Wie sehen meine Farben für Menschen mit Farbenblindheit aus?
Farbenblindheit-Simulator - sieh, wie deine Farben / Designs für Menschen mit unterschiedlichen Arten von Farbenblindheit aussehen.
Vier Typen: Protanopie (keine Rot-Rezeptoren, ~1% der Männer), Deuteranopie (kein Grün, ~1,2% der Männer), Tritanopie (kein Blau, selten), Achromatopsie (vollständige Farbenblindheit, sehr selten).
Prüf eine einzelne Farbe oder ein komplettes Bild / Screenshot. Algorithmus auf Basis der Brettel/Vienot/Mollon-Matrizen - dieselben, die auch Chrome DevTools nutzen.
So nutzt du das Tool
- Wähl den Modus: "Farbe" (einzelnes Hex) oder "Bild" (Foto / Seiten-Screenshot).
- Farbe-Modus: tippe ein Hex ein / nimm den Picker / nutze die Bildschirm-Pipette / klick eine der 8 Beispielfarben. Rechts siehst du 5 Versionen: Original + 4 Typen mit betroffenem Bevölkerungsanteil.
- Bild-Modus: lade eine Datei hoch (PNG, JPG, WebP, AVIF, HEIC), sieh vier Simulationen neben dem Original.
- Hinweis: die Matrizen simulieren die "schweren" Formen. Die meisten Farbenblinden haben Anomalien ("Protanomalie") - sie sehen etwas Farbe, nur schwächer. Der Simulator zeigt den "Worst Case".
- Designer: vor dem Versenden eines Mockups - prüf immer Deuteranopie (am häufigsten) und Protanopie. Ist deine Akzentfarbe für Deuteranopen unsichtbar, füge einen Sekundär-Indikator hinzu (Icon, Kontrast).
Wann das hilfreich ist
Wo sich der Farbenblindheit-Simulator lohnt - typische Szenarien:
- Webdesign / a11y - vor dem Ausliefern eines Designs prüfen, ob rot-grüne Links, Fehler-/Erfolgs-Zustände, Farb-Charts für Deuteranopen (~1,2% der Nutzer, 8% der Männer) unterscheidbar sind.
- Charts - rote und grüne Balken sehen für einen Deuteranopen identisch aus. Muster hinzufügen (Streifen, Punkte) oder Beschriftungen.
- Spiel-UI - rote/grüne Lebens-/Schadens-Indikatoren - für ~5% der männlichen Spieler kaum lesbar.
- Accessibility-Audits - WCAG 1.4.1 verlangt: "Farbe ist nicht das einzige visuelle Mittel zur Informationsvermittlung". Der Simulator zeigt, warum. Kombiniere ihn mit dem Kontrast-Prüfer, um WCAG 1.4.3 (Textkontrast) im selben Durchlauf abzudecken.
- Schulung - sieh, warum GitHubs grüne/rote Pfeile funktionieren (unterschiedliche Form), aber ein Tutorial mit "klick auf den grünen Button" fehlschlägt (Farbe allein). Um eine sicherere Akzentfarbe zu wählen, tausche Farben im Farb-Konverter.
Fragen und Antworten
Grob genau. Wir nutzen Brettel et al. 1997 / Machado 2009-Matrizen - dieselben, die Chrome DevTools, Photoshop, Sim Daltonism (beliebte macOS-App) verwenden. Simulation der "schweren Form". Farbenblinde mit Anomalie (keine vollständige Blindheit) sehen mehr, als der Simulator suggeriert. Für den "Worst-Case-Design-Check" ist das der Standard.