DE

Kontrast-Checker nach WCAG 2.2

Textfarbe und Hintergrundfarbe eingeben oder wählen: Der Checker berechnet die relative Luminanz beider Farben und das Kontrastverhältnis exakt nach der W3C-Definition und zeigt, welche Erfolgskriterien der WCAG 2.2 erfüllt sind. Reicht der Kontrast nicht, schlägt er die nächste passende Textfarbe vor.

HEX, rgb(), hsl() … – auch mit Transparenz
Deine Eingaben werden nur in diesem Browser gespeichert.

Vorschau

Normaler Text: So liest sich ein Absatz mit 16 Pixeln Schriftgröße.

Großer Text ab 24 px

Fetter Text ab 18,67 px

Schaltfläche

Vorschau mit Ihren Farben: 16 px normal, 24 px normal und 18,67 px fett (= 14 pt fett, großer Text), darunter Rahmen und Symbol als UI-Beispiel.

Ergebnis

Kontrastverhältnis
4,48 : 1
Bewertung nach WCAG 2.2
KriteriumMindestensErgebnis
Normaler Text – AA (SC 1.4.3)4,5 : 1✗ nicht erfüllt
Normaler Text – AAA (SC 1.4.6)7 : 1✗ nicht erfüllt
Großer Text – AA (SC 1.4.3)3 : 1✓ erfüllt
Großer Text – AAA (SC 1.4.6)4,5 : 1✗ nicht erfüllt
UI-Komponenten und Grafiken – AA (SC 1.4.11)3 : 1✓ erfüllt
Nächste Textfarbe für AA (4,5 : 1)
#767676 (4,54 : 1)
Nächste Textfarbe für AAA (7 : 1)
#595959 (7,00 : 1)
Relative Luminanz Textfarbe
0,1845 (#777777)
Relative Luminanz Hintergrund
1,0000 (#FFFFFF)

So wird gerechnet

So wird der Kontrast berechnet

Die WCAG 2.2 definieren das Kontrastverhältnis als (L1 + 0,05) ÷ (L2 + 0,05). L1 ist die relative Luminanz der helleren, L2 die der dunkleren Farbe. Das Ergebnis liegt zwischen 1 : 1 (gleiche Farben) und 21 : 1 (Schwarz auf Weiß).

Die relative Luminanz berechnet der Checker exakt nach der W3C-Definition: Jeder sRGB-Kanal wird durch 255 geteilt und linearisiert – Werte bis 0,04045 durch 12,92, darüber ((Wert + 0,055) ÷ 1,055)2,4. Dann gilt L = 0,2126 × R + 0,7152 × G + 0,0722 × B.

Beispiel #777777 auf Weiß: 0x77 = 119, 119 ÷ 255 = 0,4667 → ((0,4667 + 0,055) ÷ 1,055)2,4 = 0,1845. Da alle drei Kanäle gleich sind, ist L = 0,1845. Weiß hat L = 1. Kontrast = (1 + 0,05) ÷ (0,1845 + 0,05) = 4,48 : 1. Das reicht für großen Text (3 : 1), aber knapp nicht für normalen Text (4,5 : 1). Der Vorschlag #767676 erreicht 4,54 : 1.

Die Anforderungen der WCAG 2.2

ErfolgskriteriumStufeNormaler TextGroßer Text
1.4.3 Kontrast (Minimum)AA4,5 : 13 : 1
1.4.6 Kontrast (erhöht)AAA7 : 14,5 : 1
1.4.11 Nicht-Text-Kontrast (UI-Komponenten, Grafiken)AA3 : 1

Großer Text ist nach WCAG mindestens 18 Punkt groß oder mindestens 14 Punkt fett – im Browser entspricht das etwa 24 px bzw. 18,67 px. Ausgenommen sind unter anderem Logos, rein dekorativer Text und inaktive Bedienelemente.

Nicht runden

Die WCAG vergleichen den exakten Wert: 4,499 : 1 erfüllt 4,5 : 1 nicht. Der Checker bewertet deshalb ungerundet und zeigt zwei Nachkommastellen an; würde die Rundung eine Schwelle scheinbar erreichen, schneidet er ab (4,49 statt 4,50).

Transparente Farben

Farben mit Alpha-Wert (z. B. rgba(0, 0, 0, 0.6) oder #00000099) legt der Checker so übereinander, wie der Browser sie zeichnet: einen transparenten Hintergrund auf Weiß, eine transparente Textfarbe auf den Hintergrund. Liegt Ihre Seite auf einem anderen Untergrund, geben Sie dessen deckende Farbe als Hintergrund ein.

Häufige Fragen

Welcher Kontrast ist für Barrierefreiheit nötig?

Für normalen Text mindestens 4,5 : 1 (WCAG-Stufe AA, SC 1.4.3), für großen Text 3 : 1. Die strengere Stufe AAA verlangt 7 : 1 bzw. 4,5 : 1. Bedienelemente wie Rahmen von Eingabefeldern und Symbole brauchen 3 : 1 (SC 1.4.11).

Welche Grautöne sind auf Weiß noch AA-konform?

#767676 ist der hellste Grauton mit mindestens 4,5 : 1 auf Weiß (4,54 : 1). #777777 liegt mit 4,48 : 1 schon knapp darunter.

Wie findet der Checker die vorgeschlagene Farbe?

Er behält Farbton und Sättigung Ihrer Textfarbe bei und verändert nur die HSL-Helligkeit in kleinen Schritten, heller wie dunkler. Vorgeschlagen wird die kleinste Änderung, deren gerundete Farbe das Ziel sicher erreicht.

Gilt das auch für die Barrierefreiheitsgesetze in Deutschland?

Das Barrierefreiheitsstärkungsgesetz und die BITV 2.0 verweisen über die europäische Norm EN 301 549 auf die WCAG 2.1, Stufe AA. Deren Kontrastkriterien sind mit denen der WCAG 2.2 identisch: Es gelten 4,5 : 1 für Text, 3 : 1 für großen Text und Bedienelemente.

Quellen und Rechtsgrundlagen

Stand:

Passende Werkzeuge