# Elemente müssen einen ausreichenden Farbkontrast haben

<https://www.fixreports.com/de/issues/color-contrast>

WCAG 1.4.3 Kontrast (Minimum) · Stufe AA

Manche Texte heben sich nicht genug von ihrem Hintergrund ab, um von Menschen mit Sehbehinderung gelesen werden zu können.

## 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
1. 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.
2. 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).
3. Achten Sie besonders auf Sale-Badges, Platzhaltertext, Footer-Links und Buttons auf Bildern.

### In Shopify
1. 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.
2. 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.
3. Achten Sie besonders auf Sale-Badges, Platzhaltertext, Footer-Links und Buttons auf Bildern.

### In WooCommerce und WordPress
1. 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.
2. 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).
3. 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.

## Quellen
- Dokumentation der axe-core-Regel (Deque): https://dequeuniversity.com/rules/axe/4.13/color-contrast
- Erläuterungen zu WCAG 1.4.3 (W3C): https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum