Zu geringer Farbkontrast
SeriousWCAG criterion 1.4.3BFSG-relevant
What is the problem?
Text und Hintergrund unterscheiden sich farblich zu wenig. Menschen mit Sehschwäche oder bei ungünstigem Licht (z. B. Sonne auf dem Smartphone) können den Text schlecht oder gar nicht lesen. Betroffen sind oft helle Grautöne auf Weiß oder farbige Buttons.
Why does it matter?
WCAG 2.1 Erfolgskriterium 1.4.3 (Kontrast Minimum, Stufe AA) fordert ein Kontrastverhältnis von mindestens 4,5:1 für normalen und 3:1 für großen Text. Unzureichender Kontrast ist einer der am häufigsten automatisiert erkannten Mängel und für die BFSG-Bewertung relevant.
How to fix it
Erhöhe den Kontrast zwischen Text- und Hintergrundfarbe auf mindestens 4,5:1 (normaler Text) bzw. 3:1 (großer Text ab ca. 24 px). Prüfe Farbwerte mit einem Kontrast-Rechner (z. B. WebAIM Contrast Checker) und dunkle die Textfarbe ab oder helle den Hintergrund auf — häufigste Kandidaten: hellgraue Texte, Platzhalter, Buttons in Markenfarbe.
Shopware
Erscheinungsbild → Theme-Konfiguration: Primär-/Textfarben anpassen. Reichen die Theme-Optionen nicht, im Theme-Child per SCSS-Variablen ($sw-color-…) oder CSS-Override die betroffenen Selektoren mit kontrastreicheren Farben versehen.
WooCommerce
Design → Customizer → Farben (je nach Theme): Text- und Hintergrundfarben anpassen. Für einzelne Elemente: zusätzliches CSS im Customizer („Zusätzliches CSS“) mit den betroffenen Selektoren und dunkleren Farbwerten.
Shopify
Theme-Editor → Theme-Einstellungen → Farben: Text-, Akzent- und Hintergrundfarben mit ausreichendem Kontrast wählen. Bei hartkodierten Farben in Sektionen das jeweilige Farbschema der Sektion umstellen oder im Code-Editor die CSS-Variablen anpassen.
WordPress
Website-Editor → Stile → Farben (Block-Themes) bzw. Customizer → Farben: kontrastreichere Palette wählen. Punktuell per „Zusätzliches CSS“ nachschärfen. Viele Themes bieten geprüfte Farbpaletten — im Zweifel die Standard-Palette des Themes nutzen.
TYPO3
Farben liegen im Site-Package (SCSS/CSS). Die betroffenen Variablen (z. B. $body-color, Button-Farben) anpassen und neu builden. Bei TypoScript-basierten Themes die Konstanten im Constant-Editor prüfen.
Is your website affected?
The free quick check tests up to 5 pages within minutes — no registration.
Start a free quick check