Was ein Kontrastverhältnis wirklich misst (und warum 4,5:1 zählt)

Hellgrauer Text auf weißem Hintergrund sieht im Mockup sauber aus und wird für jeden zur Wand, dessen Augen ein bisschen müde, ein bisschen älter oder ein bisschen anders sind. Ob Text lesbar ist, ist keine Geschmacksfrage, sondern etwas Messbares, und die Messgröße dafür ist das Kontrastverhältnis. Sobald du weißt, was die Zahl vergleicht, wirken die darauf aufbauenden Regeln zur Barrierefreiheit nicht mehr willkürlich.

Kurz gesagt: Ein Kontrastverhältnis vergleicht, wie hell dein Text gegenüber dem Hintergrund ist, auf einer Skala von 1:1 (identisch, unsichtbar) bis 21:1 (Schwarz auf Weiß). WCAG legt 4,5:1 als Minimum für normalen Fließtext fest und 3:1 für großen Text, damit die meisten Menschen ihn lesen können. Die Zahl folgt der Leuchtdichte, nicht dem Farbton, und genau deshalb scheitern manche grellen Farbpaare trotzdem.

Die Skala: von 1:1 bis 21:1

Ein Kontrastverhältnis ist eine einzige Zahl, die angibt, wie stark sich zwei Farben in der Helligkeit unterscheiden. Sie reicht von 1:1 ganz unten bis 21:1 ganz oben. Bei 1:1 haben Text und Hintergrund dieselbe Helligkeit, der Text verschwindet darin. Bei 21:1, dem Maximum, hast du reines Schwarz auf reinem Weiß, die lesbarste Kombination, die es gibt.

Alles Lesbare liegt zwischen diesen Polen. Das Verhältnis wird als Paar geschrieben, etwa 4,5:1, was bedeutet, dass die hellere der beiden Farben 4,5-mal so leuchtstark ist wie die dunklere. Höher ist leichter zu lesen. Der ganze Sinn der Zahl ist es, aus einem vagen Urteil, sieht das lesbar aus, etwas zu machen, das du prüfen und bestehen oder durchfallen lassen kannst.

Sie misst Leuchtdichte, nicht Farbe

Hier kommt der Teil, der viele überrascht: Beim Verhältnis geht es nicht darum, welche Farben du gewählt hast, sondern darum, wie hell jede einzelne ist. Der Fachbegriff ist relative Leuchtdichte, die wahrgenommene Helligkeit einer Farbe, nachdem man berücksichtigt, dass das Auge auf Grün weit empfindlicher reagiert als auf Blau. Die Formel gewichtet den Rot-, Grün- und Blaukanal entsprechend und vergleicht dann die beiden Ergebnisse.

Deshalb können zwei Farben, die völlig verschieden aussehen, untereinander trotzdem einen miserablen Kontrast haben. Ein kräftiges Rot auf einem kräftigen Grün ist eine grelle Kombination, aber wenn beide eine ähnliche Leuchtdichte haben, ist der Text darauf wirklich schwer zu lesen, vor allem für jemanden mit Farbsehschwäche, der sich stärker auf Helligkeitsunterschiede stützt als auf den Farbton. Kontrast ist ein Helligkeitsabstand, kein Farbkonflikt, und wer beides verwechselt, landet bei gut aussehenden Designs, die niemand lesen kann. Du kannst jede Kombination aus Text und Hintergrund gegen die WCAG-Schwellen im Kontrast-Checker auf color.hivly.net prüfen und das genaue Verhältnis sehen, bevor du es ausspielst.

Woher 4,5:1 kommt

Die Zahl 4,5:1 ist keine Vorliebe von Designern, sondern der Schwellenwert, den die Web Content Accessibility Guidelines für Fließtext in normaler Größe auf der Stufe AA festlegen, der Stufe, die der Großteil des Webs anpeilt. Sie wurde als der Punkt gewählt, unterhalb dessen gewöhnlicher Text für einen nennenswerten Teil der Menschen schwer zu lesen wird, auch für jene mit mäßig reduzierter Sehkraft oder leichter Farbsehschwäche. Schaffst du diese Hürde, ist dein Fließtext für die große Mehrheit lesbar.

Großer Text bekommt ein leichteres Ziel, 3:1, weil größere und fettere Buchstaben schon bei geringerem Kontrast lesbar sind. Die Striche sind dicker und die Formen größer, also braucht das Auge weniger Helligkeitsabstand, um sie aufzulösen. Das ist die Logik hinter den beiden Zahlen: Je kleiner und feiner der Text, desto mehr Kontrast braucht er, um lesbar zu bleiben. Die Regeln verlangen also mehr, wo der Text klein ist, und weniger, wo er groß ist.

AA, AAA und die Wahl deiner Untergrenze

WCAG definiert zwei Stufen, und der Unterschied liegt darin, wie streng der Kontrast sein muss. AA, das übliche Ziel, verlangt 4,5:1 für normalen Text und 3:1 für großen Text. AAA, die strenge Stufe, hebt das auf 7:1 für normalen und 4,5:1 für großen Text an. AAA ist schwerer umzusetzen, weil es viele weiche, kontrastarme Stile ausschließt, aber es macht Inhalte für Menschen mit deutlich schwächerer Sehkraft lesbar.

Die meisten Websites zielen auf AA und behandeln es als Untergrenze, nicht als Ziel. Wenn dein Publikum eher älter ist oder viele Leser mit Sehbeeinträchtigungen umfasst, ist AAA für deinen Kerntext eine vernünftige Entscheidung. So oder so ist das Vorgehen dasselbe: Lege deine Untergrenze fest, miss jede Kombination aus Text und Hintergrund dagegen und korrigiere die, die durchfallen, bevor jemand die Augen zusammenkneifen muss. Die Zahl nimmt das Raten heraus, und genau dafür gibt es sie.