Barrierefreier Farbkontrast: die Anleitung für Online-Shops
Kurz gefasst — die Kontrastwerte, die du erreichen musst
Kontrast misst den Helligkeitsunterschied zwischen einer Vordergrundfarbe (Text, Symbol) und ihrem Hintergrund. Er wird als Verhältnis angegeben, von 1:1 (identisch) bis 21:1 (Schwarz auf Weiß). Um dem Barrierefreiheitsstärkungsgesetz (BFSG) zu genügen (EN 301 549 / WCAG 2.1 Stufe AA), seit dem 28. Juni 2025 für den E-Commerce verbindlich:
- Fließtext: mindestens 4,5:1 zwischen Text und Hintergrund (Kriterium 1.4.3);
- Großer Text: mindestens 3:1 — ab 24 px normal oder 18,66 px (≈14 pt) fett;
- Bedienelemente und bedeutungstragende Symbole: 3:1 — Feldränder, Buttons, informative Symbole, der Fokusindikator (Kriterium 1.4.11);
- Information nie allein über Farbe vermitteln (Kriterium 1.4.1): ein Label, ein Muster oder Text muss jeden Farbcode stützen;
- Logos und rein dekorative Elemente: keine Kontrastanforderung.
Kontrast ist der Verstoß, den automatische Werkzeuge am zuverlässigsten melden — und einer der einfachsten zu beheben, ein einziges Mal, auf der Ebene deiner Markenpalette.
„Unsere Marke ist dieses elegante Hellgrau." Das ist wahrscheinlich der Satz, der im Web die meisten Barrieren erzeugt. Blasser grauer Text auf Weiß, ein zu heller Button in der Markenfarbe, ein Fehler, der nur rot erscheint: Jedes ist eine Hürde für Menschen mit Sehschwäche, Farbfehlsichtigkeit oder für jeden, der bei hellem Sonnenlicht liest. Die gute Nachricht: Kontrast wird auf der Ebene deiner Markenpalette gelöst, ein einziges Mal, und kommt danach dem ganzen Shop zugute.
Was ein Kontrastverhältnis ist, und warum es zählt
Ein Kontrastverhältnis vergleicht die Leuchtdichte (wahrgenommene Helligkeit) zweier Farben. Die Berechnung ist von der WCAG definiert: Sie reicht von 1:1 (kein Kontrast) bis 21:1 (reines Schwarz auf reinem Weiß). Je höher das Verhältnis, desto mehr hebt sich der Text vom Hintergrund ab. Zwei Kriterien setzen die Schwellen für Barrierefreiheit: WCAG 1.4.3 „Kontrast (Minimum)" für Text und WCAG 1.4.11 „Kontrast von Nicht-Text-Inhalten" für Bedienelemente und Grafiken. Beide sind Stufe AA — also gefordert von EN 301 549, der technischen Grundlage hinter dem Barrierefreiheitsstärkungsgesetz, das seit dem 28. Juni 2025 für E-Commerce-Dienstleistungen gilt.
Kontrast ist kein Minderheitenthema: Er verbessert die Lesbarkeit für alle, auf jedem Bildschirm und bei jeder Beleuchtung. Er ist außerdem, neben fehlenden Textalternativen, einer der zwei Verstöße, die automatische Scanner am zuverlässigsten erkennen — was in beide Richtungen wirkt: Er ist leicht aufzuspüren, also das Erste, was ein Prüfer (oder ein Beschwerdeführer) sieht.
Die 6 Regeln für barrierefreien Kontrast
Mindestens 4,5:1 zwischen Text und Hintergrund
Das ist die Grundlinie: Jeder Text in normaler Größe muss ein Verhältnis von mindestens 4,5:1 gegenüber seiner Hintergrundfarbe zeigen. Das gilt für Absätze, Labels, Preise, rechtliche Hinweise und den Fuß. Die häufigste Falle: das „dezente" Hellgrau.
#595959 auf Weiß (≈7:1) oder #767676 auf Weiß (≈4,5:1, das hellste noch zulässige Grau).#999999 auf Weiß (≈2,8:1) oder sehr heller grauer Platzhaltertext: dem Designer angenehm, für einen Teil deiner Kundschaft unlesbar.→ Siehe auch die vollständige BFSG-Checkliste für Online-Shops.
3:1 genügt — aber erst ab einer bestimmten Größe
Die Schwelle sinkt auf 3:1 für „großen Text", genau definiert: mindestens 24 px normale Stärke oder mindestens 18,66 px (≈14 pt), wenn fett. Unterhalb dieser Größen gilt die 4,5:1-Regel, selbst für eine Überschrift. Nimm also nicht an, eine Überschrift entkomme der Anforderung — prüfe ihre tatsächlich gerenderte Größe.
3:1 für alles Nicht-Text, das Bedeutung trägt
Kriterium 1.4.11 erweitert die Anforderung auf wesentliche Nicht-Text-Elemente: den Rand oder die Füllung, die ein Formularfeld erkennbar machen, die Kontur eines Buttons, ein Symbol, das Information vermittelt (Warenkorb, Schloss, Warnung), die Segmente eines Diagramms. Jedes muss mindestens 3:1 gegenüber seiner Umgebung zeigen. Ein Eingabefeld, das nur von einer fast unsichtbaren grauen Füllung begrenzt wird, fällt hier durch.
#767676 auf Weiß; ein Warnsymbol in einer Farbe, die sich klar vom Hintergrund abhebt.Auch die Tastaturmarkierung muss sichtbar sein
Wenn du mit der Tastatur navigierst (Tab-Taste), zeigt das aktive Element einen Fokusindikator — meist eine Kontur. Dieser Indikator ist ein Nicht-Text-Element: Er muss mindestens 3:1 gegenüber dem angrenzenden Hintergrund kontrastieren, um wahrnehmbar zu sein. Entferne den Standardfokus (outline: none) nie, ohne einen gut kontrastierten an seine Stelle zu setzen.
outline: none ohne Ersatz oder ein blasser grauer Fokusring, der unsichtbar ist.→ Siehe auch die Anleitung für barrierefreie Tastaturbedienung.
Information darf nicht allein auf Farbe beruhen
Vom Kontrast verschieden, aber eng verbunden: Kriterium 1.4.1 verbietet, Information allein über Farbe zu vermitteln. Ein Feld im Fehlerzustand, das nur an einem roten Rahmen erkennbar ist, ein Sonderpreis, der nur rot geschrieben ist, ein Link in einem Absatz, der sich nur über seine Farbe abhebt: alle fallen für eine farbfehlsichtige Person durch. Stütze Farbe immer mit einem Label, einem Muster, einem Symbol oder einer Unterstreichung.
→ Siehe auch BFSG: was dein Online-Shop tun muss (der vollständige Leitfaden).
Der Kontrast muss überall unter dem Text halten
Eine weiße Überschrift über einem Hero-Banner-Foto ist der kniffligste Fall: Der Kontrast variiert Pixel für Pixel je nach hellen oder dunklen Bereichen des Bildes. Das Verhältnis muss über die gesamte Fläche erreicht werden, die der Text bedeckt. Verlässliche Lösungen: eine halbtransparente Überlagerung (dunkel oder hell) zwischen Bild und Text, ein Farbbalken hinter dem Text oder ein ausreichend starker Textschatten.
→ Siehe auch barrierefreier Checkout & Formulare: die Anleitung.
Die Schwellen auf einen Blick
| Element | Mindestverhältnis | WCAG-Kriterium |
|---|---|---|
| Fließtext (<24 px oder <18,66 px fett) | 4,5:1 | 1.4.3 (AA) |
| Großer Text (≥24 px oder ≥18,66 px fett) | 3:1 | 1.4.3 (AA) |
| Bedienelement (Feldrand, Button, informatives Symbol) | 3:1 | 1.4.11 (AA) |
| Fokusindikator (vs. angrenzender Hintergrund) | 3:1 | 1.4.11 / 2.4.7 |
| Logo, dekorativer Text, inaktives Element | keine Anforderung | — |
| Stufe AAA (empfohlen, über das BFSG hinaus) | 7:1 | 1.4.6 (AAA) |
Wie du deine eigenen Farben prüfst
Drei kostenlose Wege, vom breitesten zum genauesten:
- Ein automatischer Scan (axe-core, WAVE, Lighthouse) erkennt Text unter der Schwelle auf einem einfarbigen Hintergrund sehr gut: Es ist einer der Verstöße, die er am zuverlässigsten meldet, mit dem exakten Verhältnis und dem betroffenen Selektor.
- Die Werkzeuge deines Browsers: Im Inspektor (DevTools) zeigt der Farbwähler das Kontrastverhältnis eines Textelements direkt an und sagt dir, ob es AA/AAA erfüllt.
- Ein Paar-Prüfer (ein „Contrast Checker"): Prüfe beim Definieren der Palette jedes Text-/Hintergrund-Paar, bevor du es übernimmst — hier kostet die Korrektur am wenigsten.
Der blinde Fleck der Werkzeuge: Text über einem Bild oder einem Verlauf, den Scanner nicht zuverlässig bewerten können (der Hintergrund ist nicht eine einzige Farbe). Diese Fälle brauchen eine menschliche Prüfung. Genau davon hängt ein sauberer, mit Tastatur und Kontrast geprüfter Checkout ab, und es fließt direkt in den BFSG-Express-Test ein.
Prüfe den Kontrast deines Shops kostenlos
DeclareAccess scannt eine Seite deines Shops mit der axe-core-Engine nach WCAG 2.1 AA, listet die Texte und Bedienelemente unter der Kontrastschwelle (mit dem exakten Verhältnis) und die weiteren Verstöße, und erzeugt anschließend das veröffentlichungsfertige Barrierefreiheitsdokument — deutsch („Informationen zur Barrierefreiheit", § 14 BFSG), englisch, französisch (RGAA), italienisch oder spanisch. Kostenlos, ohne Kreditkarte.
WCAG-Bericht per E-Mail innerhalb von 1 Werktag.
Erhalten. Deine Audit-Anfrage ist gespeichert — du erhältst deinen WCAG-Bericht per E-Mail innerhalb von 1 Werktag.
Häufige Fragen
Wie wird ein Kontrastverhältnis berechnet?
Die WCAG definiert eine Formel auf Basis der relativen Leuchtdichte der zwei Farben: (L1 + 0,05) / (L2 + 0,05), wobei L1 die Leuchtdichte der helleren und L2 die der dunkleren Farbe ist. Das Ergebnis reicht von 1:1 bis 21:1. In der Praxis rechnest du das nicht von Hand: Ein Contrast Checker, der Browser-Inspektor oder ein automatischer Scan geben das Verhältnis sofort aus zwei Farbcodes.
Gilt die 4,5:1-Regel für mein Logo?
Nein. Logos und Markennamen (Text, der Teil eines Logotypes ist) sind ausdrücklich von der Kontrastanforderung ausgenommen, ebenso rein dekorativer Text und inaktive Bedienelemente (etwa ein deaktivierter Button). Sobald Text aber nützliche Information vermittelt — eine Überschrift, ein Preis, ein Label —, gilt die Regel.
Meine Markenfarbe erreicht die Schwelle nicht — was tue ich?
Du musst deine visuelle Identität nicht ändern. Die übliche Lösung ist, eine dunkle Variante der Markenfarbe zu definieren, reserviert für Text und interaktive Elemente (Links, Buttons), und den ursprünglichen Ton für flache Füllungen, Hintergründe und Dekoration zu behalten. Die Farbe bleibt erkennbar und der Text wird lesbar. Andernfalls setze den Text auf einen neutralen Hintergrund (Weiß, Dunkelgrau) statt auf die Farbe selbst.
Ändert der Dark Mode die Kontrastanforderungen?
Nein, die Schwellen sind dieselben (4,5:1 und 3:1) — aber sie müssen in jedem Theme erreicht werden. Eine Farbe, die im Light Mode besteht, kann im Dark Mode durchfallen und umgekehrt. Bietest du einen Dark Mode, prüfe den Kontrast in beiden getrennt. Viele Versäumnisse stammen von grauem Text, der aus dem Light Mode geerbt wurde und auf dunklem Hintergrund unlesbar wird.
Wie behandle ich Text über einem Banner-Foto?
Das ist der kniffligste Fall, weil der Hintergrund nicht eine einzige Farbe ist. Der Kontrast muss überall erreicht werden, wo der Text sitzt. Verlässliche Lösungen: eine halbtransparente Überlagerung zwischen Bild und Text ergänzen, um den Hintergrund auszugleichen, den Text auf einen Farbbalken setzen oder einen starken Textschatten verwenden. Da automatische Scans das schlecht bewerten, prüfe es mit dem Auge am echten Bild.