Farbkontrast
Stellen Sie sicher, dass der Text für alle Benutzer lesbar ist
Erfahren Sie, wie wir künstliche Intelligenz für diese Regel nutzen!
Was wir überprüfen
Stellen Sie sicher, dass der Farbkontrast zwischen Text und Hintergrund den Mindestanforderungen im WCAG 2 AA Verhältnis entspricht.
Laut WCAG 2.0 1.4.3 AA muss die visuelle Darstellung von Text ein Kontrastverhältnis von mindestens 4,5:1 für normalen Text und 3:1 für großen Text aufweisen. Großer Text wird als mindestens 18pt oder 14pt fett definiert.
Fehlerhaftes Beispiel ❌
Das Kontrastverhältnis liegt unter dem Minimum von 4,5:1 für normalen Text und 3:1 für großen Text
Text ist schwer vom Hintergrund zu unterscheiden
Benutzer mit Sehschwäche können diesen Text möglicherweise nicht lesen
Gültiges Beispiel ✅
Das Kontrastverhältnis entspricht oder übersteigt das Minimum von 4,5:1 für normalen Text
Text ist deutlich vom Hintergrund unterscheidbar
Benutzer mit Sehschwäche können diesen Text problemlos lesen
Auf einen Blick
- Diese Regel hat erhebliche Auswirkungen für die Benutzer
- Normaler Text muss ein Kontrastverhältnis von mindestens 4,5:1 gegen seinen Hintergrund haben
- Großer Text (mindestens 18pt oder 14pt fett) muss ein Kontrastverhältnis von mindestens 3:1 haben
- Diese Regel prüft den Farbkontrast von statischen Textelementen und Text innerhalb von interaktiven Elementen
- Diese Regel verwendet KI, um Kontrastprobleme zu erkennen – Ergebnisse müssen möglicherweise manuell bei komplexen Hintergründen geprüft werden
Auswirkungen auf Benutzer
Das Maß des Farbkontrastes beeinflusst, wie einfach oder schwer es ist, Text von seinem Hintergrund zu unterscheiden. Wenn sich Text- und Hintergrundfarben zu ähnlich in Helligkeit sind, wird der Text schwer lesbar oder unlesbar.
Dies betrifft jeden in schwach beleuchteten Umgebungen, im Freien bei Sonnenlicht oder mit einem älteren Bildschirm – es ist jedoch ein besonderes Problem für Benutzer mit Sehschwäche. Was für einen Benutzer wie ein lesbares Etikett aussieht, kann für einen anderen als nahezu unsichtbare Unschärfe erscheinen.
Farbkontrast-Problematik bestätigen
- Führen Sie eine der folgenden Maßnahmen durch:
- Öffnen Sie Ihre App in einem Emulator, ODER
- Machen Sie einen Screenshot der App auf Ihrem physischen Gerät. Senden Sie sich den Screenshot und öffnen Sie ihn auf Ihrem Computer.
- Verwenden Sie einen Farbwähler, um:
- Die exakte Farbe des Textelements zu ermitteln.
- Die exakte Farbe jeder unterschiedlichen Hintergrundfarbe hinter dem Text zu ermitteln.
- Geben Sie jede Farbe in den Deque Color Palette Contrast Checker ein.
- Sie werden eines der folgenden Ergebnisse finden:
- Barrierefrei: Das Farbkontrastverhältnis entspricht dem erforderlichen Minimum für seine Textgröße.
- Nicht barrierefrei: Das Farbkontrastverhältnis entspricht nicht dem erforderlichen Minimum für seine Textgröße.
Probleme beheben
Farbkontrastprobleme treten auf, wenn die Textfarbe und die Hintergrundfarbe in der Helligkeit zu ähnlich sind. Um das Problem zu beheben, verwenden Sie Deque's Color Contrast Analyzer, um Farben zu finden, die das erforderliche Minimum basierend auf der Textgröße erfüllen. Passen Sie entweder die Textfarbe oder die Hintergrundfarbe an, bis das erforderliche Kontrastverhältnis erreicht ist.
Kann ich diese Regel ignorieren?
Farbkontrast hat eine Erhebliche Auswirkungen für Benutzer. Angemessener Farbkontrast ist eine WCAG AA-Anforderung, daher sollte dies eine vorrangige Korrektur sein. In seltenen Fällen kann es akzeptabel sein, diese Regel zu ignorieren – zum Beispiel, wenn der Text rein dekorativ ist und keine Informationen vermittelt. Erfahren Sie mehr über Regeln ignorieren.
Häufig gestellte Fragen
Gibt es bekannte Einschränkungen bei dieser Regel?
Ja. Diese Regel kann ungenaue Ergebnisse liefern, wenn Text sich auf einem Hintergrund mit vielen Farben befindet, wie zum Beispiel einem Farbverlauf, Bild oder halbdurchsichtigen Hintergrund. Wenn Sie glauben, dass ein Befund falsch ist, verwenden Sie den Deque Color Contrast Checker, um das Verhältnis zwischen den Text- und Hintergrundfarben zu bestätigen.
Ressourcen
Deque University Kursseiten
Hinweis: Voller Zugriff auf die Deque University-Ressourcen erfordert ein Abonnement.