Webshop-Kontraste nach WCAG 2.1 prüfen

Das Wichtigste in Kürze: Kontrastfehler gehören zu den häufigsten WCAG-Verstößen in Online-Shops und betreffen oft geschäftskritische Bereiche wie Preise, Buttons, Formulare und Fehlermeldungen. WCAG 2.1 AA verlangt ein Kontrastverhältnis von mindestens 4,5:1 für normalen Text. Typische Problemstellen sind hellgraue Preisangaben, blasse Pflichtfeld-Hinweise, kontrastarme Rabattlabels und Buttons auf farbigen Bannern. Prüfen Sie zuerst Produktdetailseiten, Warenkorb und Checkout. Automatisierte Scans liefern einen schnellen Überblick über systemweite Muster, manuelle Prüfungen ergänzen bei einzelnen Farbentscheidungen. Kontrast ist kein Einmal-Thema - neue Themes, Kampagnen und A/B-Tests bringen regelmäßig neue Risiken.

Schon ein grauer Preis auf weißem Hintergrund kann im Checkout zum echten Problem werden. Was im Design-Review noch „dezent“ wirkt, ist für viele Nutzer schwer lesbar - und nach WCAG 2.1 schnell ein klarer Verstoß.

Wer einen Online-Shop betreibt, sollte Kontraste nicht als Detail behandeln. Sie betreffen Produkttexte, Buttons, Filter, Hinweise zu Lieferzeiten, Formularfelder und Fehlermeldungen. Genau dort, wo Nutzer Entscheidungen treffen und Käufe abschließen. Wenn Inhalte nicht ausreichend erkennbar sind, sinkt nicht nur die Nutzbarkeit. Es steigt auch das Risiko, Anforderungen aus WCAG 2.1 AA und dem BFSG zu verfehlen.

Warum Kontraste im Shop so oft unterschätzt werden

Viele Shops haben kein grundsätzliches Designproblem, sondern ein Priorisierungsproblem. Das Team arbeitet an Conversion, Kampagnen, neuen Sortimenten und technischen Schnittstellen. Kontrastfehler rutschen dabei durch, weil sie auf den ersten Blick klein wirken. In der Praxis sind sie aber häufig systemisch: einmal falsch definierte Farben im Designsystem, und der Fehler taucht auf dutzenden Seiten wieder auf.

Besonders kritisch ist das bei Elementen mit direkter Kaufrelevanz. Wenn ein Gutscheinfeld kaum erkennbar ist, die Fehlermeldung im Formular zu blass erscheint oder der „In den Warenkorb“-Button farblich nicht klar hervorsticht, trifft das nicht nur die Barrierefreiheit. Es kostet Umsatz.

Dazu kommt ein zweiter Punkt: Kontraste lassen sich nicht zuverlässig nach Bauchgefühl bewerten. Was auf einem hochwertigen Monitor im Büro noch gut lesbar wirkt, kann auf einem mobilen Gerät, bei Sonnenlicht oder für Menschen mit Sehbeeinträchtigungen deutlich schlechter funktionieren. Darum braucht das Thema eine prüfbare Grundlage.

Kontrast prüfen Webshop WCAG 2.1 - worauf es konkret ankommt

WCAG 2.1 AA verlangt ausreichende Kontraste zwischen Text und Hintergrund. Für normalen Fließtext gilt in der Regel ein Kontrastverhältnis von mindestens 4,5:1. Für großen Text gelten geringere Anforderungen. Auch Bedienelemente und grafische Elemente mit Funktion müssen ausreichend unterscheidbar sein.

Entscheidend ist dabei nicht nur der offensichtliche Textblock auf der Startseite. In Webshops liegen die typischen Probleme oft in kleineren, wiederkehrenden Komponenten: Preisangaben in Hellgrau, durchgestrichene Rabatte, Placeholder in Suchfeldern, Filteroptionen, deaktiviert wirkende Buttons, Sternchenhinweise oder Statusmeldungen nach einer Eingabe.

Genau hier wird das Thema für Shop-Betreiber praktisch. Sie müssen nicht jede WCAG-Regel auswendig kennen. Sie müssen wissen, welche Stellen im Shop geschäftskritisch sind und wo die häufigsten Verstöße auftreten. Ein sauberer Prüfprozess spart Zeit, weil er nicht bei einzelnen Seiten stehen bleibt, sondern Muster im gesamten Shop sichtbar macht.

Diese Shop-Bereiche sollten Sie zuerst prüfen

Wer Kontraste priorisieren will, beginnt nicht irgendwo, sondern dort, wo Risiko und Wirkung am höchsten sind. Produktdetailseiten gehören dazu, weil hier Titel, Varianten, Preise, Lieferhinweise und Call-to-Action zusammenkommen. Danach folgen Warenkorb und Checkout, denn dort führen schlecht erkennbare Hinweise direkt zu Abbrüchen.

Auch Navigation und Suche sind relevant. Wenn Hauptmenü, Filter oder Sortierung nur schwach kontrastieren, wird der Zugang zum Sortiment unnötig erschwert. Ein weiteres häufiges Feld sind Kundenkonten und Servicebereiche, etwa Retouren, Passwort-Reset oder Bestellübersichten. Diese Seiten fallen in Projekten oft hinten runter, obwohl sie rechtlich und praktisch genauso relevant sein können.

Nicht zuletzt lohnt der Blick auf Aktionsflächen. Saisonkampagnen, Sale-Banner oder Pop-ups arbeiten oft mit markennahen Farben, die visuell stark, aber funktional problematisch sind. Gerade Marketing-Elemente werden unter Zeitdruck gebaut und seltener auf Barrierefreiheit geprüft.

Manuell prüfen oder automatisiert scannen?

Die ehrliche Antwort lautet: Es kommt auf Ihr Ziel an. Wenn Sie eine einzelne Farbentscheidung im Design bewerten wollen, reicht eine manuelle Prüfung oft aus. Wenn Sie wissen möchten, ob Ihr Shop insgesamt belastbar aufgestellt ist, brauchen Sie mehr als Stichproben.

Die manuelle Prüfung hat einen Vorteil: Sie ist präzise an der konkreten Stelle. Ein Designer oder Entwickler kann gezielt Farben vergleichen und direkt nachbessern. Der Nachteil ist der Aufwand. Bei größeren Shops mit vielen Templates, Varianten und Zuständen ist eine rein manuelle Kontrolle kaum wirtschaftlich.

Automatisierte Scans sind stark, wenn es um Geschwindigkeit, Breite und Priorisierung geht. Sie finden typische Kontrastprobleme in kurzer Zeit, zeigen betroffene Seiten und helfen dabei, wiederkehrende Muster zu erkennen. Das ersetzt kein vollständiges Experten-Audit, ist aber ein sehr sinnvoller erster Schritt - besonders dann, wenn intern noch unklar ist, wie groß der Handlungsbedarf überhaupt ist.

Für Shop-Teams ist genau diese Reihenfolge oft am effizientesten: erst den Status sichtbar machen, dann systemische Fehler priorisieren, danach gezielt in Design und Entwicklung nacharbeiten. So wird Barrierefreiheit planbar statt diffuses Dauerprojekt.

So gehen Sie beim Prüfen sinnvoll vor

Wenn Sie den Kontrast prüfen im Webshop nach WCAG 2.1, sollten Sie nicht nur die Startseite betrachten. Sinnvoll ist ein Ablauf über mehrere Seitentypen. Dazu gehören mindestens Startseite, Kategorieseite, Produktdetailseite, Warenkorb und Checkout. Falls Ihr Shop stark auf Landingpages setzt, sollten auch diese einbezogen werden.

Achten Sie dabei auf Zustände, nicht nur auf Standardansichten. Ein Button kann im Normalzustand ausreichend kontrastieren, im Hover- oder deaktivierten Zustand aber durchfallen. Dasselbe gilt für Formulare. Leere Felder, Fokuszustände, Fehlermeldungen und Bestätigungshinweise müssen jeweils lesbar und klar erkennbar sein.

Ein weiterer häufiger Fehler ist die isolierte Bewertung einzelner Farben. Relevant ist immer die tatsächliche Kombination auf der Oberfläche. Ein Markenblau kann auf Weiß funktionieren, auf Hellgrau aber nicht mehr. Deshalb helfen reine Styleguide-Entscheidungen nur bedingt, wenn reale Komponenten unterschiedlich eingesetzt werden.

Für Teams mit wenig Zeit ist ein schneller Erstscan oft der beste Einstieg. Auf https://Checkbarriere.de lässt sich in kurzer Zeit erkennen, ob es sichtbare Kontrastprobleme auf zentralen Shop-Seiten gibt und wie dringend der Handlungsbedarf ist. Entscheidend ist nicht nur, dass Fehler gefunden werden, sondern dass sie in verständliche Maßnahmen übersetzt werden.

Typische Kontrastfehler mit hoher Priorität

In der Praxis wiederholen sich bestimmte Probleme erstaunlich oft. Dazu gehören blasse Pflichtfeld-Hinweise, graue Formularbeschriftungen, schlecht lesbare Buttons auf farbigen Bannern und zu schwache Kontraste bei Preiszusätzen wie „inkl. MwSt.“ oder Lieferhinweisen. Gerade kleine Texte werden gerne optisch zurückgenommen - aus Sicht der Barrierefreiheit ist das oft der falsche Weg.

Ebenso problematisch sind Zustandsanzeigen, die nur über Farbe funktionieren. Wenn etwa verfügbare und nicht verfügbare Varianten hauptsächlich farblich unterschieden werden, reicht das nicht aus. Nutzer müssen Unterschiede klar erkennen können, auch wenn Farbwahrnehmung eingeschränkt ist.

Bei Rabattkommunikation ist Vorsicht geboten. Durchgestrichene Altpreise, Sparhinweise und Aktionslabels arbeiten oft mit kleinen Schriftgrößen und kontrastarmen Farbtönen. Das sieht im Entwurf sauber aus, ist im Live-Shop aber häufig schwer lesbar. Hier zeigt sich gut, dass Barrierefreiheit und Conversion nicht gegeneinander stehen. Klare Lesbarkeit unterstützt Orientierung und Vertrauen.

Was nach der Prüfung passieren sollte

Ein Prüfbericht ist nur dann nützlich, wenn er Entscheidungen vereinfacht. Für Shop-Verantwortliche heißt das: nicht jede Auffälligkeit gleich behandeln, sondern nach Risiko, Reichweite und Aufwand priorisieren. Fehler in Checkout, Navigation und Formularen haben meist Vorrang vor optischen Schwächen in Randbereichen.

Dann lohnt der Blick auf die Ursache. Liegt das Problem in einem einzelnen Inhaltselement oder in einer zentralen Komponente? Wenn eine Button-Farbe systemweit zu wenig Kontrast hat, lässt sich mit einer Anpassung im Designsystem viel auf einmal beheben. Wenn Fehler dagegen aus individuellen Kampagnenmodulen stammen, braucht es eher redaktionelle oder templatebezogene Nacharbeit.

Wichtig ist auch die Dokumentation. Wer Änderungen nachvollziehbar festhält, schafft eine belastbare Grundlage für interne Freigaben, externe Dienstleister und spätere Nachprüfungen. Gerade im BFSG-Kontext ist es sinnvoll, Fortschritt nicht nur umzusetzen, sondern auch belegen zu können.

Warum Kontrast kein Einmal-Thema ist

Shops verändern sich laufend. Neue Themes, saisonale Aktionen, App-Erweiterungen, Relaunches und A/B-Tests bringen immer wieder neue Farb- und Komponentenentscheidungen mit. Ein Shop kann heute unauffällig wirken und in drei Monaten wieder problematische Kontraste enthalten.

Deshalb ist laufendes Monitoring oft sinnvoller als punktuelle Hektik kurz vor einem Stichtag. Nicht jeder Shop braucht dieselbe Prüftiefe oder Frequenz. Ein kleinerer Shop mit wenigen Änderungen kommt mit einem schlankeren Prozess aus. Wer viele Landingpages, häufige Kampagnen oder mehrere Mandanten betreut, sollte deutlich regelmäßiger prüfen.

Am Ende geht es nicht darum, irgendeinen Bericht abzulegen. Es geht darum, dass Menschen Ihren Shop lesen, verstehen und bedienen können - ohne Reibung an Stellen, an denen Kaufentscheidungen fallen. Genau dort zeigt sich, ob Barrierefreiheit nur auf dem Papier steht oder im Alltag funktioniert.