Thumbnails und Farbenblindheit

Um wen es geht, und warum das Thumbnail der schwere Fall ist

Die Rot-Grün-Blindheit ist die häufige: sie wird meist mit etwa 8 % der Männer und 0,5 % der Frauen nordeuropäischer Herkunft angegeben, in zwei Formen — Deuteranopie, die grünseitige, und Protanopie, die rotseitige. Diese beiden habe ich simuliert. Alles andere ist selten genug für eine Fußnote, und die bekommt es am Ende.

Ein Thumbnail ist der schwere Fall, weil es nichts gibt, worauf man ausweichen kann. Ein Diagramm mit Farblegende hat Beschriftungen; eine Website hat Text. Ein Thumbnail hat ein Bild von 336 Pixeln Breite, daneben einen Titel, der das Video beschreibt und nicht das Bild — und wenn zwei seiner Flächen nicht mehr unterscheidbar sind, hat der Entwurf einfach eine Grenze verloren, ohne Ersatz.

Was sich ändert und was nicht

Das lohnt sich als Erstes zu messen, weil es alles andere entscheidet. Ich habe die übliche Dichromaten-Simulation über alle 660 Thumbnails der Pakete dieses Werkzeugs laufen lassen und jedes Bild mit sich selbst verglichen.

Die Gesamthelligkeit eines Bildes bewegt sich kaum: die mediane Änderung der mittleren relativen Leuchtdichte beträgt 0,59 % bei Deuteranopie und 1,11 % bei Protanopie. Was zusammenbricht, ist der Unterschied zwischen Farbtönen. Reines Rot, rgb(255,0,0), wird zu rgb(147,147,0), einem stumpfen Gelb. Ein kräftiges Grün, rgb(0,200,0), wird zu rgb(171,171,30). Diese zwei sind dieselbe Farbe und unterscheiden sich nur in der Helligkeit. Weiß bleibt genau weiß.

Der nützliche Gedanke ist also nicht, dass Farben schlechter werden. Es ist, dass die Farbton-Achse gelöscht wird und die Helligkeits-Achse unversehrt bleibt. Jede Trennung, die Sie aus Farbton gebaut haben, ist weg; jede, die Sie aus Helligkeit gebaut haben, ist unberührt.

Einzelne gesättigte Farben können sich in der Helligkeit verschieben — dasselbe reine Rot steigt bei Deuteranopie von 0,213 auf 0,271 relative Leuchtdichte und fällt bei Protanopie auf 0,104. Es ist das Bild als Ganzes, das stehen bleibt, weil der größte Teil einer Fotografie nicht voll gesättigt ist.

Wie ich es gemessen habe

Die Simulation ist die lineare Näherung von Viénot, Brettel und Mollon (1999): sRGB in linear umrechnen, dann in die LMS-Zapfenantwort, den fehlenden Zapfen auf die Ebene projizieren, die der Dichromat sieht, und zurück. Das ist das Standardverfahren hinter den meisten Farbenblindheits-Simulatoren, und seine bekannte Schwäche ist die Tritanopie — weshalb dieser Leitfaden dazu nichts behauptet.

Für jedes Thumbnail habe ich die zwei dominanten Farbtonfamilien genommen — die zwei von zwölf 30°-Sektoren mit dem größten sättigungsgewichteten Anteil, beide über 10 % — und zwei Dinge an diesem Paar gemessen. Das WCAG-Kontrastverhältnis zwischen ihren mittleren Farben, ein reines Helligkeitsmaß, und den Abstand dieser zwei Farben in sRGB vor und nach der Simulation.

586 der 660 Thumbnails haben zwei dominante Farbtöne über der 10-%-Schwelle. Von ihnen sprechen die Zahlen unten.

Wie viel Helligkeit zwei Farben in einem echten Thumbnail trennt

Die Verteilung ist der Befund. Es ist das Kontrastverhältnis zwischen den zwei dominanten Farben desselben Thumbnails, über die 586 mit einem messbaren Paar.

Der Median liegt bei 1,57:1. Zum Vergleich verlangt WCAG 4,5:1 für Lesetext und 3:1 für grafische Objekte — Schwellen, die für Oberflächen geschrieben wurden und nicht für Fotografien, hier also Maßstab und nicht Regel. Nur 2 % dieser Thumbnails erreichen die erste, 9 % die zweite.

Also stützen sich vier von zehn allein auf den Farbton

267 der 586 Paare — 46 % von ihnen, 40 % aller gemessenen Thumbnails — trennen ihre zwei Hauptfarben mit weniger als 1,5:1 Helligkeitskontrast. Was diese zwei Flächen auseinanderhält, ist also überwiegend nicht Helligkeit, sondern Farbton — und damit genau der Teil, der bei einem Rot-Grün-Dichromaten nicht ankommt.

Die Simulation bestätigt es direkt: über alle Paare sinkt der Abstand der zwei Farben um median 9 %, innerhalb der Gruppe mit geringer Helligkeit um 19 %. Die Paare, die von Anfang an den geringsten Helligkeitskontrast hatten, verlieren genau am meisten von dem, was sie hatten.

Und es ist dieselbe Entscheidung, die bei der Auslieferungsgröße aus einem anderen Grund scheitert. Eine Grenze aus Farbton und nicht aus Helligkeit ist auch die Grenze, die sich auflöst, wenn die Datei auf 336 Pixel Breite neu kodiert wird, wie in dem Leitfaden zu unscharfen Thumbnails gemessen. Zwei Fehlerarten, eine Ursache, eine Abhilfe.

Die Warnung vor Rot auf Grün zielt auf das falsche Problem

Der Standardtipp zur Barrierefreiheit bei Farbenblindheit lautet, Rot nicht neben Grün zu setzen. An echten Thumbnails gemessen ist diese Kombination selten: 13 von 660, 2 %, haben eine rote und eine grüne Familie als ihre zwei dominanten Farbtöne.

Wenn es passiert, ist es schlimm — diese Paare verlieren median 35 % des Abstands zwischen ihnen, das Schlechteste aller Gruppen hier, und 10 der 13 haben zusätzlich unter 2:1 Helligkeitskontrast. Der Tipp ist also nicht falsch. Er ist nur schmal: er beschreibt 2 % der Thumbnails, während die allgemeine Fassung desselben Problems — zwei beliebige Farbtöne mit fast keiner Helligkeit dazwischen — 40 % beschreibt.

Und es schwankt stark je Nische

Sortiert nach dem Anteil der messbaren Paare, die sich allein auf den Farbton stützen. Das Muster folgt dem, wie die Nischen ohnehin aussehen, gemessen in dem Leitfaden zum Auffallen: die hellen, gesättigten Reihen haben die meiste Farbton-Trennung, weil weniger Helligkeitsspanne übrig bleibt, mit der man überhaupt trennen könnte.

Mode & Beauty und Politik liegen bei 65 % und 62 %; Finanzen und Gesundheit & Fitness bei 25 % und 30 %. Liegt Ihre Nische in der oberen Hälfte dieser Tabelle, ist das Thumbnail, dessen Look Sie gerade übernehmen wollen, mit hoher Wahrscheinlichkeit eines der verflachenden.

Die Abhilfe ist eine, für die Sie schon eine Zahl haben

Trennen Sie zuerst über die Helligkeit und behandeln Sie den Farbton als Zugabe. Das ist dieselbe Schlussfolgerung, zu der der Leitfaden zur Farbe vom anderen Ende kommt — die Oberfläche ist entweder weiß oder fast schwarz — und es ist auch hier die ganze Abhilfe, denn die Helligkeit ist die Achse, die die Simulation in Ruhe lässt.

Der billige Test ist Graustufen. Entsättigen Sie Ihren Entwurf vollständig und sehen Sie, ob die Teile noch als getrennte Teile lesbar sind: Motiv gegen Hintergrund, Text gegen das, was dahinter liegt, eine Hälfte eines geteilten Bildes gegen die andere. Übersteht er das, übersteht er Dichromasie, denn Graustufen sind der strengere Test: sie entfernen die gesamte Farbtoninformation, während ein Dichromat eine Achse davon behält.

Umgekehrt gilt das nicht als Beweis. Etwas, das in Graustufen scheitert, kann für einen realen Zuschauer mit Deuteranopie noch teilweise sichtbar sein. Den Graustufentest zu bestehen genügt; ihn nicht zu bestehen ist eine Warnung, kein Urteil. Der Schwellenwert ist nicht unserer: Es ist das Kontrastverhältnis aus dem WCAG-Erfolgskriterium für Mindestkontrast, dem Standard, an dem der Rest des Webs gemessen wird.

Text ist der Fall mit dem geringsten Spielraum

Text auf farbigem Grund entscheidet das am schnellsten, weil Text dünn ist: eine Schlagzeile, die von ihrem Hintergrund nur durch den Farbton getrennt ist, ist für einen Dichromaten unlesbar und für alle anderen bloß schwierig. Nur 2 % der gemessenen Paare erreichen die 4,5:1, die man von Text in einer Oberfläche erwartet.

Die praktische Antwort ist kein Kontrastverhältnis, sondern eine Kontur: ein Umriss oder ein harter Schatten in einer Farbe, deren Helligkeit weit von Text und Hintergrund entfernt liegt — das, was der Leitfaden zur Textgröße für die Verkleinerung misst. Dieselbe Kontur, die eine Schlagzeile bei 336 Pixeln lesbar hält, hält sie auch ohne Farbton lesbar.

Was dieser Leitfaden nicht abdeckt

Die Tritanopie, die Blau-Gelb-Form, wird hier nicht simuliert. Die Viénot-Näherung ist dafür bekanntlich unzuverlässig, und sie ist selten genug — deutlich unter 0,1 % —, dass Raten nichts beitragen würde.

Vollständige Farbenblindheit, die Monochromasie, ist noch seltener, und der Graustufentest oben ist genau dieser Fall: übersteht Ihr Entwurf die Entsättigung, übersteht er auch Monochromasie.

Und dieser ganze Leitfaden handelt vom Farbton. Die andere Barrierefreiheitsfrage eines Thumbnails ist die Größe, und die ist überhaupt keine Frage der Behinderung: alle empfangen Ihren Entwurf mit 336 Pixeln Breite, und die Untergrenzen dafür stehen in den Leitfäden zu Textgröße und zu Gesichtern.

Die Prüfung, in einer Minute

Zwei Durchgänge über dasselbe Bild. Entsättigen und sehen, ob die Teile sich noch trennen. Dann die farbige Fassung zurück in einen echten Feed, denn ein Thumbnail, das sich intern trennt, kann trotzdem seine Kante gegen die Oberfläche verlieren — andere Messung, anderer Leitfaden.

Für diesen zweiten Durchgang ist das Vorschau-Werkzeug da: Ihr Thumbnail zwischen echter Konkurrenz in den echten gerenderten Größen. Der erste ist ein Schieberegler in dem Programm, in dem Sie es entworfen haben, und die billigste Barrierefreiheitsprüfung, die dieses Handwerk hat.

Die Fragen, die alle stellen