Wenn Sie ein gutes Sehvermögen haben, könnten Sie davon ausgehen, dass alle die Farben oder die Lesbarkeit von Texten genauso wahrnehmen wie Sie. Das stimmt natürlich nicht. Wie Sie sich vorstellen können, sind einige Farbkombinationen, die manche Menschen gut lesen können, für andere schwierig oder unmöglich. Dies wird normalerweise durch den Farbkontrast verursacht, also das Verhältnis zwischen der Helligkeit der Vorder- und Hintergrundfarben. Wenn die Farben ähnlich sind, ist das Kontrastverhältnis niedrig. Bei unterschiedlicheren Farben ist das Kontrastverhältnis höher.
In den WebAIM-Richtlinien wird ein AA-Kontrastverhältnis (Minimum) von 4,5:1 für den gesamten Text empfohlen. Es gibt Ausnahmen für sehr großen Text (120–150% größer als der Standardtext), bei dem das Verhältnis auf 3:1 verringert werden kann. Beachten Sie die Unterschiede in den Kontrastverhältnissen, die hier gezeigt werden:
Für die Stufe AA wurde das Kontrastverhältnis von 4,5:1 ausgewählt, da es den Verlust der Kontrastempfindlichkeit ausgleicht, den Nutzer mit einem Sehverlust in der Regel von etwa 20/40 sehen. Bei 80-Jährigen liegt die typische Sehschärfe bei 20/40. Für Nutzer mit Seh- oder Farbschwächen können wir den Kontrast im Text um bis zu 7:1 erhöhen.
Mit der Prüfung der Barrierefreiheit in Lighthouse können Sie den Farbkontrast prüfen. So erstellen Sie den Bericht:
- Öffnen Sie die Entwicklertools.
- Klicken Sie auf Audits.
- Wählen Sie Bedienungshilfen aus.
Chrome enthält auch eine experimentelle Funktion, mit der Sie den gesamten Text mit niedrigem Kontrast auf Ihrer Seite erkennen können. Sie können auch zugängliche Farbvorschläge verwenden, um den Text mit niedrigem Kontrast zu korrigieren.
Wenn Sie einen umfassenderen Bericht erhalten möchten, installieren Sie die Erweiterung „Accessibility Insights“. Die Fastpass-Berichte enthalten Details zu allen Elementen, die die Farbkontrastprüfung nicht bestehen.
Advanced Perceptual Contrast Algorithm (APCA)
Der Advanced Perceptual Contrast Algorithm (APCA) ist eine neue Möglichkeit zur Berechnung von Kontrasten, die auf moderner Forschung zur Farbwahrnehmung basiert.
Im Vergleich zu den AA- und AAA-Richtlinien ist APCA stärker kontextabhängig.
Der Kontrast wird 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.
Informationen nicht nur durch Farben vermitteln
Es gibt weltweit etwa 320 Millionen Menschen mit Farbblindheit. Etwa 1 von 12 Männern und 1 von 200 Frauen ist in irgendeiner Form farbenblind. Das bedeutet, dass etwa 5 % der Nutzer Ihre Website nicht wie vorgesehen nutzen werden. Wenn Farben zur Vermittlung von Informationen genutzt werden, wird diese Zahl inakzeptabel.
Beispielsweise kann eine Telefonnummer in einem Eingabeformular rot unterstrichen werden, um anzuzeigen, dass sie ungültig ist. Nutzern mit Farbmangel oder Screenreadern werden diese Informationen schlecht oder gar nicht vermittelt. Aus diesem Grund sollten Sie dem Nutzer immer mehrere Möglichkeiten bieten, auf wichtige Informationen zuzugreifen.
Die WebAIM-Checkliste besagt in Abschnitt 1.4.1, dass „Farbe nicht als einzige Methode verwendet werden sollte, um Inhalte zu vermitteln oder visuelle Elemente zu unterscheiden.“ Außerdem wird darauf hingewiesen, dass „Farbe allein“ nicht verwendet werden sollte, um Links vom umgebenden Text zu unterscheiden, es sei denn, sie erfüllen bestimmte Kontrastanforderungen. Stattdessen wird in der Checkliste empfohlen, mithilfe der CSS-Eigenschaft text-decoration einen zusätzlichen Indikator wie einen Unterstrich hinzuzufügen, um anzugeben, wann der Link aktiv ist.
Eine grundlegende Möglichkeit zur Behebung des vorherigen Beispiels besteht darin, dem Feld eine zusätzliche Nachricht hinzuzufügen, in der Sie darüber informiert werden, dass es ungültig ist und warum.
Wenn Sie eine App erstellen, sollten Sie diese Dinge im Hinterkopf behalten und achten Sie auf Bereiche, in denen Sie möglicherweise zu stark auf Farben angewiesen sind, um wichtige Informationen zu vermitteln.
Wenn du wissen möchtest, wie deine Website für verschiedene Personen aussieht, oder wenn du in erster Linie auf die Verwendung von Farben in deiner Benutzeroberfläche angewiesen bist, kannst du mit den Entwicklertools verschiedene Formen von Sehbeeinträchtigung simulieren. Chrome bietet die Funktion „Sehschwächen emulieren“. Wenn du darauf zugreifen möchtest, öffne die Entwicklertools und dann den Tab Rendering in der Leiste. Dort können Sie die folgenden Farbmängel emulieren:
- Protanopie: die Unfähigkeit, rotes Licht wahrzunehmen.
- Deuteranopie: die Unfähigkeit, jedes grüne Licht wahrzunehmen.
- Tritanopie: die Unfähigkeit, blaues Licht wahrzunehmen.
- Achromatopsie: die Unfähigkeit, jede Farbe mit Ausnahme von Grautönen wahrzunehmen (sehr selten).
Modus mit hohem Kontrast
Im Modus mit hohem Kontrast können Nutzer die Vorder- und Hintergrundfarben umkehren. Dadurch hebt sich Text häufig besser ab. Für Personen mit einer Sehbeeinträchtigung kann der Modus mit hohem Kontrast die Navigation durch die Inhalte auf der Seite erheblich erleichtern. Es gibt mehrere Möglichkeiten, auf Ihrem Gerät einen Kontrast mit hohem Kontrast einzurichten:
Betriebssysteme wie Mac OSX und Windows bieten Modi mit hohem Kontrast, die für alles auf Systemebene aktiviert werden können.
Es kann hilfreich sein, Einstellungen mit hohem Kontrast zu aktivieren und zu prüfen, ob die gesamte UI in Ihrer App noch sichtbar und nutzbar ist.
Eine Navigationsleiste kann beispielsweise eine dezente Hintergrundfarbe verwenden, um anzuzeigen, welche Seite ausgewählt ist. Wenn Sie sie in einer Erweiterung mit hohem Kontrast betrachten, verschwindet diese Feinheiten vollständig und der Leser weiß damit auch, welche Seite aktiv ist.
Ebenso kann im Beispiel oben die rot unterstrichene rot unterstrichene Telefonnummer in einer schwer zu unterscheidenden Blau-Grün-Farbe angezeigt werden.
Wenn Sie die zuvor beschriebenen Kontrastverhältnisse erreichen, sollten Sie den Modus mit hohem Kontrast unterstützen können. Sie können jedoch die Chrome-Erweiterung mit hohem Kontrast installieren und noch einmal überprüfen, ob alles wie erwartet funktioniert und aussieht.