Farbkontrast

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 die Mindestanforderungen für das Verhältnis nach WCAG 2 AA erfüllt.

Laut WCAG 2.0 1.4.3 AAmuss 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 ist 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-Farbpaletten-Kontrastprüferein.
4. Sie werden eines der folgenden Ergebnisse finden:
   • Barrierefrei: Das Farbkontrastverhältnis erfüllt die erforderlichen Mindestanforderungen für seine Textgröße.
   • Nicht barrierefrei: Das Farbkontrastverhältnis erfüllt nicht die erforderlichen Mindestanforderungen für seine Textgröße.

Probleme beheben

Farbkontrastprobleme treten auf, wenn die Textfarbe und die Hintergrundfarbe zu ähnlich in der Helligkeit 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 einen ernsthaften Einfluss auf die Nutzer. Ein angemessener Farbkontrast ist eine Anforderung der WCAG AA, 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 vor einem Hintergrund mit vielen Farben steht, wie z.B. einem Farbverlauf, einem Bild oder einem halbtransparenten Hintergrund. Wenn Sie der Meinung sind, dass ein Ergebnis falsch ist, verwenden Sie den Deque Color Contrast Analyzer , um das Verhältnis zwischen Text- und Hintergrundfarben zu bestätigen.
• Die Farbkontrastregel verwendet Apples Vision-Framework (Optical Character Recognition oder OCR), um Text innerhalb der Grenzen eines Elements zu erkennen. OCR kann gelegentlich kleine, symbolartige Glyphen - wie Rückwärtspfeil-Chevrons (<), Aufzählungszeichen, dekorative Symbole - fälschlicherweise als Text identifizieren. Wenn dies geschieht, wird die Farbkontrastregel auf ein Element angewendet, das keinen lesbaren Text enthält, was zu einem Ergebnis für eine Schaltfläche mit nur einem Icon führen kann. Da die OCR-Ausgabe bei unterschiedlichen Scans nicht deterministisch ist, kann dasselbe Element in einem Scan in den Farbkontrastergebnissen erscheinen und im nächsten als „UNANWENDBAR“ 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 die 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 Bildern von Text) und dem Hintergrund hinter dem Text besteht
• W3C-Verständnis der Erfolgskriterien 1.4.3: Kontrast (Minimum)