Kontraste im Onlineshop: Welche Werte Texte und Buttons brauchen

Gemeint ist der Helligkeitsunterschied zwischen Text und Hintergrund. Er wird als Verhältnis angegeben: von 1:1 (gleiche Farbe, unsichtbar) bis 21:1 (Schwarz auf Weiß). Je höher der Wert, desto leichter ist ein Text zu lesen.

Die Farbe allein sagt dabei wenig. Ein kräftiges Grün kann auf Weiß zu hell sein, ein blasses Grau auf Dunkelblau dagegen gut lesbar.

Die Web-Richtlinien WCAG nennen auf Stufe AA diese Mindestwerte:

• Streichpreise und Grundpreise in hellem Grau
• Sale- und „Neu“-Badges mit weißer Schrift auf Rot, Rosa oder Orange
• Buttons in einer hellen Markenfarbe mit weißer Schrift
• Platzhaltertext in Formularfeldern, der als einzige Beschriftung dient
• Text auf Fotos, etwa im Banner der Startseite
• Kleine graue Links in der Fußzeile
• Rahmen von Eingabefeldern, die sich kaum vom Hintergrund abheben

1. 1

   Schritt 1: Farbwerte herausfinden

   Die Farben stehen in den Theme-Einstellungen Ihres Shops, meist als Hex-Wert wie #6B7280.

2. 2

   Schritt 2: Kontrast berechnen

   Geben Sie Text- und Hintergrundfarbe in einen Kontrastrechner ein, zum Beispiel den kostenlosen Contrast Checker von WebAIM (englisch). Er zeigt sofort, ob der Wert für normalen und großen Text reicht.

3. 3

   Schritt 3: Ganze Seiten prüfen

   Einzelne Farben prüfen Sie so schnell. Für alle Texte auf allen Seiten ist ein automatischer Test praktischer: Er misst jede Textstelle, auch dort, wo Sie nicht an Kontrast denken würden.

• Shopify

  Onlineshop→, dann Themes→, dann Anpassen→, dann Theme-Einstellungen→, dann Farben

  Text- und Hintergrundfarben der Farbschemata anpassen.

• WooCommerce

  Design → Customizer → Farben bzw. bei Block-Themes Design → Editor → Stile → Farben. Eigene Farben ggf. unter „Zusätzliches CSS“ prüfen.

• Shopware

  Inhalte→, dann Themes→, dann Ihr Theme→, dann Farben

  Primär-, Text- und Hintergrundfarben anpassen. Farben in Erlebniswelten separat prüfen.

Ändern Sie die Farbe möglichst zentral im Theme statt an jeder einzelnen Stelle. Dann gilt der neue Wert überall – auch auf Seiten, die Sie später anlegen.