Kontrastverhältnis und lesbarer Text

Grau #767676 auf Weiß hat ein Kontrastverhältnis von 4.54:1 und besteht das WCAG-Minimum für Fließtext; einen Schritt heller ergibt #777777 4.48:1 und fällt durch.

Relative Leuchtdichte

Um zu entscheiden, ob Text lesbar ist, nutzen die Web Content Accessibility Guidelines weder den Farbton noch die HSL-Helligkeit. Sie nutzen die relative Leuchtdichte, eine Zahl von 0 für Schwarz bis 1 für Weiß, die nachzeichnet, wie viel Licht eine Farbe zum Auge sendet. WCAG 2.2 definiert sie in zwei Schritten. Zuerst wird jeder Kanal in eine Zahl von 0 bis 1 umgerechnet, indem man durch 255 teilt und dann die sRGB-Kurve rückgängig macht: Ist der Wert höchstens 0.04045, teile ihn durch 12.92; sonst berechne ((Wert + 0.055) / 1.055) hoch 2.4. Zweitens werden die drei Ergebnisse gewichtet und addiert: L = 0.2126 R + 0.7152 G + 0.0722 B.

Die Gewichte erklären viel. Grün trägt mehr als 70% des Ganzen, Blau kaum 7%. Darum hat reines Blau #0000ff nur eine Leuchtdichte von 0.0722 und reines Gelb, Rot plus Grün, 0.9278. Die Spezifikation hält auch ein kleines Stück Geschichte fest: Vor Mai 2021 stand der Schwellenwert als 0.03928, aus einem älteren Dokument übernommen. Er wurde auf 0.04045 korrigiert, und WCAG vermerkt, dass das praktisch keinen Einfluss auf die Ergebnisse hat.

Kontrastverhältnis

Das Kontrastverhältnis vergleicht zwei Leuchtdichten: (L1 + 0.05) / (L2 + 0.05), wobei L1 die hellere und L2 die dunklere Farbe ist. Die 0.05 steht für ein wenig Streulicht, das immer das Auge erreicht, und hält das Verhältnis für Schwarz endlich. Die Verhältnisse reichen von 1:1, eine Farbe gegen sich selbst, bis 21:1, Schwarz gegen Weiß: (1 + 0.05) / (0 + 0.05) = 21. Für #767676 auf Weiß ist die Leuchtdichte 0.1812, das Verhältnis also 1.05 / 0.2312 = 4.54.

Hier die ganze Rechnung für das Blau #2273c3 aus Einheit 2, rgb(34 115 195). Durch 255 geteilt sind die Kanäle 0.1333, 0.4510 und 0.7647. Alle drei liegen über 0.04045, jeder geht also durch die Potenzformel und ergibt 0.0160, 0.1714 und 0.5457. Gewichtet werden daraus 0.0034 von Rot, 0.1226 von Grün und 0.0394 von Blau, und die Summe ergibt eine Leuchtdichte von 0.1654. Gegen Weiß ist das Verhältnis 1.05 / 0.2154 = 4.87, dieses Blau besteht AA für Fließtext auf einer weißen Seite also. Gegen Schwarz sind es 0.2154 / 0.05 = 4.31, knapp zu wenig.

Die Schwellenwerte

WCAG 2.2 macht aus dem Verhältnis Prüfergebnisse „Bestanden“ oder „Nicht bestanden“. Das Erfolgskriterium 1.4.3 auf Stufe AA verlangt mindestens 4.5:1 für normalen Text und 3:1 für großen Text. Großer Text heißt mindestens 18 Punkt oder 14 Punkt fett; WCAG vermerkt, dass das bei üblichen Textschriften etwa 1.5 em und 1.2 em fett entspricht. Kriterium 1.4.6 auf Stufe AAA hebt die Latte auf 7:1 und 4.5:1. Kriterium 1.4.11 verlangt 3:1 für die Teile von Schaltflächen, Formularfeldern und Icons, die Menschen sehen müssen. Reines Rot #ff0000 auf Weiß ergibt 4.00:1, was für eine große Überschrift in Ordnung ist, für Fließtext aber durchfällt. Blau #0000ff auf Weiß ergibt 8.59:1 und besteht alles.

Eine weitere nützliche Tatsache folgt aus der Formel. Eine Farbe mit einer Leuchtdichte von etwa 0.179 hat gegen Weiß und gegen Schwarz denselben Kontrast, etwa 4.58:1. Ist sie dunkler, liest sich weißer Text darauf besser; ist sie heller, schwarzer. Das Feld unter dem Modell zeigt beide Verhältnisse und nennt die bessere Wahl.