4️⃣ 1.4.6 - Kontrast (erhöht)
AAA 2.1
Umsetzung, Design
Ziel
Sicherstellen, dass Textinhalte auch für Personen mit starken Sehschwächen durch erhöhten Kontrast zwischen Text und Hintergrund lesbar sind.
Beschreibung
- Erreichen eines Kontrastverhältnisses von mindestens 7:1 zwischen Text und Hintergrund.
- Für großformatigen Text (mindestens 18 Punkt normal oder 14 Punkt fett) reicht ein Kontrastverhältnis von 4,5:1.
- Keine Kontrastanforderung für inaktive, dekorative oder unsichtbare Textelemente.
- Logos und Markennamen sind von der Kontrastanforderung ausgenommen.
Anforderungen
- Verwendung kontrastreicher Farbkombinationen mit einem Verhältnis von mindestens 7:1 für Standardtext.
- Sicherstellen eines Verhältnisses von mindestens 4,5:1 für großformatigen Text.
- Kontrastprüfung unter Berücksichtigung von Farbsehschwächen.
- Keine Verwendung von Farbkombinationen, die von Farbsehschwächen stark beeinträchtigt werden (z. B. Rot auf Schwarz).
- Einsatz von CSS, um Text- und Hintergrundfarben mit ausreichendem Kontrast zu definieren.
- Verwendung von Tools zur automatischen Kontrastüberprüfung während der Entwicklung.
- Implementierung eines Kontrastmodus, der von Nutzern aktiviert werden kann.
- Vermeidung von Hintergrundbildern, die den Textkontrast reduzieren
- Konsistente Anwendung der festgelegten Farbkonzepte auf allen Textinhalten.
- Sicherstellen, dass Links und interaktive Textelemente korrekt ausgezeichnet werden.
- Durchführung automatisierter und manueller Kontrasttests (z. B. mithilfe des WAVE-Tools oder Lighthouse).
- Validierung, dass alle Textelemente die definierten Kontrastverhältnisse erfüllen.
- Sicherstellung, dass der erhöhte Kontrast auf verschiedenen Endgeräten und Browsern konsistent angezeigt wird.