Kontrastverhältnis: wie die WCAG es tatsächlich berechnet

Die Formel: zwei Leuchtdichten und eine Konstante

Der gesamte WCAG-2.x-Kontrast passt in eine Zeile: Verhältnis = (L1 + 0,05) ÷ (L2 + 0,05), wobei L1 die relative Leuchtdichte der helleren und L2 die der dunkleren der beiden Farben ist. Weil die Spezifikation sie nach Leuchtdichte und nicht nach Rolle ordnet, hängt das Verhältnis nie davon ab, welche Farbe du Vordergrund genannt hast. Schwarzer Text auf Weiß und weißer Text auf Schwarz ergeben dieselben 21:1.

Alles Interessante steckt in L. Die relative Leuchtdichte ist eine physikalische Größe: Sie schätzt, wie viel Licht die Fläche abgibt, normiert auf 1 für reines Weiß und 0 für reines Schwarz. Sie ist bewusst kein Maß dafür, wie hell die Farbe dem menschlichen Auge erscheint, und sie ist ganz sicher nicht das L aus HSL oder das L aus CIELAB — beide sind wahrnehmungsbasiert und liefern für denselben Hex-Code sehr andere Zahlen.

Diese eine Unterscheidung erklärt fast jeden Streit, den ein Designer mit einem Kontrastprüfer hat. Das Werkzeug bewertet nicht den Entwurf; es teilt zwei Zahlen aus einem kolorimetrischen Modell, das zu Zeiten der Bildröhre normiert wurde und nie beanspruchte, der Wahrnehmung zu entsprechen.

Schritt eins: jeden Kanal linearisieren

Ein sRGB-Wert von 128 trägt nicht die halbe Lichtmenge von 255. Anzeigecodierungen sind gammakomprimiert, damit der begrenzte 8-Bit-Bereich dort verbraucht wird, wo das menschliche Sehen empfindlich ist. Die gespeicherte Zahl ist also eine nichtlineare Funktion des Lichts. Bevor irgendetwas gewichtet oder addiert werden kann, muss jeder Kanal auf eine lineare Größe zurückgerechnet werden.

Die WCAG schreibt die Übertragungsfunktion aus. Teile den 8-Bit-Wert durch 255, um c in [0, 1] zu erhalten. Ist c höchstens 0,03928, lautet der lineare Wert c ÷ 12,92. Sonst ist er ((c + 0,055) ÷ 1,055) hoch 2,4. Das kurze lineare Stück nahe Schwarz existiert, weil eine reine Potenzfunktion bei null eine unendliche Steigung hat — numerisch unangenehm und für ein echtes Display physikalisch falsch. sRGB setzt deshalb darunter eine Gerade ein.

Führt man sie aus, ist die Nichtlinearität offensichtlich: Kanal 128 linearisiert zu 0,215861, nicht zu 0,5. Kanal 10 ergibt 0,003035, Kanal 11 ergibt 0,003347. Eine Fußnote lohnt sich hier, denn sie taucht in Fehlerberichten auf. Die WCAG schreibt die Schwelle als 0,03928, die IEC-sRGB-Norm dagegen als 0,04045. In 8 Bit schneiden diese bei 10,0164 bzw. 10,31, beide liegen also zwischen den ganzen Zahlen 10 und 11, und keine wählt je einen anderen Zweig. Ein Durchlauf aller 16 777 216 sRGB-Farben gegen Weiß ergab null Verdiktwechsel und eine maximale Verhältnisdifferenz von exakt 0. Die Abweichung existiert im Text und hat auf kein 8-Bit-Ergebnis Einfluss.

Schritt zwei: die Gewichte, wo Grün gewinnt

Die drei linearen Kanäle werden zu L = 0,2126 R + 0,7152 G + 0,0722 B zusammengeführt. Diese Koeffizienten sind die Leuchtdichtegewichte aus Rec. 709 und summieren sich exakt zu 1, weshalb Weiß auf 1,000000 landet. Sie codieren eine Tatsache über die menschliche Netzhaut, nicht über das Display: Die Zapfen, die die Leuchtdichtewahrnehmung dominieren, sind für die Mitte des sichtbaren Spektrums weit empfindlicher als für dessen Enden.

Die Folgen sind drastisch, sobald man die Primärfarben rechnet. Reines Rot #ff0000 hat die relative Leuchtdichte 0,212600. Reines Grün #00ff00 hat 0,715200. Reines Blau #0000ff hat 0,072200. Bei gleicher Kanalintensität ist Grün fast das Zehnfache der Leuchtdichte von Blau. Ob eine Farbe eine Kontrastprüfung besteht, hängt daher weit mehr von ihrem Grünanteil ab als von dem, was ein Designer als ihre Dunkelheit empfindet.

Eine nützliche Gegenprobe: Suche das Grau mit derselben relativen Leuchtdichte wie reines Blau. Es ist #4c4c4c mit 0,072272 gegenüber 0,072200 für Blau. Beide erreichen auf Weiß 8,59:1. Für das Modell sind diese beiden Farben in Kontrastfragen austauschbar, was sie für eine lesende Person sichtbar nicht sind — und genau diese Lücke ist der Vorwurf, den die Entwickler des Nachfolgers der WCAG 2 machen.

Reines Blau besteht, mittleres Grau fällt durch

Schicke beide durch die Formel. Reines Blau auf Weiß: L1 = 1,000000, L2 = 0,072200, Verhältnis = 1,05 ÷ 0,122200 = 8,59:1. Das übersteht AA für Fließtext bei 4,5:1 und AAA bei 7:1. Mittleres Grau #808080 auf Weiß: L2 = 0,215861, Verhältnis = 1,05 ÷ 0,265861 = 3,95:1 — ein klares Durchfallen bei AA für Fließtext und nur knapp über der 3:1-Marke für großen Text. Die meisten Menschen ordnen diese beiden Farben beim Raten genau andersherum.

Dieselbe Gewichtung erklärt reines Grün. #00ff00 auf Weiß erreicht 1,37:1 — schlechter als fast jede Farbe, die ein Designer in Betracht zöge — weil Grün 71,52 % der Leuchtdichte ausmacht und volles Grün damit fast so hell ist wie Weiß. Auf Schwarz erreicht dasselbe Grün 15,30:1. Reines Blau auf Schwarz erreicht nur 2,44:1 und scheitert sogar an der 3:1-Schwelle für Nicht-Text — die Umkehrung seines hervorragenden Ergebnisses auf Weiß.

Bei Grautönen lohnt sich das Merken der Grenze. Fährt man die neutrale Rampe gegen Weiß ab, liefert #767676 4,5422:1 und besteht AA, während der unmittelbar nächste Wert #777777 4,4781:1 liefert und durchfällt. #767676 ist damit das hellste Grau, das auf weißem Grund Fließtext tragen kann, und #595959 landet auf 7,00:1, genau der AAA-Linie.

Wofür die 0,05 da ist

Schwarz hat die relative Leuchtdichte 0. Teilt man irgendetwas durch 0, wird das Verhältnis unendlich — als Kennzahl unbrauchbar und als Beschreibung eines echten Bildschirms falsch. Die zu beiden Termen addierte 0,05 steht für Umgebungslicht, das an der Displayoberfläche reflektiert wird: Ein schwarzes Pixel ist in einem beleuchteten Raum nie wirklich schwarz, und die Konstante nähert den Schleier an, der es anhebt.

Die Rechnung ist unmittelbar. Weiß auf Schwarz wird zu (1 + 0,05) ÷ (0 + 0,05) = 1,05 ÷ 0,05 = 21. Daher stammt die berühmte Obergrenze von 21:1 — keine Designentscheidung, sondern 1,05 geteilt durch 0,05. Entfernt man die Konstante, ergibt dasselbe Paar Unendlich, was eine naive Implementierung zurückgibt und was mehrere frühe Kontrastbibliotheken tatsächlich ausgeliefert haben.

Die Konstante staucht außerdem das dunkle Ende der Skala. Zwei nahezu schwarze Farben, deren Leuchtdichte sich um den Faktor zehn unterscheidet, haben fast dasselbe Kontrastverhältnis, weil 0,05 beide Nenner dominiert. Das ist Absicht — auf diesen Niveaus ist der Unterschied bei normalem Raumlicht tatsächlich unsichtbar — erklärt aber, warum sich Dark-Mode-Paletten schwerer abstimmen lassen: Die Formel hört genau dort auf zu unterscheiden, wo dunkle Themes leben.

Die Schwellen und was großer Text in Zahlen bedeutet

Erfolgskriterium 1.4.3 (Kontrast Minimum, Stufe AA) verlangt 4,5:1 für Text und Textbilder, abgesenkt auf 3:1 für großen Text. Kriterium 1.4.6 (Kontrast erhöht, Stufe AAA) hebt diese Werte auf 7:1 und 4,5:1. Kriterium 1.4.11 (Nicht-Text-Kontrast, Stufe AA) verlangt 3:1 für Bedienelemente und grafische Objekte, die zum Verständnis nötig sind — Formularränder, Fokusindikatoren, Icon-Glyphen, Diagrammsegmente.

Groß wird in Punkt definiert, nicht in Pixeln: mindestens 18 Punkt oder mindestens 14 Punkt fett. Umgerechnet mit der CSS-Referenz 1 pt = 4/3 px ergibt das 24 px und 18,67 px fett. Das sind die Zahlen, die man im Stylesheet prüfen muss. Eine 20-px-Überschrift ist nach dieser Definition kein großer Text und braucht weiterhin 4,5:1 — was sehr viele Entwürfe erwischt, die Überschriften für ausgenommen hielten.

Zwei Ausnahmen sollte man kennen, weil sie häufig falsch gelesen werden. Text, der Teil eines inaktiven Bedienelements ist, reine Dekoration oder für alle unsichtbar ist, hat keine Kontrastanforderung. Und Logotypen — Text als Teil eines Logos oder Markennamens — sind ebenfalls ausgenommen. Keine dieser Ausnahmen deckt einen kontrastarmen Platzhalter in einem Formularfeld oder eine ausgegraute Beschriftung ab, die Nutzende trotzdem lesen sollen.

Wo APCA und WCAG 3 einzuordnen sind

Das obige Grau-Blau-Ergebnis ist kein Implementierungsfehler, sondern eine Grenze des Modells. Ein Leuchtdichteverhältnis weiß nichts über Farbton, Sättigung, Schriftstärke, Strichbreite oder darüber, welche Farbe oben liegt — lauter Dinge, die die Lesbarkeit messbar beeinflussen. Eine dünne Schrift mit Stärke 400 bei 4,5:1 kann schwerer zu lesen sein als eine fette bei 4:1, und die Formel kann das nicht ausdrücken.

APCA, der Accessible Perceptual Contrast Algorithm, ist die Antwort darauf. Er modelliert die wahrgenommene Helligkeit statt der physikalischen Leuchtdichte, berücksichtigt bewusst die Polarität — Dunkel auf Hell und Hell auf Dunkel ergeben für dasselbe Paar unterschiedliche Werte — und liefert einen vorzeichenbehafteten Wert auf einer Skala von etwa minus 108 bis plus 106 statt eines Verhältnisses, wobei das Ziel gemeinsam von Schriftgröße und Schriftstärke abhängt.

Dein Status muss genau benannt werden. WCAG 3 ist ein W3C Working Draft — ein frühes, ausdrücklich instabiles Dokument, vor dessen Verwendung als Implementierungsgrundlage das W3C selbst warnt. APCA erscheint dort als Kandidatenmethode, nicht als verabschiedete Anforderung. Nirgends wird heute rechtlich oder vertraglich gegen APCA geprüft. WCAG 2.2 ist die aktuelle W3C-Empfehlung und das, worauf sich Barrierefreiheitsrichtlinien, Vergabeverfahren und Rechtsstreitigkeiten tatsächlich beziehen. Nutze APCA als Zweitmeinung, wenn Verhältnis und Augen uneins sind; liefere gegen die 2.x-Zahlen aus.

Häufige Fragen

Warum besteht reines Blau auf Weiß, während mittleres Grau durchfällt?

Weil die Formel Grün mit 0,7152 und Blau mit nur 0,0722 gewichtet. Reines Blau enthält weder Rot noch Grün, seine relative Leuchtdichte beträgt daher 0,072200 — nach dem Modell sehr dunkel, obwohl es kräftig wirkt. Mittleres Grau #808080 hat gleiche Anteile aller drei Kanäle, und nach der Linearisierung liegt seine Leuchtdichte bei 0,215861, dreimal so hoch. Gegen Weiß ergibt das 8,59:1 für Blau und 3,95:1 für Grau: Blau übersteht AA und AAA, Grau fällt beim AA-Fließtext durch. Nichts ist schiefgegangen: Relative Leuchtdichte misst Lichtabgabe, nicht wie farbig oder dunkel etwas aussieht. Die praktische Lehre lautet, mit dem Raten aufzuhören. Gesättigte Blau-, Violett- und Dunkelrottöne schneiden regelmäßig besser ab, als ihr Erscheinungsbild vermuten lässt, Gelb-, Cyan- und Hellgrüntöne regelmäßig weit schlechter. Bei einer stark farbigen Markenpalette solltest du jedes Paar messen statt es zu schätzen: Die Intuition dafür, was dunkel ist, ist auf wahrgenommene Helligkeit trainiert, die Formel nicht.

Ändert sich das Verhältnis, wenn ich Vordergrund- und Hintergrundfarbe tausche?

Nein. Die WCAG 2.x definiert L1 als relative Leuchtdichte der helleren und L2 als die der dunkleren Farbe. Die Reihenfolge bestimmen also die Leuchtdichten selbst, nicht die Frage, mit welcher du den Text gesetzt hast. Schwarzer Text auf Weiß und weißer Text auf Schwarz ergeben beide 21:1. Blauer Text #0000ff auf Weiß und weißer Text auf Blau ergeben beide 8,59:1. Diese Symmetrie ist eine echte Eigenschaft des 2.x-Modells und zugleich eine echte Grenze, denn Polarität beeinflusst die Lesbarkeit sehr wohl: Heller Text auf dunklem Grund wirkt dünner und kann auf manchen Displays überstrahlen — ein Effekt, den das Verhältnis nicht abbilden kann. APCA, der Kandidatenalgorithmus im WCAG-3-Entwurf, bricht diese Symmetrie absichtlich und meldet je nach Reihenfolge andere Werte. Unter WCAG 2.x hat ein Kontrastprüfer, der beim Tauschen der Felder eine andere Antwort liefert, dagegen einen Fehler.

Welches ist das hellste Grau, das ich für Fließtext auf Weiß verwenden kann?

#767676. Fährt man die neutrale Rampe gegen #ffffff ab, liefert dieser Wert 4,5422:1 und übersteht die AA-Schwelle von 4,5:1. Die nächste Stufe, #777777, liefert 4,4781:1 und fällt durch. Zwischen beiden liegt kein Grau — es sind benachbarte 8-Bit-Werte — also ist #767676 exakt die Grenze. Zwei praktische Folgen. Erstens: Verwendet dein Designsystem ein Token wie grey-500 für Sekundärtext, prüfe dessen tatsächlichen Hex-Wert. Sehr viele Systeme landen zwischen 0x77 und 0x99 und sind für Fließtext nicht konform, obwohl sie völlig bewusst gewählt wirken. Zweitens: Für AAA liegt die entsprechende Grenze bei #595959, was exakt 7,00:1 ergibt. Beide Zahlen setzen reinweißen Hintergrund voraus; auf einer gebrochen weißen Fläche wie #fafafa verschiebt sich die ganze Skala und du musst neu rechnen. Genau dafür ist der Kontrastprüfer da: Die Grenze wandert mit dem Hintergrund, und auswendig gelernte Werte stimmen nicht mehr, sobald der Hintergrund wechselt.

Brauchen Icons, Formularränder und Fokusringe ebenfalls 4,5:1?

Nein — sie fallen unter Erfolgskriterium 1.4.11, Nicht-Text-Kontrast, das auf Stufe AA 3:1 verlangt. Es gilt für zwei Dinge: die visuelle Information, die zum Erkennen eines Bedienelements und seines Zustands nötig ist, und grafische Objekte, die zum Verständnis des Inhalts erforderlich sind. Der Rand, der zeigt, wo ein Textfeld beginnt, braucht also 3:1 gegen seine Umgebung, ebenso ein Fokusindikator, eine angehakte Checkbox, ein Schalter im Ein-Zustand und die verschiedenfarbigen Segmente eines Diagramms, die der Leser unterscheiden muss. Nicht abgedeckt sind Dekoration, der inaktive Zustand eines Bedienelements und Grafiken, bei denen eine bestimmte Darstellung wesentlich ist — ein Foto, eine Flagge, ein Screenshot eines anderen Produkts. Beachte: Verglichen wird mit den angrenzenden Farben, bei einem Fokusring also mit dem Untergrund, auf dem er liegt, und bei einem Icon auf einem farbigen Button mit der Buttonfüllung, nicht mit der Seite. Dieses eine Kriterium deckt in modernen Komponentenbibliotheken mehr echte Mängel auf als die Textregeln, denn Eingabefelder mit 1 px hellgrauem Rand sind nahezu universell.

Ersetzt APCA die 4,5:1-Regel, und sollte ich jetzt wechseln?

Noch nicht, und womöglich nicht in dieser Form. WCAG 3 ist ein W3C Working Draft — ein Status, der ausdrücklich instabil und als Implementierungsgrundlage ungeeignet bedeutet; der Text selbst warnt davor, ihn als etwas Feststehendes zu zitieren. APCA erscheint dort als Kandidatenmethode in Prüfung, samt offener Fragen zu Schwellenwerten und dazu, wie Konformität überhaupt bewertet würde. WCAG 2.2 ist derweil eine W3C-Empfehlung, und auf WCAG 2.x verweisen weltweit Barrierefreiheitsgesetze, Vergabevorschriften und Rechtsbeschwerden. Gegen APCA wird heute nichts geprüft. Die vernünftige Haltung: weiter 2.x einhalten — 4,5:1, 3:1, 7:1, berechnet wie oben — und APCA als Diagnose einsetzen, wenn Verhältnis und Augen uneins sind, was vor allem bei gesättigten Farbtönen und dünner Schrift auf dunklem Grund vorkommt. Sagt APCA, ein Paar sei schlechter als das Verhältnis nahelegt, lohnt sich Handeln; sagt es, es sei besser, darfst du trotzdem nicht unter 4,5:1 ausliefern und AA behaupten.

Wie berechne ich das Verhältnis für eine bestimmte Farbe von Hand?

Nimm #1a73e8 auf Weiß als durchgerechnetes Beispiel. Zerlege den Hex-Wert in Kanäle: 26, 115, 232. Teile jeden durch 255: 0,101961, 0,450980, 0,909804. Alle drei liegen über 0,03928, nutzen also den Potenzzweig: ((c + 0,055) ÷ 1,055) hoch 2,4, was 0,010330, 0,171441 und 0,806952 ergibt. Wende die Gewichte an: 0,2126 × 0,010330 = 0,002196, 0,7152 × 0,171441 = 0,122615, 0,0722 × 0,806952 = 0,058262. Summiert ergibt das L = 0,183073. Weiß ist 1,000000 und die hellere Farbe, das Verhältnis lautet also (1 + 0,05) ÷ (0,183073 + 0,05) = 1,05 ÷ 0,233073 = 4,51:1. Das besteht AA für Fließtext um sechs Hundertstel — bemerkenswert, denn eine Farbe so nah an der Linie fällt durch, sobald jemand sie leicht aufhellt. Behandle 4,5 bis 4,6 daher als Warnband, nicht als Bestanden. Das ganze Verfahren sind zwölf Zeilen Code in jeder Sprache, weshalb alle Kontrastprüfer bis zur zweiten Nachkommastelle übereinstimmen — die einzige echte Quelle von Abweichungen zwischen Werkzeugen ist die Rundung.