Sie können davon ausgehen, dass alle Farben oder Texte genauso wahrnehmen wie Sie. Die Art und Weise, wie wir Farbe wahrnehmen, kann von unserer Umgebung (schlechtes oder helles Licht) und unseren Sehfähigkeiten abhängen. Sie oder Ihre Nutzer gehören vielleicht zu den Millionen von Menschen mit Farbenblindheit oder eingeschränktem Sehvermögen.
Zur Unterstützung von Menschen mit verschiedenen Sehbehinderungen hat die Gruppe der WAI eine Farbkontrastformel entwickelt, um sicherzustellen, dass ein ausreichender Kontrast zwischen Text und Hintergrund vorhanden ist. Werden diese Farbkontrastverhältnisse eingehalten, können Menschen mit mäßig eingeschränktem Sehvermögen Text im Hintergrund ohne kontrastverbessernde Hilfstechnologien lesen.
Beachten Sie den Unterschied in den Kontrastverhältnissen in Abbildung 1.
Das Kontrastverhältnis von 4,5:1 ist das erforderliche Minimum, das in den Richtlinien für barrierefreie Webinhalte (WCAG) 2.0 festgelegt wird. Dieses Verhältnis wurde ausgewählt, weil es den Verlust der Kontrastempfindlichkeit ausgleicht, den Nutzer mit Sehverlust häufig erleben. Das entspricht etwa einem Sehvermögen von etwa 20/40.
Auch hier ist 4, 5:1 nur das Minimum. Um Nutzer mit eingeschränktem Sehvermögen oder einer anderen Farbenblindheit zu unterstützen, erfüllen Sie die Stufe AAA und erstellen Inhalte mit einem Kontrast von 7:1.
Sie können den Farbkontrast mit dem Lighthouse Accessibility Audit in den Entwicklertools prüfen.
Fortschrittlicher Algorithmus für wahrnehmbare Kontraste
Der Advanced Perceptual Contrast Algorithm (APCA) ist eine Möglichkeit, Kontraste basierend auf moderner Forschung zur Farbwahrnehmung zu berechnen.
Die APCA ist stärker kontextabhängig als die AA- und AAA-Stufen der WCAG.
In diesem Modell wird der Kontrast anhand der folgenden Merkmale berechnet:
- Räumliche Eigenschaften (Schriftstärke und Textgröße)
- Schriftfarbe (wahrgenommene Helligkeitsunterschied zwischen Text und Hintergrund)
- Kontext (Umgebungslicht, Umgebung und beabsichtigter Zweck des Textes)
Chrome beinhaltet eine experimentelle Funktion, die die Richtlinien für das AA/AAA-Kontrastverhältnis durch APCA ersetzt.
Wichtige Informationen mit mehr als Farbe vermitteln
Wenn Sie Nutzern wichtige Informationen übermitteln, sollten Sie sich beim Teilen wichtiger Informationen zusätzlich zu visuellen Hinweisen auf Text oder Alt-Text verlassen. Visuelle Hinweise sind Farben, Muster, Bilder, Schriftart und Richtungssprache.
Sie haben beispielsweise ein Kontaktformular, in dem ungültige Eingaben rot unterstrichen werden. Diese Farbanzeige sagt weder dem Screenreader noch von Nutzenden mit Farbblindheit darüber, dass etwas nicht funktioniert. Der Nutzer fragt sich möglicherweise, warum das Senden des Formulars nicht funktioniert, und gibt auf.
Achten Sie darauf, den Nutzer auf verschiedene Arten über den Fehler zu informieren. Sie können beispielsweise eine Fehlermeldung hinzufügen, um anzugeben, dass die jeweilige Eingabe ungültig ist und warum. Sie können auch Hilfetext hinzufügen, um anzugeben, wie die richtige Eingabe aussehen sollte.
Sie können die ungültige Eingabe trotzdem rot unterstreichen, solange zusätzliche nicht visuelle Hinweise vorhanden sind.
Wenn Sie auf die Verwendung von Farben in Ihrer Benutzeroberfläche angewiesen sind, können Sie Kontrastprobleme in den Chrome-Entwicklertools erkennen.
Kontrast erhöhen und Farben umkehren
Nutzern mit eingeschränktem Sehvermögen können Modi mit hohem Kontrast das Navigieren durch Inhalte auf einer Seite erleichtern. Es gibt mehrere Möglichkeiten, einen hohen Kontrast einzurichten.
Sowohl macOS als auch Windows bieten Möglichkeiten, den Kontrast im gesamten Betriebssystem zu erhöhen.
Nutzer können die Vorder- und Hintergrundfarben auch invertieren (z. B. unter macOS). Dies ist besonders nützlich für Websites und Apps, die den dunklen Modus nicht unterstützen.
Als Entwickler können Sie testen, ob die Benutzeroberfläche weiterhin sichtbar und nutzbar ist. Aktivieren Sie dazu diese Einstellungen und prüfen Sie die Nutzerfreundlichkeit manuell.
Eine Navigationsleiste kann beispielsweise eine dezente Hintergrundfarbe verwenden, um anzuzeigen, welche Seite ausgewählt ist. Wenn Sie sie im Modus mit hohem Kontrast betrachten, verschwindet diese Feinheiten vollständig und der Leser weiß damit, welche Seite aktiv ist.
Wenn Sie Kontraststufe AA oder einen höheren Kontrast erreichen, sollten Ihre Inhalte auch mit umgekehrten Farben oder hohem Kontrast wie erwartet funktionieren. Dennoch lohnt es sich, Tests durchzuführen, um sicherzustellen, dass die Nutzung wie erwartet funktioniert.