Farbkontrast im Shopify-Shop prüfen und korrigieren

Sachinformation, keine Rechtsberatung. Für Ihre konkrete Situation fragen Sie bitte eine Anwältin oder einen Anwalt.

Von Sieghart Michielsen · Veröffentlicht 25. Oktober 2026

Hellgraue Fußzeilen, weiße Schrift auf pastellfarbenen Buttons, ein Rabatt-Etikett in Signalorange: Zu wenig Farbkontrast ist die häufigste Barriere, die automatisierte Tests auf Shopify-Startseiten finden. Betroffen sind nicht nur Menschen mit Sehbehinderung, sondern alle, die ihr Smartphone in der Sonne benutzen.

Dieser Beitrag erklärt, welche Kontrastwerte die WCAG verlangen, wo Shopify-Shops typischerweise darunter liegen, wie Sie Kontrast messen und wie Sie ihn in den Farbeinstellungen Ihres Themes korrigieren. Warum das für deutsche Shops seit Juni 2025 auch rechtlich relevant ist, lesen Sie im Beitrag BFSG für Shopify-Shops.

Kurz zusammengefasst

• WCAG 1.4.3 (AA): mindestens 4,5:1 für normalen Text, 3:1 für großen Text (ab 24 CSS-Pixel oder ab etwa 18,5 CSS-Pixel fett).
• WCAG 1.4.11 (AA): mindestens 3:1 für Bedienelemente, ihre Zustände und Grafiken, die man zum Verstehen braucht.
• WCAG 1.4.1 (A): Farbe darf nicht das einzige Unterscheidungsmerkmal sein, zum Beispiel bei Links im Fließtext.
• In unserer Auswertung hatten 74,6 % von 5.463 EU-Shopify-Startseiten Text mit zu wenig Kontrast, bei .de-Domains 75,1 % (automatisierte Prüfung, nur Startseiten).
• Die meisten Korrekturen gelingen in den Farbschemata des Themes, ohne Code. Text auf Bildern müssen Sie von Hand prüfen.

Was die WCAG verlangen

1.4.3 Kontrast (Minimum)

Das Erfolgskriterium 1.4.3 Contrast (Minimum) verlangt für Text und Bilder von Text ein Kontrastverhältnis von mindestens 4,5:1. Für großen Text genügen 3:1. Groß ist Text laut W3C ab 18 Punkt oder ab 14 Punkt fett. Umgerechnet (1 pt = 1,333 px) sind das etwa 24 CSS-Pixel bzw. 18,5 CSS-Pixel fett. Eine 16-Pixel-Produktbeschreibung ist also kein großer Text, eine fette 20-Pixel-Überschrift schon.

Ausgenommen sind:

• Text in inaktiven Bedienelementen, rein dekorativer Text, unsichtbarer Text und Text in Bildern mit wesentlichem anderem Bildinhalt,
• Text, der Teil eines Logos oder Markennamens ist.

Das W3C betont außerdem: Die Werte werden nicht gerundet. 4,499:1 erfüllt 4,5:1 nicht.

1.4.11 Nicht-Text-Kontrast

1.4.11 Non-text Contrast verlangt mindestens 3:1 gegenüber angrenzenden Farben für alles, was man braucht, um Bedienelemente und ihre Zustände zu erkennen: Rahmen von Eingabefeldern, Checkboxen, ausgewählte Größen- oder Farb-Swatches, Fokusrahmen bei Tastaturbedienung, Icons ohne Textbeschriftung. Ein hellgrauer Rahmen #CCCCCC auf Weiß erreicht nur 1,61:1; ein Eingabefeld mit diesem Rahmen ist für viele Menschen kaum als Feld zu erkennen.

1.4.1 Benutzung von Farbe

Nach 1.4.1 Use of Color darf Farbe nicht das einzige Mittel sein, um eine Information zu vermitteln. Der häufigste Fall im Shop: Links im Fließtext, die sich nur durch die Farbe vom übrigen Text unterscheiden. Die einfachste Lösung ist eine Unterstreichung. Die W3C-Technik G183 beschreibt eine Alternative: mindestens 3:1 Kontrast zwischen Link- und Textfarbe plus ein zusätzliches Merkmal bei Fokus und Hover. Weitere Beispiele: Pflichtfelder nur in Rot markiert, ausverkaufte Varianten nur heller dargestellt.

Was unsere Daten zeigen

In unserer Studie zu 5.463 EU-Shopify-Startseiten war zu geringer Farbkontrast der häufigste automatisch gefundene Befund: 74,6 % der Seiten hatten mindestens eine Textstelle unter dem Mindestwert, bei .de-Domains 75,1 %. Grundlage ist der HTTP-Archive-Crawl vom 1. September 2026, mobile Ansicht, nur Startseiten, nur automatisierte Prüfungen. Text auf Bildern ist darin kaum erfasst (siehe unten), die tatsächliche Zahl der Kontrastprobleme dürfte also eher höher liegen. Weil Kontrast meist im Theme entsteht, wirkt eine Korrektur dort auf jede Seite, die dieselbe Sektion nutzt.

Typische Problemstellen in Shopify-Shops

• Rabatt- und Sale-Kennzeichnungen: weiße Schrift auf hellem Rot, Orange oder Gold. Weiß auf #E53935 erreicht 4,23:1 und liegt damit unter 4,5:1.
• Streichpreise: Der ursprüngliche Preis wird oft in hellem Grau und kleiner Schrift gesetzt. Auch durchgestrichener Text ist Text und braucht 4,5:1.
• Platzhaltertext in Suche, Newsletter-Anmeldung und Formularen: häufig #A9A9A9 oder heller, das sind 2,35:1 auf Weiß. Platzhalter ersetzen außerdem keine sichtbare Beschriftung.
• Text auf Bannerbildern in Slideshows und Bildbannern, vor allem auf mobilen Geräten, wo der Bildausschnitt anders fällt.
• Hellgraue Fußzeilen mit kleiner Schrift auf hellem Grund.
• Buttons in Markenfarben, zum Beispiel weiße Schrift auf Pastellgrün oder Sandfarben.
• Ankündigungsleiste ganz oben, oft mit eigenem Farbschema und kleiner Schrift.
• Ausverkaufte Varianten: Inaktive Elemente sind von 1.4.3 ausgenommen, die Information „ausverkauft“ sollte aber nicht nur über eine blassere Farbe vermittelt werden.

Beispiele mit berechneten Kontrastwerten

Das Kontrastverhältnis berechnet sich aus der relativen Leuchtdichte beider Farben: (L1 + 0,05) / (L2 + 0,05), wobei L1 die hellere Farbe ist. Die Werte in der Tabelle haben wir mit dieser Formel berechnet und auf zwei Nachkommastellen gerundet dargestellt; bewertet haben wir den ungerundeten Wert.

Die Orange-Zeilen zeigen einen nützlichen Trick: Wenn weiße Schrift auf einer hellen Markenfarbe nicht reicht, hilft oft dunkle Schrift auf derselben Farbe. Die Markenfarbe bleibt, nur die Schriftfarbe wechselt.

So messen Sie Kontrast

• Browser-Entwicklertools: In Chrome zeigt der Farbwähler im Elements-Bereich das Kontrastverhältnis eines Textes und ob es AA und AAA erreicht (Chrome DevTools: Kontrast). Firefox bietet Ähnliches im Barrierefreiheits-Inspektor.
• WebAIM Contrast Checker: Zwei Hex-Werte eingeben, Ergebnis für normalen und großen Text sowie Bedienelemente ablesen (webaim.org). Praktisch, um Farbschemata vor der Umsetzung zu prüfen.
• axe DevTools und Lighthouse: prüfen eine ganze Seite auf einmal (axe DevTools, Lighthouse-Barrierefreiheitsprüfung). Lighthouse nutzt dafür das axe-Regelwerk.

Warum Tools Text auf Bildern nicht beurteilen können

Ein Kontrastverhältnis braucht zwei Farben. Liegt Text auf einem Foto, gibt es Dutzende Hintergrundfarben, und sie verschieben sich je nach Bildschirmbreite. Die Dokumentation der axe-Regel color-contrast sagt ausdrücklich, dass Textelemente mit Hintergrundbild nicht gemeldet werden; auch Farbverläufe und Transparenz sind schwer zu erfassen. Prüfen Sie Banner deshalb von Hand: Pipette auf die hellste Stelle hinter dem Text setzen, beide Farben in einen Checker eingeben, und zwar in der Desktop- und in der mobilen Ansicht. Wie gut automatisierte Werkzeuge insgesamt abschneiden, zeigt ein Test des britischen Government Digital Service: Zehn Tools zusammen fanden 71 % von 143 eingebauten Barrieren, das beste einzelne Tool 41 %.

Einen ersten Überblick über Ihre eigenen Seiten bekommen Sie mit unserem kostenlosen Barrieren-Check für Shopify-Shops.

Kontrast in Shopify korrigieren

Farbschemata und Farbpaletten im Theme-Editor

In den meisten Shopify-Themes legen Sie Farben als Farbschemata in den Theme-Einstellungen an und weisen sie den Sektionen zu (Shopify-Hilfe zu Farbeinstellungen). Ein Schema bündelt Hintergrund, Text und Button-Farben. Laut Shopify nutzen neuere Themes wie Horizon ab Version 4.0.0 stattdessen Farbpaletten: benannte Markenfarben, die im ganzen Theme gelten; Sektionen und Blöcke können sie mit eigenen Farben überschreiben.

In Dawn umfasst ein Farbschema laut Theme-Code die Rollen Hintergrund, Hintergrundfarbverlauf, Text, Hintergrund und Beschriftung für durchgehende Schaltflächen, Umriss-Schaltfläche und Schatten (config/settings_schema.json). Für Sale- und Ausverkauft-Kennzeichnungen auf Produktkarten wählt Dawn jeweils ein eigenes Farbschema. So gehen Sie vor:

1. Jedes Schema einzeln prüfen: Text auf Hintergrund (4,5:1), Button-Beschriftung auf Button-Hintergrund (4,5:1), Umriss-Buttons gegen den Hintergrund (3:1 für den Rahmen, 4,5:1 für die Schrift).
2. Schemata korrigieren statt einzelne Sektionen. Eine Änderung wirkt überall, wo das Schema genutzt wird.
3. Prüfen, welches Schema die Ankündigungsleiste, die Fußzeile und die Sale-Kennzeichnung verwenden.
4. Nach jedem Theme-Update erneut prüfen, ob die Zuordnungen noch stimmen.

Text auf Bannerbildern

Dawns Sektion „Bildbanner“ hat die Einstellung Überlagerungsdeckkraft, einen Schieberegler in Zehnerschritten, der standardmäßig auf 0 steht (sections/image-banner.liquid). Eine dunkle Überlagerung von 30 bis 50 Prozent macht weiße Schrift auf hellen Fotos oft erst lesbar. Prüfen Sie das Ergebnis trotzdem mit der Pipette. Alternativ zeigt die Einstellung „Container“ den Text auf dem Desktop in einem Kasten mit eigenem Hintergrund an. Andere Themes haben ähnliche Optionen unter anderem Namen.

Kleine CSS-Korrekturen

Was sich nicht über Farbschemata einstellen lässt, etwa Platzhaltertext, können Sie mit eigenem CSS anpassen. Shopify bietet dafür im Theme-Editor das Feld Custom CSS in den Theme-Einstellungen (bis zu 1.500 Zeichen) und pro Sektion (bis zu 500 Zeichen) (Shopify-Hilfe zu Custom CSS). Ein Beispiel für dunkleren Platzhaltertext (7,00:1 auf Weiß):

input::placeholder,
textarea::placeholder {
  color: #595959;
  opacity: 1;
}

opacity: 1 ist nötig, weil manche Browser Platzhaltertext zusätzlich abschwächen. Die Regel gilt nur für Felder auf weißem oder sehr hellem Hintergrund; auf dunklen Schemata brauchen Sie einen hellen Wert. Weitere Theme-Einstellungen, die Barrieren erzeugen, behandelt der Beitrag Shopify-Theme barrierefrei einstellen.

Wie Testamur hilft

Der kostenlose Check von Testamur findet automatisch erkennbare Kontrastfehler auf Ihren Shopseiten und ordnet sie WCAG und EN 301 549 zu. Text auf Bildern und Farbe als einziges Unterscheidungsmerkmal kann er, wie jedes automatische Werkzeug, nicht verlässlich beurteilen. Die Shopify-App, die sich noch in Entwicklung befindet, soll datiert festhalten, was Sie geprüft, korrigiert und veröffentlicht haben, und die Informationen zur Barrierefreiheit entwerfen. Testamur ist kein Overlay und verändert Ihre Farben nicht.

Quellen

• W3C: Understanding Success Criterion 1.4.3 Contrast (Minimum)
• W3C: Understanding Success Criterion 1.4.11 Non-text Contrast
• W3C: Understanding Success Criterion 1.4.1 Use of Color
• W3C: WCAG 2.1, Definition relative Leuchtdichte
• Deque: axe-Regel color-contrast
• WebAIM: Contrast Checker
• Shopify Help Center: Color settings
• Shopify Help Center: Add custom CSS
• Shopify Dawn (GitHub)
• Testamur-Studie: Barrieren auf 5.463 EU-Shopify-Startseiten (HTTP Archive, 1. September 2026, mobil, nur Startseiten, automatisiert)

Prüfen Sie Ihren Shop kostenlos

Sehen Sie, welche Barrieren ein automatischer Check in Ihrem eigenen Shopify-Shop findet: die Startseite und, soweit Ihre robots.txt es erlaubt, Kollektions-, Produkt- und Rechtsseiten, zugeordnet zu WCAG und EN 301 549. Kostenlos, Ergebnis per E-Mail. Automatische Tests finden einen Teil der Barrieren, nicht alle.

Shop kostenlos prüfen

Häufige Fragen

Welcher Kontrast ist für Text im Onlineshop vorgeschrieben?

WCAG 2.1 Stufe AA verlangt mindestens 4,5:1 für normalen Text und 3:1 für großen Text. Groß ist Text ab 18 Punkt (etwa 24 CSS-Pixel) oder ab 14 Punkt fett (etwa 18,5 CSS-Pixel). Für Bedienelemente und Fokusrahmen gilt nach Kriterium 1.4.11 mindestens 3:1.

Darf ich 4,48:1 auf 4,5:1 aufrunden?

Nein. Das W3C schreibt ausdrücklich, dass die berechneten Werte nicht gerundet werden. 4,499:1 erfüllt die Schwelle von 4,5:1 nicht. Grau #777777 auf Weiß liegt mit 4,48:1 knapp darunter, #767676 mit 4,54:1 knapp darüber.

Gelten die Kontrastwerte auch für mein Logo?

Nein. Text, der Teil eines Logos oder Markennamens ist, hat nach WCAG 1.4.3 keine Kontrastanforderung. Das gilt aber nur für das Logo selbst, nicht für Navigation, Preise oder Buttons in Markenfarben.

Warum findet mein Kontrast-Checker Text auf Bannerbildern nicht?

Weil der Hintergrund ein Foto ist und keine einzelne Farbe. Das axe-Regelwerk meldet Text auf Elementen mit Hintergrundbild nicht. Solche Stellen müssen Sie von Hand prüfen, am besten an der hellsten Stelle des Bildes hinter dem Text und in der mobilen Ansicht.

Müssen ausgegraute, ausverkaufte Varianten den Kontrast erfüllen?

Text in inaktiven Bedienelementen ist von 1.4.3 ausgenommen. Die Information, dass eine Variante ausverkauft ist, sollte aber trotzdem erkennbar sein, und zwar nicht nur über eine hellere Farbe, zum Beispiel durch eine Durchstreichung oder den Zusatz „ausverkauft“.

Über den Autor

Sieghart Michielsen. Sieghart Michielsen entwickelt Testamur, eine Shopify-App, die EU-Shops auf Barrieren prüft und einen datierten Verlauf von Prüfungen, Korrekturen und Informationen zur Barrierefreiheit führt. Er schreibt diese Ratgeber anhand der Gesetzestexte, der Angaben der Behörden und öffentlicher Daten. Er ist kein Anwalt.