Kontrastverhältnis berechnen: WCAG-Formel, Tabelle und Beispiel
Das Kontrastverhältnis gibt an, wie deutlich sich eine Textfarbe von ihrem Hintergrund abhebt, als Zahl zwischen 1:1 (identische Farben) und 21:1 (reines Schwarz auf reinem Weiß). Die WCAG 2.1 legt dafür Mindestwerte fest: 4,5:1 für normalen Text auf der Stufe AA, der Wert, an dem sich die meisten Audits und gesetzlichen Vorgaben orientieren. Wer diese Zahl nur aus einem Lighthouse-Report oder einem Browser-Plugin kennt, fragt sich schnell, woher sie eigentlich kommt und warum ein scheinbar gut lesbares Grau trotzdem durchfällt.
Die Formel
Das Verhältnis basiert auf der relativen Leuchtdichte beider Farben, nicht darauf, wie eine Farbe auf dem Bildschirm wirkt. Vier Schritte führen von einem Hex-Code zu dieser Leuchtdichte.
- Hex-Code in R, G, B zerlegen und jeden Kanal durch 255 teilen, sodass alle drei Werte zwischen 0 und 1 liegen.
- Jeden Kanal linearisieren. Bildschirme setzen Farbwerte nicht linear in Helligkeit um, deshalb wird jeder Kanal per Gammakorrektur angepasst: Liegt der Wert bei 0,03928 oder darunter, wird er durch 12,92 geteilt, sonst gilt
((Wert + 0,055) / 1,055) ^ 2,4. - Kanäle gewichten und summieren zur relativen Leuchtdichte:
L = 0,2126 × R + 0,7152 × G + 0,0722 × B. Grün erhält das größte Gewicht, weil das menschliche Auge dafür am empfindlichsten ist, Blau das kleinste. - Hellere durch dunklere Leuchtdichte teilen, beide zuvor plus 0,05:
(L_hell + 0,05) / (L_dunkel + 0,05).
Dieses Plus 0,05 ist kein Zufall. Es verhindert, dass das Verhältnis gegen unendlich schießt, sobald eine der beiden Farben nahe an Schwarz liegt, und es ist der Grund, warum reines Schwarz auf reinem Weiß exakt bei 21:1 landet statt bei einer beliebig großen Zahl. Ohne diese Konstante würde eine Leuchtdichte von praktisch 0 im Nenner zu einem Verhältnis führen, das theoretisch beliebig groß werden könnte, je nachdem, wie viele Nachkommastellen man noch mitführt. Die Formel wurde bewusst so gebaut, dass am Ende eine feste, nachvollziehbare Obergrenze steht.
Rechenbeispiel: #767676 auf Weiß
Dieses Grau-auf-Weiß-Paar taucht in der WCAG-Dokumentation immer wieder auf, weil es fast genau auf einer Schwelle liegt. Das macht es zu einem guten Beispiel, um die Formel einmal von Hand durchzugehen.
Schritt 1. #767676 entspricht in RGB den Werten 118, 118, 118. Geteilt durch 255 ergibt das für jeden Kanal 0,4627.
Schritt 2. 0,4627 liegt über 0,03928, also kommt die Gammaformel zum Einsatz: ((0,4627 + 0,055) / 1,055) ^ 2,4 = 0,1810. Da alle drei Kanäle identisch sind, gilt dieser Wert gleichermaßen für R, G und B.
Schritt 3. Leuchtdichte: L = 0,2126 × 0,1810 + 0,7152 × 0,1810 + 0,0722 × 0,1810 = 0,1810. Weiß hat eine Leuchtdichte von 1,0, jeder Kanal linearisiert dort auf exakt 1.
Schritt 4. Verhältnis: (1,0 + 0,05) / (0,1810 + 0,05) = 1,05 / 0,2310 = 4,545, gerundet 4,54:1.
Das liegt knapp über der 4,5:1-Grenze für normalen Text auf Stufe AA und auch knapp über der 4,5:1-Grenze für großen Text auf Stufe AAA, aber deutlich unter den 7:1, die AAA für normalen Text fordert. Ein einziger Hex-Wert, drei unterschiedliche Urteile, je nachdem, wie groß der Text ist und welche Stufe gefordert wird.
Wie gängige Farbpaare tatsächlich abschneiden
| Paar | Verhältnis | AA normal (4,5:1) | AAA normal (7:1) | AA groß (3:1) | AAA groß (4,5:1) |
|---|---|---|---|---|---|
#AAAAAA auf #FFFFFF | 2,32:1 | Nicht bestanden | Nicht bestanden | Nicht bestanden | Nicht bestanden |
#767676 auf #FFFFFF | 4,54:1 | Bestanden | Nicht bestanden | Bestanden | Bestanden |
#2563EB auf #FFFFFF | 5,17:1 | Bestanden | Nicht bestanden | Bestanden | Bestanden |
#333333 auf #FFFFFF | 12,63:1 | Bestanden | Bestanden | Bestanden | Bestanden |
Zwei Dinge fallen auf. Erstens schafft ein mittelsattes Blau wie #2563EB, eine beliebte Farbe für Buttons und Links, zwar AA für Fließtext, scheitert aber komplett an AAA. Wer AAA für Links anstrebt, braucht einen deutlich dunkleren Ton, etwa in Richtung von #333333 in der letzten Zeile. Zweitens scheitert das beliebte hellgraue #AAAAAA an jeder einzelnen Schwelle, sogar an den 3:1 für großen Text. Genau deshalb landet “dezenter” grauer Text auf weißem Hintergrund so häufig auf der Fehlerliste eines Accessibility-Audits, meist als eine der ersten Zeilen im Bericht, weil Designsysteme dieses Grau gern als Platzhalter- oder Hilfstext verwenden, ohne es je gegen die WCAG-Formel geprüft zu haben.
Teste deine eigenen Farben
Gib unten zwei Hex-Werte ein und sieh sofort das genaue Verhältnis sowie, welche WCAG-Stufen sie bestehen, live, ohne Upload und ohne Umweg über einen Server.
Zwölf Boxkämpfer jagen Viktor quer über den großen Sylter Deich
Zwölf Boxkämpfer jagen Viktor quer über den großen Sylter Deich
Häufige Fehler
Vergessen, dass großer Text eine niedrigere Schwelle hat. Die WCAG definiert “großen Text” als mindestens 18pt (24px) in regulärer Stärke oder 14pt (18,66px) fett und größer. Eine 24px-Überschrift braucht nur 3:1, nicht 4,5:1. Ein Designsystem, das für jede Textgröße denselben Grenzwert ansetzt, wirft deshalb Überschriften raus, die längst konform sind.
Textkontrast prüfen, aber Kontrast bei UI-Elementen vergessen. WCAG 1.4.11 setzt eine eigene 3:1-Mindestgrenze für Elemente ohne Text, etwa Button-Rahmen, Umrandungen von Formularfeldern oder Icons, die allein eine Bedeutung tragen. Ein Button mit perfektem 7:1-Textkontrast kann trotzdem durch ein Audit fallen, wenn sein Rahmen mit dem Hintergrund verschmilzt.
Kontrast am falschen Punkt des Hintergrunds messen. Text auf einem Foto, einem Verlauf oder einer teiltransparenten Überlagerung hat keinen einzelnen Hintergrundton, sondern viele. Das Verhältnis gilt nur für den konkreten Punkt, an dem gemessen wurde. Bei einem Verlauf, der oben hell und unten dunkel ist, muss der ungünstigste Punkt geprüft werden, nicht ein Durchschnittswert.
Annehmen, Markenfarben seien von der Regel ausgenommen. Ein Logo-Schriftzug ist von den Kontrastanforderungen befreit, Fließtext und UI-Text in einer Markenfarbe sind es nicht. Viele Marken-Blau- und Marken-Rottöne, die als Logo-Akzent gut funktionieren, scheitern an den 4,5:1, sobald sie als 16px-Fließtext auf Weiß eingesetzt werden. Ein Styleguide, der eine Markenfarbe für Überschriften freigibt, aber nicht für Fließtext, hat diesen Unterschied meist schon einkalkuliert, genau deshalb lohnt sich ein Blick ins Styleguide-Kleingedruckte, bevor man eine Akzentfarbe eigenmächtig auf Absatztext anwendet.
Häufig gestellte Fragen
Was ist der Unterschied zwischen AA und AAA? AA ist die Stufe, auf die sich die meisten gesetzlichen Vorgaben beziehen (ADA in den USA, EN 301 549 in der EU), und das, wogegen die meisten Audits prüfen. AAA ist strenger und vor allem für Inhalte gedacht, die sich gezielt an Menschen mit stark eingeschränktem Sehvermögen richten. Die WCAG selbst weist darauf hin, dass AAA nicht für jeden Inhaltstyp erreichbar ist, weshalb die meisten Organisationen durchgängig AA anstreben statt überall AAA.
Berücksichtigt das Kontrastverhältnis Farbenblindheit? Nein. Das Kontrastverhältnis misst Leuchtdichte, also Helligkeit, nicht Farbton. Dadurch hilft es zwar vielen Formen von Farbenblindheit indirekt, weil es nicht davon abhängt, bestimmte Farben voneinander zu unterscheiden, ersetzt eine Prüfung auf Farbenblindheit aber nicht. Zwei Farben können ein exzellentes Kontrastverhältnis haben und trotzdem für jemanden mit Rot-Grün-Sehschwäche schwer unterscheidbar sein, wenn sie sich vor allem im Farbton und kaum in der Helligkeit unterscheiden. Ein typisches Beispiel sind ein gesättigtes Rot und ein gesättigtes Grün mit ähnlicher Helligkeit: Die WCAG-Formel kann beiden ein gutes Verhältnis bescheinigen, während jemand mit Rot-Grün-Schwäche die beiden Flächen kaum unterscheiden kann. Wer Status allein über Farbe kodiert (rot gleich Fehler, grün gleich Erfolg), sollte deshalb zusätzlich ein Icon oder einen Text einsetzen.
Warum ist reines Schwarz auf Weiß genau 21:1 und keine rundere Zahl?
Die Leuchtdichte von Schwarz ist 0, die von Weiß 1. Eingesetzt in die Formel ergibt das (1 + 0,05) / (0 + 0,05) = 1,05 / 0,05 = 21. Es ist exakt 21:1 wegen der gewählten Konstante 0,05, kein Zufall und keine gerundete Größe.
Braucht ein Dark-Mode-Theme eine eigene Kontrastprüfung? Ja. Ein heller Hintergrund gegen einen dunklen zu tauschen, erhält das Verhältnis nicht automatisch. Weißer Text auf dem eigenen Markenblau und derselbe blaue Text auf fast Schwarz sind zwei unterschiedliche Leuchtdichte-Paare mit zwei unterschiedlichen Verhältnissen. Jedes Theme braucht deshalb einen eigenen Durchgang durch den Checker, statt sich auf das Ergebnis des hellen Modus zu verlassen.