Grauer Text auf hellgrauem Grund: Kontrast wird gerechnet

Das Symptom

Auf dem Bildschirm steht ein Hinweis, und er ist da — irgendwie. Grauer Text auf hellgrauem Kasten, „damit es ruhiger wirkt“. Wer ihn geschrieben hat, liest ihn mühelos. Der Vater am Küchentisch liest ihn nicht. Die Kollegin am Fenster liest ihn nicht. Auf dem Handy in der Sonne liest ihn niemand. Und dann kommt der Satz, der jede Diskussion darüber im Kreis laufen lässt: „Ich sehe das doch gut.“

Die „Layer 8“-Wahrheit

Kontrast ist der einzige Punkt der Barrierefreiheit, bei dem Geschmack gar keine Rolle spielt, weil es eine Formel gibt. Die WCAG definieren das Kontrastverhältnis als (L1 + 0,05) geteilt durch (L2 + 0,05), wobei L1 die relative Leuchtdichte der helleren und L2 die der dunkleren Farbe ist. Das Ergebnis liegt laut Anmerkung zwischen 1 und 21 — 1 bedeutet identisch, 21 ist Schwarz auf Weiß. Zwei Farbwerte hinein, eine Zahl heraus. Es gibt hier nichts zu finden, nur etwas auszurechnen.

Interessant ist, was in dieser Formel nicht vorkommt: der Farbton. Das W3C begründet das ausdrücklich — für Menschen mit Farbsinnstörung, die bestimmte Farbnuancen nicht unterscheiden können, haben Farbton und Sättigung nach der Lesegeschwindigkeit gemessen minimalen oder gar keinen Einfluss auf die Lesbarkeit. Deshalb wird Kontrast so berechnet, dass Farbe kein maßgeblicher Faktor ist. Wer also ein zartes Blau auf zartem Grün verteidigt, weil „die Farben sich doch deutlich unterscheiden“, verteidigt eine Eigenschaft, die für das Problem irrelevant ist.

Die Schwellen sind zwei. Fließtext braucht 4,5:1. Große Schrift darf auf 3:1 herunter, weil breitere Striche bei weniger Kontrast noch lesbar bleiben — aber „groß“ ist definiert und nicht verhandelbar: mindestens 18 Punkt, oder 14 Punkt in Fettschrift. Umgerechnet sind das rund 24 beziehungsweise 18,5 CSS-Pixel; das Verständnisdokument rechnet ausdrücklich mit 1pt = 1,333px. Und gerundet wird nicht: 4,499:1 erfüllt die Schwelle 4,5:1 nicht, und bei den Bedienelementen erfüllt 2,999:1 die 3:1 nicht. Diese Härte ist kein Selbstzweck. Eine Grenze, über die man verhandeln kann, ist die Grenze desjenigen, der am lautesten verhandelt.

Denn Text ist nur die Hälfte. Erfolgskriterium 1.4.11 verlangt dieselben 3:1 gegen die angrenzenden Farben für alles, was man braucht, um ein Bedienelement und seinen Zustand überhaupt als solches zu erkennen — und für die Teile von Grafiken, die zum Verständnis nötig sind. Das ist die Regel, an der die meisten modernen Entwürfe scheitern: Feldrahmen in einem Grau, das man erahnt, ein Häkchen im Ankreuzfeld, das im Kästchen fast verschwindet, eine Fokusanzeige, die auf dem hellen Hintergrund nicht mehr auffällt. Ein Formularfeld, dessen Rand man nicht sieht, ist für den Benutzer kein Feld. Es ist eine Fläche, in die man vielleicht klicken kann.

Und dann ist da die Falle, die diese Seite selbst gestellt und in sich getappt ist: die Deckkraft. Eine Textfarbe kann sauber gerechnet 5,90:1 auf dem Hintergrund erreichen und trotzdem an 44 Stellen unlesbar sein, weil dort nicht die Farbe steht, sondern die Farbe mit siebzig Prozent Deckkraft. Der Browser blendet sie dann gegen den Hintergrund: Aus 5,90:1 werden 3,44:1, bei sechzig Prozent 2,83:1, bei fünfzig Prozent 2,35:1. Im Editor sieht das nach einer Nuance aus. In der Rechnung ist es die Hälfte des Kontrasts. Betroffen war hier kein Zierrat, sondern Datumszeilen, Beschriftungen und beide Sucheingaben.

Die Lehre daraus steht seither als Skript im Verzeichnis und nicht als guter Vorsatz im Kopf. scripts/kontrast.mjs liest die Farbdefinitionen aus dem Stylesheet, damit sie nicht doppelt gepflegt werden, sammelt jede im Quelltext tatsächlich vorkommende Kombination aus Farbe und Deckkraft ein, blendet sie genau so, wie der Browser es tut, prüft sie gegen den ungünstigsten Hintergrund, auf dem sie stehen kann, und bricht ab, sobald eine einzige Stelle unter 4,5:1 fällt. Ausgenommen ist allein, was aria-hidden trägt — und das ist keine Hintertür, sondern die Regel selbst: 1.4.3 nimmt reine Dekoration und inaktive Bedienelemente ausdrücklich aus. Was ein Vorleseprogramm nicht ausspricht und was keine Information trägt, muss auch niemand lesen können.

In Apps gilt derselbe Maßstab mit anderen Einheiten. Androids eigene Anleitung empfiehlt 4,5:1 für Text unter 18sp — beziehungsweise unter 14sp bei Fettschrift — und 3:1 für allen übrigen Text. Es ist dieselbe Rechnung mit denselben Zahlen, nur dass die Schriftgröße dort in einer Einheit steht, die die Systemeinstellung des Benutzers mitskaliert.

Das eigentlich Ärgerliche an diesem Fehler: Er ist der billigste von allen. Kein Umbau, keine neue Bibliothek, keine Schulung — zwei Hexadezimalwerte in eine Formel, und in fast allen Fällen reicht es, eine Farbe zwei Stufen dunkler zu setzen. Was ihn trotzdem so verbreitet macht, ist der eine Satz, gegen den keine Formel hilft, solange niemand sie ausrechnet: „Ich sehe das doch gut.“