Zu geringer Farbkontrast gehört zu den am häufigsten dokumentierten Barrierefreiheits-Verstößen im Web und betrifft Shopify-Stores besonders oft, weil Themes auf eine bestimmte Markenoptik hin gestaltet sind und dezente Grautöne, helle Akzentfarben und Pastelltöne bevorzugen. Über die harmonisierte Norm EN 301 549 v3.2.1 sind die einschlägigen WCAG-Kriterien zum Kontrast verbindlicher Prüfmaßstab des Barrierefreiheitsstärkungsgesetzes (BFSG), das seit dem 28. Juni 2025 für alle Anbieter oberhalb der Kleinstunternehmen-Schwelle gilt. Dieser Beitrag erklärt die beiden maßgeblichen Erfolgskriterien, zeigt die typischen Schwachstellen in Shopify-Themes, führt Schritt für Schritt durch die Messung mit Chrome DevTools und dem WebAIM Contrast Checker und beschreibt die Korrektur über CSS-Variablen im Theme.
Ausreichender Kontrast zwischen Text und Hintergrund ist die Voraussetzung dafür, dass Inhalte überhaupt gelesen werden können. Betroffen sind Menschen mit Sehbeeinträchtigung, ältere Nutzer mit nachlassender Kontrastempfindlichkeit, aber auch jede Person, die Ihren Store bei Sonnenlicht auf einem Smartphone öffnet. Im E-Commerce hat das unmittelbare Folgen: Ein Preis, ein Verfügbarkeitshinweis oder ein Rabattcode, der sich kaum vom Hintergrund abhebt, kostet im Zweifel den Verkauf.
Das BFSG (BGBl. 2021 I S. 2970) setzt die EU-Richtlinie 2019/882 (European Accessibility Act, EAA) in deutsches Recht um. Online-Shops fallen nach § 1 Abs. 3 Nr. 5 BFSG als "Dienstleistungen im elektronischen Geschäftsverkehr" in den Anwendungsbereich. Über Anlage I der EU-Richtlinie 2019/882 verweist das BFSG auf die harmonisierte Norm EN 301 549 v3.2.1, die in ihrem Kapitel 9 die WCAG-2.1-AA-Erfolgskriterien für Webinhalte übernimmt. Die hier behandelten Kontrastkriterien sind Teil dieser Stufe AA und damit verbindlich.
Bei Verstößen sieht § 37 BFSG Bußgelder vor. Nach § 37 Abs. 2 BFSG beträgt der Rahmen für das nicht konforme Anbieten oder Erbringen einer Dienstleistung bis zu 100.000 EUR, für bestimmte Auskunfts- und Mitwirkungspflichten bis zu 10.000 EUR. AccessifyAI hilft, solche Verstöße zu finden und zu beheben, garantiert aber keine Rechtskonformität oder BFSG-Konformität. Die rechtliche Verantwortung trägt nach § 8 BFSG der Diensteanbieter, also der Händler.
Vom Anwendungsbereich ausgenommen sind nach § 3 Abs. 3 BFSG nur Kleinstunternehmen, also Unternehmen mit weniger als zehn Beschäftigten UND einem Jahresumsatz oder einer Jahresbilanzsumme unter zwei Millionen EUR. Beide Bedingungen müssen kumulativ erfüllt sein.
Für Farbkontrast greifen zwei Erfolgskriterien aus EN 301 549 v3.2.1. Beide sind Stufe AA und über das BFSG verbindlich.
| Kriterium |
Inhalt |
Mindestwert |
Stufe |
| WCAG 1.4.3 Contrast (Minimum) |
Kontrast von Text zu Hintergrund |
4,5:1, bei großem Text 3:1 |
AA |
| WCAG 1.4.11 Non-text Contrast |
Kontrast von Bedienelementen und grafischen Objekten |
3:1 |
AA |
Das Kontrastverhältnis ist eine Zahl zwischen 1:1 (kein Unterschied, etwa Weiß auf Weiß) und 21:1 (maximaler Unterschied, Schwarz auf Weiß). Sie wird aus der relativen Leuchtdichte der beiden Farben berechnet, nicht aus deren Farbton. Deshalb können zwei kräftige Farben wie ein sattes Orange auf Grün dennoch durchfallen.
WCAG 1.4.3 verlangt für normalen Text ein Verhältnis von mindestens 4,5:1. Für großen Text genügt 3:1. Als groß gilt Text ab 18 Punkt beziehungsweise ab 24 CSS-Pixeln, oder ab 14 Punkt beziehungsweise 18,66 CSS-Pixeln, wenn er fett gesetzt ist.
WCAG 1.4.11 verlangt 3:1 für alles, was kein Text ist, aber zum Verständnis oder zur Bedienung beiträgt: die Umrandung eines Eingabefelds, das Symbol eines Icon-Buttons, der aktive Zustand einer Komponente, die Linien eines Diagramms. Reine Dekoration ohne Funktion ist ausgenommen.
Folgende Stellen scheitern in der Praxis am häufigsten. Welche davon in Ihrem konkreten Store auftreten, hängt von der Theme-Version und Ihren Farbeinstellungen ab und muss am installierten Store geprüft werden.
- Sekundärtext in Hellgrau. Produktuntertitel, Bewertungszähler, Lieferzeit-Hinweise und Fußzeilentext werden gern in einem dezenten Grau auf weißem Grund gesetzt. Ein helles Grau auf Weiß unterschreitet die 4,5:1-Grenze schnell.
- Platzhaltertext in Eingabefeldern. Der graue Hinweistext in Such-, Newsletter- und Kontaktfeldern ist häufig zu blass. Sobald er Information trägt, gilt er als Text nach WCAG 1.4.3.
- Button-Hover-Zustände. Ein Button kann im Ruhezustand bestehen, im Hover-Zustand aber aufhellen und damit unter die Grenze fallen. Jeder Zustand wird einzeln bewertet.
- Eingabefeldrahmen. Die Umrandung von Formularfeldern ist oft ein zartes Grau auf Weiß und unterschreitet die 3:1-Grenze nach WCAG 1.4.11. Ohne ausreichenden Rahmenkontrast ist nicht erkennbar, wo das Feld beginnt.
- Inaktive Buttons. Ausgegraute Schaltflächen sind ein Sonderfall. Echte deaktivierte Bedienelemente sind von WCAG 1.4.11 ausgenommen. Wenn der Button aber weiterhin bedienbar ist und nur "ausgegraut" aussieht, gilt die Grenze.
- Text über Bildern. Slider und Banner legen oft weißen Text über Fotos. Je nach Bildstelle ändert sich der Hintergrund, und der Kontrast bricht an hellen Bildbereichen ein.
Die Chrome DevTools enthalten ein Kontrast-Prüfwerkzeug, das ohne Zusatzinstallation auskommt. So gehen Sie vor:
- Öffnen Sie die betreffende Seite in Chrome und drücken Sie F12, um die DevTools zu öffnen.
- Klicken Sie oben links auf das Pfeil-Symbol zum Auswählen eines Elements und klicken Sie dann auf den fraglichen Text.
- Im Reiter "Styles" finden Sie unter der Farbangabe ein kleines Farbquadrat. Klicken Sie darauf.
- Der Farbwähler zeigt unter "Contrast ratio" das gemessene Verhältnis und mit Häkchen oder Kreuz an, ob die Stufen AA und AAA erfüllt sind.
Alternativ blendet der "Inspect"-Modus beim Überfahren eines Textelements direkt ein Tooltip mit dem Kontrastverhältnis ein. Für einen Überblick über die ganze Seite eignet sich zusätzlich der Lighthouse-Bericht im Reiter "Lighthouse", der unzureichenden Kontrast als eigenen Prüfpunkt ausweist.
Wenn Sie zwei konkrete Farbwerte gegeneinander prüfen wollen, etwa eine geplante Markenfarbe gegen Weiß, ist der WebAIM Contrast Checker das einfachste Werkzeug:
- Tragen Sie unter "Foreground Color" den Hex-Wert Ihres Textes ein, etwa
#767676.
- Tragen Sie unter "Background Color" den Hintergrund ein, etwa
#FFFFFF.
- Der Checker zeigt sofort das Verhältnis und ob "WCAG AA" für normalen und großen Text bestanden ist.
Den Hex-Wert einer im Theme verwendeten Farbe finden Sie entweder in den Theme-Einstellungen des Shopify-Admins unter den Farbschemata oder über das soeben beschriebene DevTools-Farbquadrat. Notieren Sie sich für jede beanstandete Stelle das Farbpaar, dann lässt sich die Korrektur gezielt planen.
Moderne Shopify-Themes definieren ihre Farben zentral als CSS-Variablen, häufig auf dem :root-Element oder pro Farbschema. Statt an vielen Stellen einzelne Farbwerte zu ändern, passen Sie idealerweise die zentrale Variable an, dann zieht die Korrektur durch alle Stellen, die diese Variable nutzen.
Das Grundprinzip sieht so aus. Angenommen, eine Variable für Sekundärtext ist zu hell gesetzt:
:root {
/* zu hell, Kontrast unter 4,5:1 auf Weiß */
--color-text-secondary: #999999;
}
Die Korrektur dunkelt den Wert so weit ab, bis er die 4,5:1-Grenze auf dem tatsächlichen Hintergrund überschreitet. Prüfen Sie den neuen Wert vorher im Contrast Checker:
:root {
/* abgedunkelt, erreicht das geforderte Verhältnis */
--color-text-secondary: #595959;
}
Für einen zu blassen Eingabefeldrahmen nach WCAG 1.4.11 gilt dasselbe. Der Rahmen muss mindestens 3:1 zum angrenzenden Hintergrund erreichen:
.field__input {
/* vorher: zu zarter Rahmen */
border: 1px solid #e0e0e0;
}
.field__input {
/* nachher: Rahmen mit ausreichendem Kontrast */
border: 1px solid #767676;
}
Den Platzhaltertext in Formularfeldern steuern Sie über die ::placeholder-Pseudoklasse:
.field__input::placeholder {
color: #767676;
opacity: 1;
}
Das explizite opacity: 1 ist wichtig, weil manche Browser Platzhaltertext zusätzlich abdunkeln oder aufhellen und das gemessene Verhältnis verändern. Setzen Sie die Deckkraft fest, damit der geprüfte Wert auch der dargestellte Wert ist.
Die konkreten Hex-Werte in diesen Beispielen sind allgemeine Richtwerte. Sie sind kein Ersatz für die Messung an Ihrem Store. Jedes Theme bringt eigene Variablennamen mit (--color-foreground, --color-base-text, --color-secondary und so weiter), und der tatsächliche Hintergrund ist nicht überall reines Weiß. Prüfen Sie deshalb jede Korrektur im installierten Zustand auf der Seite, auf der die Farbe wirklich erscheint.
Ändern Sie Farben nicht direkt am produktiven Theme. Legen Sie im Shopify-Admin unter "Themes" eine Kopie an, nehmen Sie die Korrektur dort vor und prüfen Sie das Ergebnis in der Vorschau, bevor Sie veröffentlichen. Die eigentliche Arbeit besteht darin, die betroffenen Stellen vollständig zu finden, denn eine Variable kann an vielen Stellen wirken, und einzelne Komponenten setzen ihre Farbe manchmal lokal außer Kraft.
| Werkzeug |
Zweck |
Kosten |
| Chrome DevTools |
Kontrastmessung einzelner Elemente direkt im Browser |
kostenlos |
| WebAIM Contrast Checker |
Prüfung eines Farbpaars über Hex-Werte |
kostenlos |
| Lighthouse (Chrome) |
Seitenweite Erkennung unzureichenden Kontrasts |
kostenlos |
| axe DevTools |
Erkennt Kontrastverstöße samt betroffenem Element |
kostenlose Variante |
| WAVE (WebAIM) |
Visuelle Markierung von Kontrastfehlern auf der Seite |
kostenlos |
| AccessifyAI |
Shopify-spezifische Überprüfung mit Liquid-Korrekturvorschlägen |
Free-Tier, ab 9,99 USD/Monat |
Welche dieser Kontrastprobleme in Ihrem konkreten Store stecken, zeigt nur ein echter Test auf Ihrer aktuellen Theme-Version und im installierten Zustand mit allen aktiven Apps. Ich habe AccessifyAI entwickelt, weil allgemeine Werkzeuge zwar einen zu geringen Kontrast melden, aber nicht sagen, in welcher Liquid-Datei oder welcher CSS-Variablen die Korrektur erfolgen muss. AccessifyAI ordnet den Befund dem Shopify-Code-Modell zu und gibt statt eines Overlays einen Korrekturvorschlag als Liquid-Diff aus, den Sie vor der Übernahme begutachten können. Wenn Sie zunächst nur sehen wollen, wie es um Ihren Store steht, können Sie ohne Installation den kostenlosen On-Page-Scanner auf accessify.ensomedia.pl nutzen. Die App selbst finden Sie im Shopify App Store.
- Öffnen Sie Startseite, eine Kollektion und eine Produktseite und messen Sie mit den Chrome DevTools den Kontrast von Fließtext, Sekundärtext, Preis und Buttons.
- Prüfen Sie Eingabefelder gezielt auf Rahmenkontrast und Platzhaltertext.
- Testen Sie Buttons in jedem Zustand, also Ruhe, Hover und gegebenenfalls Fokus.
- Notieren Sie jedes durchgefallene Farbpaar und prüfen Sie die Zielwerte im WebAIM Contrast Checker.
- Korrigieren Sie zentral über die CSS-Variablen des Themes an einer Theme-Kopie und veröffentlichen Sie erst nach der Vorschau.
- Planen Sie eine erneute Überprüfung nach jeder Änderung des Farbschemas und nach jedem Theme-Update, da beide neue Kontrastlücken einführen können.
Weitere fachliche Vertiefung finden Sie in unserem Beitrag zu WCAG 2.2 für Shopify-Händler und in unserer BFSG-Pflichtcheckliste mit 14 Punkten.
Normaler Text muss nach WCAG 1.4.3 (Stufe AA) ein Verhältnis von mindestens 4,5:1 zum Hintergrund erreichen. Großer Text genügt mit 3:1. Als groß gilt Text ab 24 CSS-Pixeln, oder ab 18,66 CSS-Pixeln, wenn er fett gesetzt ist.
Ja, über zwei Kriterien. Der Text auf einem Button unterliegt WCAG 1.4.3 mit 4,5:1. Die Umrandung eines Eingabefelds und grafische Bedienelemente unterliegen WCAG 1.4.11 (Non-text Contrast, Stufe AA) mit 3:1. Beide sind über EN 301 549 v3.2.1 nach dem BFSG verbindlich.
Echte deaktivierte Bedienelemente sind von WCAG 1.4.11 ausdrücklich ausgenommen. Entscheidend ist, ob der Button technisch wirklich deaktiviert ist (etwa per disabled-Attribut) oder nur ausgegraut aussieht, aber weiterhin bedienbar bleibt. Im zweiten Fall gilt die Kontrastgrenze.
Ja. Jeder visuell unterscheidbare Zustand eines Bedienelements wird einzeln bewertet. Ein Button kann im Ruhezustand bestehen und im Hover-Zustand durchfallen, wenn er dabei aufhellt. Prüfen Sie deshalb Ruhe-, Hover- und Fokuszustand getrennt.
Nein. Kein Werkzeug kann Rechtskonformität garantieren. Automatisierte Kontrastprüfung erfasst zwar Text und Hintergrund zuverlässig, kann aber etwa Text über Bildern oder Verläufen nur eingeschränkt beurteilen. Werkzeuge, auch AccessifyAI, helfen beim Finden und Beheben von Verstößen. Die rechtliche Verantwortung trägt nach § 8 BFSG der Händler.
Nach § 8 BFSG ist fortlaufende Konformität gefordert, nicht eine einmalige Prüfung. Jede Änderung des Farbschemas, jedes Theme-Update und jede neue App, die eigene Farben einspielt, kann eine Kontrastlücke einführen. Eine erneute Überprüfung nach jedem solchen Eingriff ist sinnvoll.
Farbkontrast ist über EN 301 549 v3.2.1 und damit über das BFSG verbindlich und ruht auf zwei Erfolgskriterien: WCAG 1.4.3 (Contrast Minimum, AA) mit 4,5:1 für normalen und 3:1 für großen Text sowie WCAG 1.4.11 (Non-text Contrast, AA) mit 3:1 für Bedienelemente und grafische Objekte. In Shopify-Stores fallen am häufigsten hellgrauer Sekundärtext, blasser Platzhaltertext, aufhellende Button-Hover-Zustände, zarte Eingabefeldrahmen und Text über Bildern durch. Messen lässt sich das ohne Zusatzinstallation mit den Chrome DevTools und über Hex-Werte mit dem WebAIM Contrast Checker. Korrigiert wird am sinnvollsten zentral über die CSS-Variablen des Themes, immer an einer Theme-Kopie, mit Vorschau und Messung im installierten Zustand auf der aktuell ausgespielten Theme-Version.