Was diese Regel prüft
Stellt sicher, dass der Kontrast zwischen Vorder- und Hintergrundfarbe den in der WCAG 2 als AA ausgewiesenen Kontrastgrenzwerten entspricht.
Warum das wichtig ist
WCAG 1.4.3 verlangt ein Kontrastverhältnis von mindestens 4.5:1 für normalen Text und 3:1 für großen Text. Blasse Preise, Badges und Banner sind für Menschen mit Sehbehinderung schwer lesbar, und bei hellem Licht für alle.
So beheben Sie es
Auf jeder Website
- Suchen Sie den Text mit zu geringem Kontrast und notieren Sie seine Text- und Hintergrundfarbe: Ein Kontrast-Checker oder die Entwicklertools Ihres Browsers zeigen beide an.
- Passen Sie die Text- oder Hintergrundfarbe im CSS Ihres Themes an, bis das Verhältnis mindestens 4.5:1 beträgt (3:1 für Text ab 24px oder ab 18,66px fett).
- Achten Sie besonders auf Sale-Badges, Platzhaltertext, Footer-Links und Buttons auf Bildern.
In Shopify
- Suchen Sie den Text mit zu geringem Kontrast und notieren Sie seine Text- und Hintergrundfarbe: Ein Kontrast-Checker oder die Entwicklertools Ihres Browsers zeigen beide an.
- Machen Sie unter Onlineshop > Themes > Anpassen > Theme-Einstellungen > Farben für das betroffene Farbschema die Textfarbe dunkler oder den Hintergrund heller, bis das Verhältnis mindestens 4.5:1 beträgt.
- Achten Sie besonders auf Sale-Badges, Platzhaltertext, Footer-Links und Buttons auf Bildern.
So prüfen Sie die Korrektur
- Führen Sie den Scan erneut aus und prüfen Sie, dass color-contrast nicht mehr erscheint.
- Prüfen Sie stichprobenartig mit einem Kontrast-Checker anhand der exakten Farben.
So findet FixReports das Problem
Unser Scan führt die axe-core-Regel color-contrast in einem echten Chrome-Browser auf jeder getesteten Seite aus und meldet jedes fehlerhafte Element mit seiner Seite, seinem Markup und, wo zutreffend, einem Screenshot.
Ein automatisierter Test bestätigt, dass genau dieses Problem vorliegt. Ob der Rest der Seite barrierefrei ist, kann er nicht beurteilen: Manche Barrieren zeigen sich erst, wenn ein Mensch die Seite prüft.