Farbkontrast

Hellgrau #999999 auf Weiß hat ein Kontrastverhältnis von 2.85:1, deutlich unter den 4.5:1, die die WCAG 2.2 für Fließtext verlangen.

Warum Kontrast wichtig ist

Text, der sich blass vom Hintergrund abhebt, ist für Menschen mit Sehbehinderung, für viele ältere Leserinnen und Leser und für alle, die ein Handy in der Sonne benutzen, schwer zu lesen. Die WCAG 2.2 überlassen „blass“ nicht dem Geschmack. Sie messen die relative Leuchtdichte der beiden Farben, eine Zahl von 0 für Schwarz bis 1 für Weiß, und vergleichen sie mit dem Kontrastverhältnis (L1 + 0.05) / (L2 + 0.05), wobei L1 die hellere Farbe ist. Das Ergebnis reicht von 1:1, eine Farbe auf sich selbst, bis 21:1, Schwarz auf Weiß. Der Kurs zur Farbenlehre arbeitet die Formel Schritt für Schritt durch, hier wenden wir sie an.

Die Werte, die man erreichen muss

Erfolgskriterium 1.4.3 Kontrast (Minimum) auf Stufe AA verlangt mindestens 4.5:1 für normalen Text und 3:1 für großen Text, den die WCAG als mindestens 18 Punkt oder 14 Punkt fett definieren. Kriterium 1.4.6 auf Stufe AAA hebt diese Werte auf 7:1 und 4.5:1. Kriterium 1.4.11 Nicht-Text-Kontrast verlangt 3:1 für die Teile von Bedienelementen und Grafiken, die man sehen muss, etwa den Rahmen eines Textfelds oder die Linien eines Diagramms. Logos und Text, der rein dekorativ oder Teil eines inaktiven Bedienelements ist, sind ausgenommen.

Ein paar Werte lohnt es sich zu merken. Das Grau #767676 ergibt auf Weiß 4.54:1 und wird oft als hellstes reines Grau genannt, das AA besteht; #777777 ergibt 4.48:1 und fällt durch. Das dunklere #595959 erreicht 7.00:1 und besteht AAA. Gesättigte Farben können täuschen: Reines Rot #ff0000 auf Weiß kommt nur auf 4.00:1, während das tiefere Rot #c01c28 6.11:1 erreicht. Platzhaltertext in Formularfeldern fällt häufig durch, weil Designer ihn oft absichtlich sehr hell machen.

Farben in der Praxis prüfen

Die Formel musst du selten von Hand rechnen. Wenn du ein Textelement untersuchst, zeigt die Farbauswahl in den Entwicklerwerkzeugen der großen Browser sein Kontrastverhältnis zum Hintergrund an, oft mit einer Linie, die die Schwellen AA und AAA markiert. Zwei Fälle brauchen besondere Sorgfalt. Text über einem Foto oder Verlauf hat keinen einheitlichen Hintergrund, also prüf ihn gegen die hellste Stelle, auf der er steht, oder leg eine einfarbige Fläche dahinter. Und eine Website mit dunklem Design muss zweimal geprüft werden, weil eine Farbe, die auf Weiß besteht, auf fast Schwarz durchfallen kann: Das Blau #1a5fb4 ergibt auf Weiß 6.29:1, auf reinem Schwarz aber nur 3.34:1.

Nie nur Farbe

Der Kontrast zwischen Text und Hintergrund ist nur die halbe Geschichte. Kriterium 1.4.1 Benutzung von Farbe auf Stufe A sagt, dass Farbe nicht der einzige Weg sein darf, eine Information zu zeigen. Rot #c01c28 und Blau #1a5fb4 sind beide auf Weiß gut lesbar, aber gegeneinander liegt ihr Verhältnis bei nur 1.03:1. In Graustufen oder für jemanden, der Rot und Blau nicht unterscheiden kann, werden sie zum selben Grau. Ein Pflichtfeld, das nur durch ein rotes Label markiert ist, oder ein Link, der sich vom umgebenden Text nur durch die Farbe unterscheidet, braucht also ein zweites Signal: ein Wort, ein Icon, eine Unterstreichung.