Farbkontrast

Erfahren Sie, wie wir künstliche Intelligenz für diese Regel einsetzen!

Was wir überprüfen

Stellen Sie sicher, dass der Farbkontrast zwischen Text und Hintergrund die Mindestanforderungen für das Verhältnis nach WCAG 2 AA erfüllt.

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 haben. Großer Text wird definiert als mindestens 18pt oder 14pt fett.

Beispiel nicht bestanden ❌

Beispiel bestanden ✅

Auf einen Blick

• Diese Regel hat erheblichen Einfluss auf die Nutzer
• 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 überprüft den Farbkontrast von statischen Textelementen und Text innerhalb interaktiver Elemente
• Diese Regel verwendet KI zur Erkennung von Kontrastproblemen – Ergebnisse können bei komplexen Hintergründen eine manuelle Überprüfung erfordern

Auswirkungen auf die Nutzer

Das Niveau des Farbkontrasts beeinflusst, wie leicht oder schwer es ist, Text vom Hintergrund zu unterscheiden. Wenn Text- und Hintergrundfarben zu ähnlich in der Helligkeit sind, wird der Text schwer oder gar nicht lesbar.

Dies betrifft jeden in schwach beleuchteten Umgebungen, draußen im Sonnenlicht oder bei Nutzung eines älteren Bildschirms – es ist jedoch besonders problematisch für Nutzer mit Sehbehinderungen. Was für den einen Nutzer wie ein lesbares Etikett aussieht, kann für den anderen nahezu unsichtbar erscheinen.

Bestätigung eines Farbkontrastproblems

1. Machen Sie Folgendes:
   • Öffnen Sie Ihre App in einem Simulator ODER
   • Machen Sie einen Screenshot der App auf Ihrem physischen Gerät. Senden Sie den Screenshot an sich selbst und öffnen Sie ihn auf Ihrem Computer.
2. Verwenden Sie einen Farbwähler, um:
   1. Die wahrste Farbe des Textelements zu erhalten.
   2. Die wahrste Farbe jeder unterschiedlichen Hintergrundfarbe hinter dem Text zu erhalten.
3. Geben Sie jede Farbe in den Deque Color Palette Contrast Checker ein.
4. Sie werden eines der folgenden Ergebnisse finden:
   • Zugänglich: Das Farbkontrastverhältnis erfüllt das erforderliche Minimum für seine Textgröße.
   • Unzugänglich: Das Farbkontrastverhältnis erfüllt nicht das erforderliche 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 ernsthaften Einfluss für Benutzer. Angemessener Farbkontrast ist eine WCAG AA-Anforderung, daher sollte dies eine Priorität haben. In seltenen Fällen kann es akzeptabel sein, diese Regel zu ignorieren – zum Beispiel, wenn 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 auf einem Hintergrund mit vielen Farben sitzt, wie zum Beispiel einem Farbverlauf, Bild oder halbtransparentem Hintergrund. Wenn Sie glauben, dass ein Befund falsch ist, verwenden Sie den Deque Color Contrast Analyzer, um das Verhältnis zwischen den Text- und Hintergrundfarben zu bestätigen.
• Die Farbkontrastregel nutzt Apples Vision Framework (Optical Character Recognition, oder OCR), um Text innerhalb der Grenzen eines Elements zu lesen. OCR kann gelegentlich kleine symbolsartige Glyphen – wie Rückwärtspfeile (<), Aufzählungszeichen, dekorative Symbole – fälschlicherweise als Text identifizieren. Wenn das passiert, wird die Farbkontrastregel auf ein Element angewendet, das keinen lesbaren Text enthält, was zu einem Ergebnis für eine Schaltfläche nur mit Symbol führen kann. Da die OCR-Ausgabe nicht deterministisch über Scans hinweg ist, kann dasselbe Element in einem Scan im Farbkontrastergebnis erscheinen und im nächsten als „NICHT ZUTREFFEND“ gemeldet werden. Dies ist eine bekannte Eigenschaft von OCR, kein Fehler in der Regel. Um dieses Problem zu umgehen, können Sie die ignore APIs verwenden, um Farbkontrastergebnisse für die betroffenen Elemente zu unterdrücken. Erfahren Sie mehr über Regeln ignorieren.

Ressourcen

Deque University Kursseiten

• SC 1.4.3 Kontrast (Minimum)
• Farbe
• Kontrast

Hinweis: Der vollständige Zugriff auf die Ressourcen der Deque University erfordert ein Abonnement.

Andere Ressourcen

• WCAG Technik G18: Sicherstellen, dass ein Kontrastverhältnis von mindestens 4,5:1 zwischen Text (und Textabbildungen) und dem Hintergrund hinter dem Text besteht
• W3C Verständnis für Erfüllungskriterium 1.4.3: Kontrast (Minimum)