1.4.3 - Kontrast (Minimum)
AA 2.0
Design
Sicherstellen, dass Texte und Bilder von Text einen ausreichenden Kontrast zum Hintergrund aufweisen, um die Lesbarkeit für Menschen mit eingeschränktem Sehvermögen zu gewährleisten.
Beschreibung
Abschnitt betitelt „Beschreibung“- Text und Textbilder müssen ein Kontrastverhältnis von mindestens 4,5:1 zwischen Vordergrund- und Hintergrundfarbe aufweisen.
- Ausnahmen:
- Großer Text: Mindestkontrast von 3:1 für Texte ab 18pt (oder 14pt fett) und deren Bilder.
- Nebensächlicher Text: Dekorative, inaktive oder unsichtbare Texte sowie Texte innerhalb von Bildern, die primär andere visuelle Inhalte darstellen, sind ausgenommen.
- Logotypen: Text als Bestandteil von Logos oder Markennamen unterliegt keinen Kontrastanforderungen.
Anforderungen
Abschnitt betitelt „Anforderungen“- Farben mit ausreichendem Kontrast in der Gestaltung verwenden, insbesondere für Textelemente, Buttons und Links.
- Farbpaletten berücksichtigen, die auch bei Farbfehlsichtigkeit gut lesbar sind.
- Kontrasttests während der Gestaltung durchführen, um die Anforderungen zu erfüllen.
- Für große Schriftarten, ab 18 px oder 14 px fett, ein Kontrastverhältnis von mindestens 3:1 gewährleisten.
- Sicherstellen, dass die HTML- und CSS-Farbdefinitionen ein Kontrastverhältnis von mindestens 4,5:1 aufweisen.
- Verwendung von Tools wie Farbmessern oder automatisierten Test-Tools zur Überprüfung von Kontrastwerten.
- Texte auf komplexen Hintergrundbildern so platzieren, dass ausreichender Kontrast gegeben ist (z. B. durch Überlagerung mit einem Farbfilter).
- Bei der Einbindung von Bildern von Text sicherstellen, dass diese die Kontrastanforderungen erfüllen.
- Überprüfung aller Text- und Hintergrundfarben mit Kontrastanalysetools.
- Manuelle Tests bei Texten auf grafischen Hintergründen durchführen, um sicherzustellen, dass der Kontrast ausreicht.
- Validierung der Kontrastverhältnisse in unterschiedlichen Anzeigegeräten und Bildschirmauflösungen.
Code-Beispiele
Abschnitt betitelt „Code-Beispiele“Beispiel für Text mit ausreichendem Kontrast:
Abschnitt betitelt „Beispiel für Text mit ausreichendem Kontrast:“<p style="color: #000000; background-color: #FFFFFF;">Schwarzer Text auf weißem Hintergrund (Kontrastverhältnis 21:1).</p>