Farbkontrast prüfen nach WCAG 2.2: Stufen AA und AAA

So verwenden Sie es

Tragen Sie die Textfarbe in Textfarbe und die Farbe dahinter in Hintergrundfarbe ein.
Lesen Sie Kontrastverhältnis ab. Die vier Textprüfungen und die Prüfung der Bedienelemente zeigen, welche Stufen das Paar erreicht.
Für Fließtext streben Sie AA, normaler Text an. Großer Text braucht weniger Kontrast, die Größen stehen in den Abschnitten unten.
Schlägt eine Prüfung fehl, beginnen Sie bei Vorgeschlagene Textfarbe und testen das Ergebnis in Ihrem echten Design.

So wird das Verhältnis berechnet

WCAG 2.2 gibt jeder Farbe eine relative Leuchtdichte. Jeder Rot-, Grün- und Blauwert wird zuerst linear gemacht: Ein Wert von höchstens 0,04045 (auf einer Skala von 0 bis 1) wird durch 12,92 geteilt, ein größerer wird nach dem Addieren von 0,055 und dem Teilen durch 1,055 hoch 2,4 genommen. Die drei Ergebnisse werden dann mit 0,2126 für Rot, 0,7152 für Grün und 0,0722 für Blau gewichtet. Das Kontrastverhältnis ist die Leuchtdichte der helleren Farbe plus 0,05, geteilt durch die Leuchtdichte der dunkleren Farbe plus 0,05.

Das Ergebnis reicht von 1, bei zwei gleichen Farben, bis 21, bei Schwarz auf Weiß.

L = 0,2126 × R + 0,7152 × G + 0,0722 × B
Verhältnis = (L1 + 0,05) ÷ (L2 + 0,05)

L1  Leuchtdichte der helleren Farbe
L2  Leuchtdichte der dunkleren Farbe

Die Stufen

WCAG 2.2 legt diese Mindestverhältnisse fest. Stufe und Erfolgskriterium stehen dabei, damit Sie den genauen Wortlaut nachschlagen können.

AA, normaler Text: 4,5:1 (Erfolgskriterium 1.4.3).
AA, großer Text: 3:1, bei Text ab 18 Punkt oder ab 14 Punkt fett (1.4.3).
AAA, normaler Text: 7:1 (Erfolgskriterium 1.4.6).
AAA, großer Text: 4,5:1 (1.4.6).
Schaltflächen, Rahmen und Symbole, die ein Leser braucht, um die Seite zu benutzen: 3:1 (1.4.11).

Was dieser Rechner nicht abdeckt

Text auf Fotos, Bildern und Verläufen: Der Hintergrund wechselt über den Text, prüfen Sie dort die echten Bildpunkte.
Transparente Farben: Geben Sie die Farbe ein, die der Leser auf der Seite tatsächlich sieht.
Hover-, Fokus- und andere Zustände: Prüfen Sie die Farben jedes Zustands ebenfalls.
Ob ein Text für den Leser groß ist: Schriftgröße und Schnitt entscheiden darüber, und die Seite kann sie nicht kennen.

Rechenbeispiel: Grau #777 auf Weiß

Das Grau #777 hat jeden Kanal bei 119 von 255, das ergibt eine relative Leuchtdichte von etwa 0,184. Weiß hat die Leuchtdichte 1, daher ist das Verhältnis (1 + 0,05) ÷ (0,184 + 0,05) = 4,48.

#777 auf Weiß scheitert also knapp an AA für normalen Text, erfüllt AA für großen Text und die Prüfung mit 3:1 für Bedienelemente und scheitert an AAA. Das nächste dunklere Grau, das AA erfüllt, ist #767676 mit einem Verhältnis von 4,54.

Prüfung	Benötigt	#777 auf Weiß
AA, normaler Text	4,5:1	4,48: nicht erfüllt
AA, großer Text	3:1	Erfüllt
AAA, normaler Text	7:1	Nicht erfüllt
AAA, großer Text	4,5:1	Nicht erfüllt
Schaltflächen, Rahmen und Symbole	3:1	Erfüllt

Häufig gestellte Fragen

Welches Kontrastverhältnis braucht Fließtext?

Für WCAG 2.2 Stufe AA braucht normaler Text mindestens 4,5:1 und großer Text 3:1. Stufe AAA verlangt 7:1 für normalen Text und 4,5:1 für großen Text.

Warum zeigt ein Verhältnis von 4,4999 als 4,50 und fällt trotzdem durch?

Die Prüfung nutzt das genaue Verhältnis, nicht die zwei Dezimalstellen auf dem Bildschirm. Ein Verhältnis knapp unter 4,5 wird als 4,50 angezeigt, erreicht aber nicht 4,5:1, daher fällt die Prüfung durch.

Ändert die Reihenfolge der beiden Farben das Verhältnis?

Nein. Das Verhältnis ist gleich, egal welche Farbe der Text und welche der Hintergrund ist, denn die hellere Farbe steht immer im Zähler.

Was ist die vorgeschlagene Farbe?

Es ist die Textfarbe, die Ihrer Farbe in der Helligkeit am nächsten kommt und auf Ihrem Hintergrund 4,5:1 erreicht. Sie behält Farbton und Sättigung und wird dunkler oder heller, je nachdem, welche Änderung kleiner ist.

Kann ich eine Farbe mit Transparenz eingeben?

Hier nicht. Geben Sie die Farbe ein, die ein Besucher tatsächlich sieht, also die transparente Farbe, bereits gemischt mit dem Hintergrund dahinter.

Werden meine Farben an einen Server geschickt?

Nein. Die Berechnung läuft in Ihrem Browser, und was Sie eingeben, wird weder gespeichert noch gesendet.

Heißt ein erreichtes Verhältnis, dass der Text leicht zu lesen ist?

Nicht immer. Das Verhältnis ist das Mindestmaß, das WCAG festlegt. Schriftgröße, Schnitt, Abstände und das Sehvermögen der Leser spielen ebenfalls eine Rolle. Testen Sie das echte Design nach Möglichkeit mit Menschen.

Quellen

Zahlen und Text zuletzt geprüft: Dienstag, 10. November 2026.

Ergebnis