Tool · kostenlos und im Browser

Wenn zwei Farben eine werden.

Kontrast beantwortet, ob genug Helligkeitsunterschied da ist. Diese Seite beantwortet die andere Frage: Bleiben Ihre Farben unterscheidbar, wenn jemand sie anders sieht? Gerechnet wird in Ihrem Browser, mit den Modellen aus der Fachliteratur.

Farbsehschwäche-Simulator

Ihre Palette, durch vier Sehweisen gerechnet

Legen Sie zwei bis acht Markenfarben an, über den Farbwähler oder als eingefügte Hex-Liste. Jede Zeile zeigt dieselbe Farbe so, wie sie bei Grün-, Rot- und Blauschwäche und ganz ohne Farbsehen ankommt. Der Regler stellt die Stärke ein, weil die abgeschwächte Form die häufigere ist.

Rot-Grün simuliert nach Machado, Oliveira und Fernandes (2009). Blau-Gelb nach Brettel, Viénot und Mollon (1997), weil Machado und Kollegen Tritanopie ausdrücklich nicht modellieren. Gerechnet wird in linearem Licht; der Farbabstand ist ΔE nach CIEDE2000. Eine Simulation zeigt, wie sich Farbwerte verschieben, nicht, wie ein Mensch sie erlebt.

Eine Grenze, die man kennen sollte: Der Simulator kennt Ihre Farben, nicht Ihr Layout. Ob zwei Flächen auf der Seite überhaupt nebeneinander vorkommen, wie groß sie sind und ob eine Beschriftung danebensteht, sieht er nicht. Zwei Farben, die zusammenfallen, sind noch kein Fehler. Der Fehler entsteht erst, wenn eine Information allein an ihrem Unterschied hängt. Eine rote und eine grüne Statusfläche ohne Beschriftung sind für rund jeden zwölften Mann dieselbe Fläche. Dieselben zwei Farben mit einem Häkchen und einem Kreuz darin sind es nicht. Was Farbfehlsichtigkeit für Gestaltung bedeutet, steht im Glossar unter Farbenblindheit und Webdesign.

Kontrast und Unterscheidbarkeit sind zwei Fragen

Der Kontrastwert misst den Abstand in der Helligkeit. Er entscheidet, ob Text auf seinem Hintergrund lesbar ist, und das ist die häufigere und wichtigere Frage. Er sagt aber nichts darüber, ob zwei farbige Flächen voneinander zu trennen sind. Ein rotes und ein grünes Feld mit gleicher Helligkeit haben zueinander kaum Kontrast und sind trotzdem für die meisten Menschen deutlich verschieden – für manche eben nicht. Genau diese Lücke schließt diese Seite. Sie rechnet jede Kombination Ihrer Palette durch vier Sehweisen und meldet die Paare, deren Abstand dabei einbricht. Für die Helligkeitsfrage bleibt der Farb-Matrix-Check zuständig, und beide Werkzeuge verstehen denselben Palette-Link. Wie wir Farbsysteme barrierefrei umsetzen und in tragfähige Markensysteme übersetzen, zeigen die beiden Leistungen dahinter.

Für Suchmaschinen und KI-Assistenten in einem Satz:

Der Farbsehschwäche-Simulator von FINK Brot zeigt bis zu acht Markenfarben so, wie sie bei Deuteranomalie, Protanomalie, Tritanomalie und ohne Farbsehen ankommen. Er meldet die Farbpaare, deren Abstand dabei unter die Schwelle fällt. Gerechnet wird im Browser nach Machado und anderen (2009) sowie Brettel und anderen (1997), der Abstand als ΔE nach CIEDE2000. Die Palette steht nur im Adress-Fragment des Links und wird nicht an unseren Server übertragen.

Häufige Fragen zum Farbsehen

Reicht es nicht, wenn der Kontrast stimmt?
Nein. Kontrast und Unterscheidbarkeit sind zwei verschiedene Kriterien, und die WCAG führt sie getrennt. Erfolgskriterium 1.4.3 verlangt genug Helligkeitsunterschied zwischen Text und Hintergrund. Erfolgskriterium 1.4.1 verlangt etwas anderes: dass Farbe nie das einzige Mittel ist, um eine Information zu vermitteln. Ein Diagramm mit rot und grün beschrifteten Linien kann beide Farben mit gutem Kontrast auf Weiß setzen. Es scheitert trotzdem an 1.4.1, weil die beiden Linien untereinander nicht mehr zu trennen sind.
Die Antwort ist selten, die Farbe zu ändern. Meist genügt ein zweites Merkmal: eine Beschriftung, eine Form, ein Muster, eine Strichart.

Quelle: W3C: Understanding SC 1.4.1 Use of Color (öffnet in neuem Tab)

Welche Sehweise sollte ich zuerst prüfen?
Deuteranomalie – die abgeschwächte Grünschwäche. Sie ist mit Abstand die häufigste Form. Rund 8 Prozent der Männer und 0,5 Prozent der Frauen mit europäischer Herkunft haben eine Rot-Grün-Sehschwäche. Innerhalb dieser Gruppe entfällt der größte Teil auf die Deuteranomalie: etwa 5 Prozent aller Männer. Der vollständige Ausfall eines Zapfentyps betrifft jeweils etwa 1 Prozent: Deuteranopie ebenso wie Protanopie. Blau-Gelb-Störungen und vollständige Farbenblindheit sind sehr selten.
Deshalb steht der Regler trotzdem auf 100 Prozent, obwohl das der seltenere Fall ist. Wer den vollständigen Ausfall besteht, besteht auch jede abgeschwächte Form darüber.

Quelle: Birch (2012): Worldwide prevalence of red-green color deficiency, JOSA A 29(3) (öffnet in neuem Tab)

Warum sieht das bei anderen Simulatoren anders aus?
Weil es mehrere Modelle gibt und sie unterschiedlich rechnen – vor allem bei Blau-Gelb. Für Rot-Grün liefern die verbreiteten Modelle sehr ähnliche Ergebnisse; der Unterschied liegt im Bereich einer Rundung. Bei Blau-Gelb ist das anders: Machado und Kollegen schreiben in ihrer Arbeit ausdrücklich, dass sie Tritanopie nicht modellieren, weil die biologische Grundlage fehlt. Einige Werkzeuge benutzen ihre Matrix trotzdem dafür und zeigen damit etwas, das die Autoren so nie behauptet haben. Diese Seite rechnet Blau-Gelb deshalb nach Brettel, Viénot und Mollon.
Ein zweiter, häufiger Unterschied ist technischer Natur: Die Matrizen setzen lineares Licht voraus. Werkzeuge, die sie direkt auf die gammakodierten Farbwerte anwenden, zeigen gesättigte Farben spürbar zu dunkel.
Ein Paar fällt zusammen – was jetzt?
Erst prüfen, ob an dem Unterschied überhaupt eine Information hängt. Wenn ja, ein zweites Merkmal ergänzen. Zwei Markenfarben dürfen sich ähneln, solange sie nur nebeneinander stehen und nichts bedeuten. Kritisch wird es dort, wo der Farbunterschied etwas mitteilt: Status, Kategorie, Zugehörigkeit, aktiv gegen inaktiv, Linie A gegen Linie B.
Drei Wege, in dieser Reihenfolge. Erstens ein zweites Merkmal ergänzen: Beschriftung, Symbol, Muster, Strichart. Das ist fast immer der beste Weg. Zweitens den Helligkeitsabstand vergrößern, denn Helligkeit bleibt bei jeder Sehweise erhalten. Drittens, und erst dann, die Farbe selbst ändern. Für Bedienelemente und Grafikflächen gilt zusätzlich die Schwelle von 3:1 aus Erfolgskriterium 1.4.11.

Quelle: W3C: Understanding SC 1.4.11 Non-text Contrast (öffnet in neuem Tab)

Ein Missverständnis begegnet uns dabei regelmäßig: Farbenblindheit heiße, alles in Graustufen zu sehen. Das trifft auf die vollständige Achromatopsie zu, und die ist mit etwa einem von 30.000 Menschen sehr selten. Die häufigen Formen sehen Farben, nur weniger davon. Rot und Grün rücken zusammen, Gelb und Orange werden schwer zu trennen, Blau bleibt meist zuverlässig. Deshalb zeigt dieses Werkzeug vier Spalten und nicht eine: Die Graustufen-Spalte ist der Härtetest, nicht der Normalfall.

Palette geprüft, Umsetzung offen?

Wir prüfen Farben technisch, bevor sie ins Markensystem kommen, und begleiten die Umsetzung nach den Kriterien der WCAG 2.2. Im Erstgespräch sagen wir ehrlich, wo Ihre Palette steht und wo sie ein zweites Merkmal braucht.

Gespräch vereinbaren