Ratgeber

Farbkontrast nach WCAG prüfen: 4,5:1 erklärt

Veröffentlicht am 21. Oktober 2026

Normaler Text in Ihrem Shop braucht nach WCAG 2.2 ein Kontrastverhältnis von mindestens 4,5:1 zu seinem Hintergrund, große Schrift ab 18 Punkt oder ab 14 Punkt fett mindestens 3:1. Für Bedienelemente und Grafiken ohne Text, etwa Rahmen von Eingabefeldern, selbst gestaltete Fokusrahmen und Symbole, gilt 3:1 gegenüber den angrenzenden Farben; Logos und inaktive Elemente sind ausgenommen.

Wie die WCAG insgesamt aufgebaut sind und welche Fassung rechtlich zählt, erklärt WCAG 2.2 für Onlineshops verständlich erklärt. Hier geht es nur um Farbe: welche Werte gelten, wie das Kontrastverhältnis berechnet wird, was ausgenommen ist und wie Sie die typischen Stellen eines Shops in einer Viertelstunde durchgehen.

Die Grenzwerte auf einen Blick

Auslegung: Für Ihren Shop zählt Stufe AA, also die ersten drei Zeilen; warum, erklärt der Pillar-Artikel zu WCAG 2.2. 1.4.6 ist ein AAA-Kriterium; es steht hier nur, damit Sie die Zahl 7:1 einordnen können, wenn ein Werkzeug sie anzeigt.

Rechtlich steckt der Kontrast in der Verordnung zum BFSG: Webseiten müssen auf konsistente und angemessene Weise „wahrnehmbar, bedienbar, verständlich und robust“ gestaltet werden (§ 12 Nr. 3 BFSGV). Eine Zahl wie 4,5:1 steht dort nicht. Auslegung: Die Zahl kommt aus den WCAG, an denen sich Prüfungen nach dem BFSG orientieren; wie das zusammenhängt, steht im oben verlinkten Pillar-Artikel.

Was als große Schrift zählt

Die WCAG definieren große Schrift als Text „with at least 18 point or 14 point bold“ (Definition large scale). Im Browser rechnen Sie in Pixeln: Laut Understanding 1.4.3 gilt 1 pt = 1,333 px, damit entsprechen 14 pt und 18 pt etwa 18,5 px und 24 px.

Die Tabelle wendet die W3C-Umrechnung auf Beispielgrößen an. Maßgeblich ist die Größe, die der Browser tatsächlich anzeigt, nicht die Angabe im Designprogramm: Die Schriftgröße soll laut Understanding 1.4.3 vom Browser abgelesen oder so berechnet werden, wie der Browser es tut. Sehr dünne Schriften sind trotz bestandener Zahl oft schwer lesbar; das W3C empfiehlt in diesem Fall eine kräftigere Schrift oder mehr Kontrast als verlangt.

So wird das Kontrastverhältnis berechnet

Sie müssen nicht selbst rechnen, das machen die Werkzeuge weiter unten. Wenn Sie verstehen, was die Zahl bedeutet, können Sie Ergebnisse aber besser einordnen.

Das W3C definiert das Kontrastverhältnis als „(L1 + 0.05) / (L2 + 0.05)“. L1 ist die relative Leuchtdichte der helleren Farbe, L2 die der dunkleren. Das Ergebnis liegt zwischen 1:1 (gleiche Farben) und 21:1 (Schwarz auf Weiß).

Die relative Leuchtdichte berechnen Sie in drei Schritten aus dem Farbwert:

1. Jeden Farbkanal durch 255 teilen. Aus Rot, Grün und Blau mit Werten von 0 bis 255 werden Werte von 0 bis 1.
2. Jeden Wert umrechnen. Ist er höchstens 0,04045, teilen Sie ihn durch 12,92. Sonst rechnen Sie ((Wert + 0,055) / 1,055) hoch 2,4.
3. Gewichtet addieren: L = 0,2126 × Rot + 0,7152 × Grün + 0,0722 × Blau. Grün zählt am stärksten, Blau am wenigsten.

Beispiel: weißer Text auf einem roten Sale-Badge

Das folgende Beispiel haben wir selbst nach der W3C-Formel gerechnet. Die Farben sind frei gewählt und stammen aus keinem bestimmten Shop. Zwischenwerte sind auf fünf Stellen gerundet.

Ein Rabatt-Label zeigt „20 % Rabatt“ in Weiß (#FFFFFF) auf Rot (#F44336), Schriftgröße 14 px fett.

Die relative Leuchtdichte des Rots ist die Summe: 0,19233 + 0,04014 + 0,00266 = 0,23514. Weiß hat die Leuchtdichte 1.

Kontrastverhältnis = (1 + 0,05) / (0,23514 + 0,05) = 1,05 / 0,28514 = 3,68:1.

Ergebnis: 14 px fett ist keine große Schrift, verlangt sind also 4,5:1. Das Badge fällt durch. Mit einem dunkleren Rot (#D32F2F) ergibt dieselbe Rechnung eine Leuchtdichte von 0,16087 und ein Verhältnis von 1,05 / 0,21087 = 4,98:1; das Badge besteht. Alternativ reicht 3,68:1, wenn Sie die Schrift auf mindestens 14 pt fett vergrößern, also etwa 19 px fett.

Nicht aufrunden

Laut Understanding 1.4.3 sind 4,5:1 und 3:1 harte Schwellen; das W3C schreibt: „4.499:1 would not meet the 4.5:1 threshold“. Ein weiteres Beispiel aus unserer Rechnung: Grau #777777 auf Weiß ergibt 4,478:1 und fällt durch, das kaum sichtbar dunklere #767676 ergibt 4,542:1 und besteht. Zeigt ein Werkzeug gerundet „4,5“ oder „4,50“ an, lassen Sie sich den genauen Wert anzeigen oder rechnen Sie mit den Farbwerten nach.

Was ausgenommen ist und was nicht

Kriterium 1.4.3 nennt drei Ausnahmen, wörtlich (WCAG 2.2, 1.4.3):

• Large Text: „Large-scale text and images of large-scale text have a contrast ratio of at least 3:1“
• Incidental: „Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.“
• Logotypes: „Text that is part of a logo or brand name has no contrast requirement.“

Was das für Ihren Shop heißt:

• Ihr Logo braucht keinen Mindestkontrast. Ihre Markenfarben im übrigen Shop aber schon: Laut Understanding 1.4.3 ist Text mit zu wenig Kontrast wegen Corporate Identity oder Markenrichtlinien nicht ausgenommen. Zeigen Sie Herstellerlogos absichtlich blass an, bis jemand mit der Maus darüberfährt, ist auch das laut W3C nicht ausgenommen.
• Inaktive Elemente sind ausgenommen. Das W3C beschreibt sie als sichtbar, aber gerade nicht bedienbar, zum Beispiel einen Absende-Knopf, der erst nach dem Ausfüllen aller Pflichtfelder funktioniert. Auslegung: Eine ausgegraute Variante (Größe ausverkauft), die sich nicht anklicken lässt, ist inaktiv. Lässt sie sich anklicken, etwa um eine Benachrichtigung bei Wiederverfügbarkeit zu bestellen, ist sie bedienbar, und ihr Text braucht 4,5:1.
• Text auf Produktfotos, etwa die Aufschrift einer Verpackung, gehört zu einem Bild mit „significant other visual content“ und ist ausgenommen; das W3C nennt als Beispiel ein Straßenschild auf einem Foto. Auslegung: Ein Werbebanner, auf dessen Foto Sie selbst Text gesetzt haben („Sommer-Sale“), soll diesen Text vermitteln und fällt nicht unter die Ausnahme; das W3C führt Text über Hintergrundbildern mit zu wenig Kontrast als eigenen Fehler (F83).
• Platzhalter in Formularfeldern sind nicht ausgenommen. Das W3C schreibt ausdrücklich, das Kriterium gilt für Text auf der Seite „including placeholder text“ und für Text, der beim Überfahren mit der Maus oder bei Fokus erscheint (Understanding 1.4.3).

Nicht-Text-Kontrast: Rahmen, Fokus, Symbole

Kriterium 1.4.11 verlangt 3:1 für „Visual information required to identify user interface components and states“ und für „Parts of graphics required to understand the content“ (WCAG 2.2, 1.4.11). Gemessen wird gegen die angrenzende Farbe, nicht gegen den Text. Laut Understanding 1.4.11 gilt:

• Ein Button mit gut lesbarem Text braucht keinen Rahmen. Der Text zeigt schon, dass dort ein Bedienelement ist. Ein Rahmen ist nur nötig, wenn sonst nichts das Element erkennbar macht.
• Ein Eingabefeld, das nur durch seinen Rahmen als Feld erkennbar ist, braucht einen Rahmen mit 3:1 zur Fläche außen herum. Das W3C nennt als bestandenes Beispiel einen grauen Rahmen #767676 auf weißem Hintergrund.
• Die Fokusanzeige braucht 3:1 zur angrenzenden Farbe, außer der Browser zeichnet sie unverändert selbst. Wer den Standard-Fokusrahmen per CSS ersetzt, muss also auf 3:1 achten.
• Hover-Effekte müssen selbst keine 3:1 erreichen, dürfen aber nicht dazu führen, dass das Element den Kontrast zu den angrenzenden Farben verliert.
• Zustände wie der Haken in einer Checkbox brauchen 3:1. Eine Sternebewertung mit hellgelben Sternen auf Weiß führt das W3C als Fehlerbeispiel.
• Inaktive Elemente sind auch hier ausgenommen.

Ob die Fokusanzeige überhaupt erscheint und überall sichtbar bleibt, prüfen Sie mit dem Tastaturtest in 10 Minuten.

Prüftabelle für Ihren Shop

Gehen Sie Startseite, eine Kategorieseite, eine Produktseite, Warenkorb, Checkout und Login durch. Die Spalten „Kriterium“ und „Mindestens“ folgen den W3C-Texten oben; die typischen Fallen sind Beispiele dafür, wo Sie zuerst hinschauen, und keine Aussage des W3C.

Zur Zeile „Text auf Banner“: Das W3C beschreibt für Hintergrundbilder einen Schnelltest. Liegt dunkle Schrift auf dem Bild, messen Sie gegen die dunkelste Stelle hinter dem Text, bei heller Schrift gegen die hellste. Reicht der Kontrast dort, ist alles in Ordnung; sonst prüfen Sie den Hintergrund hinter jedem Buchstaben (Fehlertechnik F83). Einfacher ist meist eine halbtransparente dunkle Fläche hinter dem Text oder Text außerhalb des Bildes.

Schreiben Sie bei jedem Fund Seite, Element, beide Farbwerte und das gemessene Verhältnis auf. Damit kann Ihre Agentur oder Ihr Theme-Anbieter die Farbe gezielt ändern, und Sie haben eine Grundlage für Ihre Dokumentation. Die gleiche Prüfung gehört in die Kaufstrecke mit Zahlungsarten und Fehlermeldungen, siehe Barrierefreier Checkout: Warenkorb und Kaufstrecke prüfen.

Werkzeuge zum Messen

Messen Sie die Farben, die der Browser anzeigt. Das W3C rät in Understanding 1.4.3, die Farbwerte aus dem Browser oder aus dem Stylesheet zu nehmen, nicht aus der Darstellung auf dem Bildschirm, weil Kantenglättung Schrift blasser erscheinen lässt.

• Chrome-Entwicklertools. Laut Chrome-Dokumentation öffnen Sie die Entwicklertools, wählen das Untersuchen-Werkzeug und fahren über den Text; der Hinweis zeigt das Kontrastverhältnis, bei zu wenig Kontrast mit Warnzeichen. Im Farbwähler der Textfarbe sehen Sie unter „Contrast ratio“, ob AA oder AAA erfüllt ist, und können einen vorgeschlagenen Farbton übernehmen.
• Firefox-Entwicklertools. Der Barrierefreiheits-Inspektor hat laut Firefox-Dokumentation im Menü „Check for issues“ die Option „Contrast“.
• WebAIM Contrast Checker. Auf der Seite von WebAIM geben Sie Vorder- und Hintergrundfarbe als Hex-Wert ein oder nehmen sie mit der Pipette auf; das Ergebnis zeigt bestanden oder nicht bestanden für normalen Text, große Schrift und Grafiken. Mit einem Helligkeitsregler stellen Sie eine Farbe heller oder dunkler, bis sie besteht.
• Colour Contrast Analyser (CCA). Laut Anbieterseite von Vispero ein kostenloses Programm für Windows und macOS mit Pipette für Vorder- und Hintergrund. Praktisch für Text auf Bildern und Bannern, weil Sie jede Stelle des Bildschirms aufnehmen können.

Was ein Online-Tool insgesamt prüft und was nicht, steht in WCAG-Check online: welche Kriterien ein Tool prüft. Text auf Bildern, selbst gestaltete Fokusrahmen und Zustände wie angehakte Checkboxen messen Sie nach der Tabelle oben mit der Pipette selbst nach.

Ihr nächster Schritt

Der kostenlose Scan prüft Ihre Startseite, eine Produktseite und den Warenkorb gegen die WCAG-Regeln und zeigt, was zuerst behoben werden sollte, ohne Konto. Automatische Werkzeuge finden nur einen Teil aller Barrieren; Text auf Bannern, selbst gestaltete Fokusrahmen und ausgegraute Varianten prüfen Sie zusätzlich mit der Prüftabelle oben.

Dieser Ratgeber ist keine Rechtsberatung. Im Zweifel klären Sie Ihren Fall mit der Bundesfachstelle Barrierefreiheit oder einer Anwältin oder einem Anwalt.

Stand: 21.10.2026. Quellen gelesen am 21.10.2026.