Wie man das Kontrastverhältnis berechnet.

Das Kontrastverhältnis ist das Verhältnis der relativen Leuchtdichten zweier Farben und nimmt Werte zwischen 1:1 (gleiche Farbe) und 21:1 (Schwarz auf Weiß) an.

Der Kontrast ist die Stelle, an der das Augenmaß in der Barrierefreiheit am häufigsten irrt. Dass zwei Farben „unterschiedlich genug“ aussehen, sagt nichts: Weißer Text auf leuchtendem Gelb wirkt lebendig, misst 1,1:1 und lässt sich nicht lesen. Deshalb wird Kontrast nicht geschätzt, sondern berechnet.

Die Formel: relative Leuchtdichte

Die Rechnung hat zwei Schritte. Zuerst wird für jede Farbe die relative Leuchtdichte bestimmt, dann das Verhältnis der beiden gebildet. Die relative Leuchtdichte ist die vom menschlichen Auge wahrgenommene Helligkeit einer Farbe, und die Kanalgewichte sind nicht gleich — Grün trägt weit mehr Gewicht als Rot und Blau.

1. Jeden Kanal in den Bereich 0–1 bringen: den Wert durch 255 teilen.
2. Die Gammakorrektur entfernen: Liegt der Wert unter 0,03928, durch 12,92 teilen; sonst (Wert + 0,055) / 1,055 in die Potenz 2,4 erheben.
3. Gewichtet summieren: 0,2126 × Rot + 0,7152 × Grün + 0,0722 × Blau.
4. Das Verhältnis bilden: (hell + 0,05) / (dunkel + 0,05). Das Ergebnis liegt zwischen 1 und 21.

Dass Grün ein Gewicht von 0,7152 trägt, mag der Intuition widersprechen, spiegelt aber die Dominanz der grünempfindlichen Zapfenzellen des Auges. Die praktische Folge: Für eine Gestaltung, die eine Palette abdunkeln will, ist Grün der wirksamste Kanal — und liegen die Grünwerte zweier Farben nah beieinander, bleibt ihr Kontrast niedrig, wie verschieden Rot und Blau auch sein mögen.

Auch die Konstante 0,05 in der Formel ist kein Zufall: Sie steht für die Annahme, dass Bildschirme nie absolutes Schwarz erzeugen und immer etwas Umgebungsreflexion da ist. Deshalb wird das Verhältnis nie unendlich; seine Decke ist 21:1.

Die Schwellenwerte

WCAG definiert drei getrennte Schwellen, und welche gilt, hängt von der Textgröße und der Art des Inhalts ab.

1. Normaler Text, AA (1.4.3) — 4,5:1.
2. Großer Text, AA (1.4.3) — 3:1. Großer Text: 18,66px fett oder ab 24px normal.
3. Normaler Text, AAA (1.4.6) — 7:1.
4. Großer Text, AAA (1.4.6) — 4,5:1.
5. Bedienelemente und bedeutungstragende Grafik, AA (1.4.11) — 3:1. Gemessen wird nicht der Text, sondern die BEGRENZUNG.
6. Deaktivierte Elemente und reine Dekoration — keine Schwelle, außerhalb des Geltungsbereichs.

Die Ausnahme für großen Text wird oft falsch verwendet. Die Grenze 18,66px fett entspricht 14pt beim Browser-Standard von 16px; bei einer mit clamp skalierten Überschrift ändert sich der Wert mit der Bildschirmbreite und kann auf schmalen Bildschirmen unter die Schwelle fallen. Bei skalierter Typografie ist der sichere Weg deshalb, sich gar nicht auf die Großtext-Ausnahme zu stützen.

Ein gemessenes Beispiel

Damit es konkret bleibt: die eigenen Palettenpaare dieser Website. Die Werte wurden mit obiger Formel berechnet, und die Prüfsuite berechnet sie bei jedem Lauf neu — verrutscht eine Farbe, leuchtet der Test rot.

1. Fließtext / Papiergrund — 18,15:1. Die AAA-Schwelle ist 7:1; das Zweieinhalbfache.
2. Sekundärtext / Papiergrund — 7,07:1. Knapp über der AAA-Schwelle, eine bewusste Wahl.
3. Akzentfarbe / Papiergrund — 10,22:1. Links und Fokusring verwenden diese Farbe.
4. Fließtext / Kartengrund — 16,01:1.
5. Akzent auf dunklem Grund / Tinte — 4,55:1. Knapp über der AA-Schwelle von 4,5:1; das dunkle Band verwendet bewusst einen anderen Ton.
6. Fehlerfarbe / Papiergrund — 6,25:1. Nur im Formularfehler; nie in der Dekoration.

Dass der Sekundärtext 7,07:1 misst, ist bemerkenswert: Der Wert liegt nur ein Prozent über der AAA-Schwelle. Dieses Grau wurde nicht zufällig, sondern durch Rechnung gewählt — ein helleres Grau wäre ästhetisch vielleicht vorzuziehen gewesen, wäre aber unter die Schwelle gefallen. Der Kontrast hat hier als Entwurfsbeschränkung gearbeitet.

Verbreitete Fehler

In der Kontrastrechnung wiederholen sich einige Fehler; jeder macht die Messung ungültig.

Durch Transparenz messen. Eine halbtransparente Textfarbe mischt sich mit dem Grund darunter, und die echte Farbe ist nicht die berechnete. Die Messung muss auf dem ENDGÜLTIGEN Pixelwert beruhen, den der Browser berechnet — deshalb lesen ernsthafte Prüfungen von der Live-Seite, nicht vom Bildschirmfoto.

Den falschen Grund annehmen. Sitzt Text auf einem Bild, einem Verlauf oder einem Videobild, gibt es keine einzelne Grundfarbe. Dann muss der schlechteste Fall gemessen werden, nicht der Durchschnitt — und praktisch ist die richtige Lösung, eine Maskenschicht über den Grund zu legen und ihn zu fixieren.

Hover- und Fokuszustände überspringen. Der Normalzustand eines Links kann 7:1 messen, während sein Hover-Ton auf 3:1 fällt. Jeder Interaktionszustand ist ein eigenes Farbpaar und muss eigens gemessen werden.

Kontrast ist die Eigenschaft eines ZUSTANDS, nicht eines Farbpaars.

Zuletzt: Den Kontrast einmal zu messen und weiterzugehen genügt nicht. Wird die Palettendatei bearbeitet, veraltet die Messung. Die dauerhafte Lösung ist, die Paare an einen Test zu binden — fällt ein Wert unter die Schwelle, leuchtet das Deployment rot, statt an irgendjemandes Auge zu hängen.

Das dunkle Thema ist eine eigene Palette

Ein dunkles Thema ist nicht die Umkehrung der hellen Farben und verlangt beim Kontrast eine völlig eigene Rechnung. Der Grund ist physikalisch: Heller Text auf dunklem Grund wird anders wahrgenommen als dunkler Text auf hellem — dünne Schriften verdicken sich auf dunklem Grund optisch, und rein weißer Text erzeugt Überstrahlung (Halation).

Die praktische Folge: Reines Weiß für den Fließtext im dunklen Thema wirkt verlockend, weil die Rechnung 21:1 liefert, senkt aber den Lesekomfort. Ein leicht gebrochenes Weiß — die Leuchtdichte um wenige Prozent gesenkt — bleibt weit über der Schwelle und ermüdet das Auge nicht.

Auch die Akzentfarbe braucht eigene Behandlung. Ein dunkles Blau, das auf hellem Grund 10:1 misst, fällt auf dunklem auf 1,5:1 und wird unlesbar. Ernsthafte Palettensysteme definieren deshalb für dunkle Gründe einen eigenen Akzentton. Auf dieser Website ist es genau so: Der im dunklen Band verwendete helle Akzentton misst gegen die Tinte 4,55:1 und bleibt über der AA-Schwelle.

Beide Themen müssen getrennt gemessen und getrennt an Tests gebunden werden. Ein Thema zu messen und anzunehmen, „das andere hält auch“, ist der häufigste und am leichtesten zu fangende Fehler.

Wie die Messung automatisiert wird

Das Problem der Handmessung ist, dass sie nicht wiederholbar ist. Ein einmal gemessener Wert veraltet lautlos bei der nächsten Berührung der Palettendatei. Die dauerhafte Lösung ist, die Messung an den Code zu binden, und das hat zwei Schichten.

1. Die Token-Schicht — die Palettenpaare werden aus der Quelldatei gelesen und mit der Formel berechnet. Schnell, braucht keinen Browser, läuft bei jedem Durchgang. Was sie fängt: eine unter die Schwelle gerutschte Farbe.
2. Die Render-Schicht — von der Live-Seite werden echte Pixelwerte gelesen. Langsam, braucht einen Browser. Was sie fängt: Transparenz, überlagerte Schichten, Verläufe und Hover-Zustände — alles, was die Token-Schicht nicht sehen kann.
3. Beide zusammen — die Token-Schicht bei jedem Lauf, weil sie billig ist; die Render-Schicht für die kritischen Bildschirme. Keine ersetzt die andere.

Die Unterscheidung zählt, weil die meisten Teams nur die erste bauen und für die Fehlerklasse der zweiten blind bleiben. Text unter einer transparenten Schicht sieht in der Token-Rechnung makellos aus; auf dem Bildschirm lässt er sich nicht lesen. Auch das Umgekehrte gilt: Ein Team, das nur beim Rendern misst, kann ein kaputtes Paar nicht sehen, das in der Palette steht und noch auf keiner Seite verwendet wird.

Auf dieser Website stehen beide Schichten. Die Token-Schicht berechnet bei jedem Lauf sieben Palettenpaare; die Render-Schicht liest auf den kritischen Bildschirmen echte Pixel. Die Existenz der zweiten Schicht ist kein Zufall — sie kam hinzu, nachdem ein Fehler durch Messung gefangen wurde, und diese Geschichte wird auf der Seite zum Nicht-Text-Kontrast erzählt.

Einmal gemessener Kontrast veraltet bei der nächsten Palettenänderung. Eine nicht an Code gebundene Messung gilt als nicht gemacht.