Kontrast prüfen: Kontrastrechner nach WCAG 2.2 (AA und AAA)
Kontrastprüfer
Hex-Format, zum Beispiel #2f47d9 oder #fff.
Normaler Text: Legen Sie das Produkt in den Warenkorb und bezahlen Sie in drei Schritten.
Großer Text: 129 €
Rahmen und Symbol der Schaltfläche
Kontrastverhältnis
4.54 : 1
| Anforderung | Minimum | Ergebnis |
|---|---|---|
| Normaler Text, Stufe AAWCAG 1.4.3 | 4.5 : 1 | — |
| Großer Text, Stufe AAWCAG 1.4.3 | 3 : 1 | — |
| Normaler Text, Stufe AAAWCAG 1.4.6 | 7 : 1 | — |
| Großer Text, Stufe AAAWCAG 1.4.6 | 4.5 : 1 | — |
| Symbole, Feldrahmen und andere BedienelementeWCAG 1.4.11 | 3 : 1 | — |
Großer Text bedeutet mindestens 24 px oder 18.66 px fett. Die Prüfung läuft in Ihrem Browser; die Farben werden nirgendwohin gesendet.
Geben Sie eine Textfarbe und eine Hintergrundfarbe ein: Der Rechner zeigt das Kontrastverhältnis nach der Formel der WCAG 2.x, ob es Stufe AA und AAA für normalen und großen Text sowie für Bedienelemente besteht, und die nächstgelegene Textfarbe, die 4,5:1 erreicht.
Was die Ergebnisse bedeuten
| Anforderung | Minimum | WCAG-Kriterium |
|---|---|---|
| Normaler Text, Stufe AA | 4,5 : 1 | 1.4.3 Kontrast (Minimum) |
| Großer Text, Stufe AA | 3 : 1 | 1.4.3 Kontrast (Minimum) |
| Normaler Text, Stufe AAA | 7 : 1 | 1.4.6 Kontrast (erhöht) |
| Großer Text, Stufe AAA | 4,5 : 1 | 1.4.6 Kontrast (erhöht) |
| Icons, Rahmen, Bedienelemente | 3 : 1 | 1.4.11 Nicht-Text-Kontrast |
Stufe AA ist die Stufe, auf die sich EN 301 549, der European Accessibility Act, das BFSG und die US-Praxis zum ADA stützen. AAA ist strenger und wird von diesen Gesetzen nicht verlangt.
Warum Kontrast im Onlineshop wichtig ist
Graue Preise auf Weiß, weißer Text auf einem blassen Banner, helle Platzhalter im Checkout-Formular: Menschen mit Sehschwäche, ältere Kundinnen und Kunden und alle, die ihr Handy in der Sonne nutzen, lesen das langsam oder gar nicht. Geringer Kontrast ist das häufigste Problem, das automatische Prüfungen auf Shop-Websites finden. Beheben Sie es in den Farbeinstellungen Ihres Themes oder in dessen CSS-Variablen, nicht Element für Element.
Wie das Verhältnis berechnet wird
Das Verhältnis vergleicht die relative Leuchtdichte der helleren und der dunkleren Farbe: (L1 + 0.05) / (L2 + 0.05). Es reicht von 1:1 (dieselbe Farbe) bis 21:1 (Schwarz auf Weiß). Transparenz, Schatten und Hintergrundbilder verändern den tatsächlichen Kontrast; prüfen Sie Text auf Bildern mit dem dunkelsten und dem hellsten Bereich des Bildes dahinter.
Die ganze Website prüfen
Dieser Rechner testet ein Farbpaar. Pandus findet jeden Text mit geringem Kontrast auf einer Seite — mit Farben, Verhältnis und Screenshot — und prüft jede Woche jede Seite Ihrer Website. Siehe auch die Regel geringer Textkontrast.