1. Einführung
Schlechter Kontrast ist das häufigste Problem im Bereich der Barrierefreiheit im Web. Sehen wir uns an, wie DevTools Ihnen helfen kann, Probleme zu erkennen, zu finden und zu beheben.
Lerninhalte
- Problem mit geringem Kontrast
- So findest du Text mit geringem Kontrast
- Text mit geringem Kontrast beheben
Voraussetzungen
- Ein funktionierender Computer und WLAN
- Chrome 87 und höher.
Vorgehensweise
Sie beheben Probleme mit geringem Kontrast auf einer Webseite.
2. Einstieg
Klicken Sie auf den folgenden Link, um die Seite mit Texten mit geringem Kontrast zu öffnen:
Öffnen Sie dann auf der Seite die Chrome-Entwicklertools.
3. Problem mit geringem Kontrast
Etwa 1 von 20 Personen leidet unter einer Sehschwäche und ist auch weniger bekannt als „Farbblindheit“. Solche Beeinträchtigungen erschweren es, verschiedene Farben von anderen zu unterscheiden, was zu Kontrastproblemen führen kann.
Als Entwickler mit normaler Sicht sehen Sie z. B., dass der Text auf der Seite visuell in Ordnung ist.
Möglicherweise können Sie Text mit geringem Kontrast weiterhin lesen, aber Menschen mit Sehbehinderung haben dieses Privileg nicht.
Mit den Entwicklertools können Sie Beeinträchtigungen des Sehvermögens verstehen, indem Sie es Probleme mit dem Sehvermögen in Ihrer Webanwendung simulieren.
Öffnen Sie das Befehlsmenü. Beginnen Sie mit der Eingabe von Rendering und wählen Sie Show Rendering aus. Scrollen Sie auf dem Tab Rendering nach unten zur Option Emulation der Sehschwäche.
Entwicklertools können scharfes und folgende Arten von Farbsehschwächen emulieren:
- Protanopie: die Unmöglichkeit, ein rotes Licht zu erkennen.
- Deuteranopie: Die Unmöglichkeit, grünes Licht zu erkennen.
- Tritanopia: die Unmöglichkeit, blaues Licht zu erkennen.
- Achromatopsie: die Unmöglichkeit, eine beliebige Farbe außer Grautönen zu sehen (äußerst selten).
Wählen Sie andere Optionen aus und erleben Sie die Seite selbst. Probiere zum Beispiel Protanopie aus. Der Farbkontrast des Textes ist nun noch schlechter – er ist fast nicht mehr lesbar.
4. So findest du Text mit geringem Kontrast
Es gibt mehrere Möglichkeiten, Text mit geringem Kontrast zu erkennen.
Kurzinfo für den Prüfmodus
Die Kontrastangabe für Textelemente wird im oberen Bereich der Kurzinfo angezeigt.
Wenn Sie zum Beispiel links oben in den Entwicklertools auf das Symbol Untersuchen klicken, wird das Wort prüfen. Das Kontrastverhältnis des Textes wird in der Kurzinfo angezeigt. Das Ausrufezeichen neben dem Verhältnis gibt an, dass das Kontrastverhältnis gering ist.
.
Kontrastverhältnis in der Farbauswahl
Das Kontrastverhältnis können Sie auch über die Farbauswahl ansehen.
Prüfen Sie das Wort „&t“. Klicken Sie im Bereich Stile auf die Farbvorschau der CSS-Property color. Das Kontrastverhältnis wird in der Farbauswahl angezeigt. Das rote Symbol zum Verbot zeigt an, dass das Kontrastverhältnis niedrig ist.
.
[Experimentell] Probleme mit dem gesamten Seitenkontrast können Sie über den Bereich CSS-Übersicht erkennen.
Es ist mühsam, jedes Element auf der Seite durchzugehen, um das Kontrastverhältnis zu ermitteln. Im Bereich CSS-Übersicht können Sie alle Texte mit geringem Kontrast auf Ihrer Seite erkennen.
Scrollen Sie nach der Erfassung der CSS-Übersicht nach unten zum Bereich Farben, um sich alle Kontrastprobleme anzusehen. Klicken Sie auf eine der Farben, z. B. auf den gelben Hintergrund mit Limettentext, und in den Entwicklertools wird eine Liste der Elemente mit dem Problem angezeigt. Klicken Sie auf ein Element in der Liste, um es im Steuerfeld Elemente zu öffnen.
5. Text mit geringem Kontrast beheben
Entwicklertools für Text mit geringem Kontrast
Empfohlene Kontrastlinie
Prüfen Sie das Wort „&t“. Klicken Sie im Bereich Stile auf die Farbvorschau der CSS-Property color. Maximieren Sie den Bereich Kontrastverhältnis.
Die Entwicklertools bieten AA- und AAA-Farbverhältnis:
- AA: Farbkontrast entspricht der Mindestempfehlung.
- AAA: Der Farbkontrast entspricht der erweiterten Empfehlung.
In unserem Beispiel erscheint in der visuellen Auswahl oben in der Farbauswahl zwei Linien. Ausgehend von der obersten Ebene, lässt sich die Struktur wie folgt beschreiben:
- 1. Zeile: AA. Wählen Sie eine beliebige Farbe unter dieser Zeile aus, um die Mindestempfehlung zu erfüllen.
- Zweite Zeile: AAA Wählen Sie eine beliebige Farbe unter dieser Zeile aus, um die erweiterte Empfehlung einzuhalten.
Klicken Sie manuell auf die Farbe und korrigieren Sie sie.
- Ein Häkchen bedeutet, dass das Element die Mindestempfehlungen erfüllt.
- 2 Häkchen bedeutet, dass die erweiterte Empfehlung erfüllt ist.
.
Farbvorschläge
Außerdem werden in DevTools Vorschläge für barrierefreie Farben sowohl für die AA- als auch für die AAA vorgeschlagen. Das macht es Ihnen einfacher, darauf zu klicken und Probleme zu beheben.
Klicken Sie neben dem Kontrastverhältnis auf die vorgeschlagene Farbe, um die Textfarbe zu korrigieren.
.
Jetzt können Sie alle Texte mit geringem Kontrast auf der Seite korrigieren und die CSS-Übersicht noch einmal erfassen, um zu sehen, ob alle Kontraste behoben sind.
6. Glückwunsch!
Glückwunsch! Du hast dieses Codelab erfolgreich abgeschlossen.