Stimmt etwas mit diesem Tool nicht?
Über „Color Blindness CSS Reference Online“
Dieses Tool generiert eine CSS-Referenz für barrierefreie Farbpaletten, die auch bei Farbsehschwächen funktionieren. Es zeigt, wie Farben bei Protanopie, Deuteranopie, Tritanopie und Monochromasie wirken, und schlägt sichere Alternativen vor.
Etwa 8% der Männer und 0,5% der Frauen haben eine Form von Farbsehschwäche. Wer nur für volle Farbsicht gestaltet, schließt sie aus. Sichere Farbpaarungen und zusätzliche Hinweise (Form, Text, Muster) machen Designs inklusiv.
Praktisch zum Testen von Markenpaletten, dem Auditieren bestehender Designs auf Barrierefreiheit und zum Lernen, welche Farbpaare zu vermeiden sind.
So nutzt du dieses Tool
Ein CSS-Filter-Snippet für Farbfehlsichtigkeits-Simulation erhalten
Ohne Eingabe ausführen
Das Tool hat keine Eingabefelder — einfach Run drücken. Es liefert ein einsetzbares CSS-Snippet für Ihr Stylesheet (keine weitere Konfiguration).
Was Sie bekommen
Ergebnis: einzelnes Feld `css` mit drei Filter-Klassen `.cb-protanopia`, `.cb-deuteranopia`, `.cb-tritanopia`. Jede nutzt eine SVG-`feColorMatrix`, die eine Form der Farbsehschwäche annähert.
Anwendung
Fügen Sie die passende Klasse an `body` (oder einen Wrapper), um Ihr Design so zu sehen, wie es etwa 8 % der Männer mit Rot-Grün-Schwäche oder ein viel kleinerer Anteil mit Blau-Gelb sieht. Klassenumschaltung aus den DevTools — kein Rebuild nötig.
Einschränkungen
Lineare Annäherungen; reales Farbsehen ist differenzierter. Tools wie Sim Daltonism (macOS) oder Coblis nutzen bessere Modelle. Immer mit WCAG-Kontrastprüfungen kombinieren (wcag-contrast-checker-online) — Farbe darf nicht der einzige Informationsträger sein.