Die Lesbarkeit Ihrer Website verbessern

Sofia Emelianova

Wichtiger Hinweis:Text mit niedrigem Kontrast ist das größte Problem hinsichtlich der Barrierefreiheit im Web. Im Februar 2022 trat dieses Problem bei 83, 9% der Millionen Startseiten auf. Weitere Informationen findest du im WebAIM Million 2022-Bericht.

Texte mit geringem Kontrast machen Ihre Website für alle Nutzer weniger gut lesbar, insbesondere für Nutzer mit Sehbeeinträchtigungen. Die Entwicklertools können automatisch Probleme mit niedrigem Kontrast finden und bessere Farben vorschlagen, um sie zu beheben.

Mit den Entwicklertools können Sie:

• Kontrastprobleme: Eine Liste aller Probleme finden Sie im Bereich CSS-Übersicht, in der Vorabversion auf dem Tab Probleme oder in einem Lighthouse-Bericht.
• Kontrastprobleme beheben Sehen Sie sich die Probleme mit einer Kurzinfo im Prüftool an und wählen Sie Farben aus, die in der Farbauswahl vorgeschlagen werden, um das Kontrastverhältnis zu korrigieren.
• Sehschwäche emulieren: Betrachten Sie Ihre Website so, wie Ihre Nutzer sie sehen.

Kontrastarmer Text

So erkennen Sie Text mit geringem Kontrast:

1. Öffnen Sie die Entwicklertools auf Ihrer Seite. Für diese Anleitung können Sie diese Demoseite verwenden.

2. Eine Liste aller Kontrastprobleme können Sie in einem der drei Felder abrufen:

   • Preisvergleichsportal-Übersicht
   • (Vorschau) Probleme
   • Leuchtturm

Kontrastprobleme im Bereich „CSS-Übersicht“

So verschaffen Sie sich einen Überblick:

1. Öffnen Sie die CSS-Übersicht.
2. Erstellen Sie einen Überblick.
3. Öffnen Sie den Bereich Farben, scrollen Sie zu Kontrastprobleme und klicken Sie auf ein Problem, falls vorhanden.

4. Bewege den Mauszeiger in der Tabelle Kontrastprobleme auf ein Element und klicke auf den Link daneben.

   

5. Beheben Sie das Problem wie im Abschnitt Text mit geringem Kontrast beheben beschrieben.

(Vorschau) Kontrastprobleme auf dem Tab „Probleme“

Hinweis:Dies ist eine Funktion in der Vorabversion, die standardmäßig deaktiviert ist.

So rufen Sie eine Liste der Probleme ab:

1. Aktivieren Sie auf dem Tab Probleme die Berichterstellung zu Kontrastproblemen:
   1. Öffnen Sie Einstellungen > Experimentell.
   2. Suchen Sie in der Filterleiste nach „contrast issue“.
   3. Klicken Sie auf das Kästchen Automatische Meldung von Kontrastproblemen über den Bereich „Probleme“ aktivieren.
   4. Klicken Sie oben in der Eingabeaufforderung auf Refresh DevTools (Entwicklertools aktualisieren).
2. Öffne den Tab „Probleme“.

3. Maximieren Sie die in den Entwicklertools gefundenen Kontrastprobleme, maximieren Sie dann die Elementtabelle und klicken Sie auf einen Link neben dem Element.

   

4. Beheben Sie das Problem wie im Abschnitt Text mit geringem Kontrast beheben beschrieben.

Kontrastprobleme in einem Lighthouse-Bericht

So führen Sie einen Bericht aus:

1. Öffnen Sie in den Entwicklertools Weitere Tabs > Lighthouse.
2. Erstellen Sie einen Lighthouse-Bericht mit den folgenden Einstellungen:
   • Modus: Navigation (Standardeinstellung)
   • Kategorien: Bedienungshilfen
   • Gerät: Computer
3. Klicken Sie auf Seitenaufbau analysieren und warten Sie, bis Lighthouse den Bericht erstellt hat.
4. Scrollen Sie nach unten zum Abschnitt Kontrast und klicken Sie in der Elementliste auf einen Link zu einem betroffenen Element.
5. Beheben Sie das Problem wie im Abschnitt Text mit geringem Kontrast beheben beschrieben.

Text mit niedrigem Kontrast korrigieren

So beheben Sie ein Problem mit niedrigem Kontrast:

1. Suchen Sie nach einem Kontrastproblem und klicken Sie entweder im Bereich CSS-Übersicht, auf dem Tab Probleme oder im Lighthouse-Bericht auf einen Link zu einem betroffenen Element. In den Entwicklertools wird der Bereich Elemente geöffnet, in dem das entsprechende Element ausgewählt wird. Auf dieser Demoseite ist beispielsweise h1.line1 das erste betroffene Element.

2. Klicken Sie in den Entwicklertools rechts oben auf Inspect (Untersuchen) und bewegen Sie den Mauszeiger auf das Element im Darstellungsbereich. In den Entwicklertools wird eine Kurzinfo für dieses Element angezeigt.

   

   Beachten Sie das Warnzeichen neben dem Wert für das Kontrastverhältnis in der Kurzinfo. Das Kontrastverhältnis gibt den Helligkeitsunterschied zwischen den Vorder- (Textfarbe) und den Hintergrundfarben an.

3. Öffnen Sie die Farbauswahl neben der Farbdeklaration des Elementtexts und maximieren Sie in der Farbauswahl den Bereich Kontrastverhältnis.

   

   In der Farbauswahl siehst du, dass das Kontrastverhältnis nicht den AA- oder AAA-Werten der WebAIM-Richtlinien entspricht.

4. Klicken Sie neben der AAA-Ebene auf die Schaltfläche Vorgeschlagene Farbe verwenden. Mit der Farbauswahl wird die Textfarbe entsprechend den Richtlinien für das Kontrastverhältnis angewendet.

   

5. Alternativ können Sie auch manuell eine Farbe auswählen, indem Sie den Kreis in der Schattierungsvorschau ziehen. Um innerhalb der AA- oder AAA-Ebene zu bleiben, wählen Sie eine Farbe unter der oberen bzw. unteren Linie aus.

   

6. Beheben Sie alle Kontrastprobleme, die Sie im Bereich CSS-Übersicht, auf dem Tab Probleme oder im Lighthouse-Bericht gefunden haben.

Speichern Sie die Änderungen.

So speicherst du die Änderungen, die du in den Entwicklertools vorgenommen hast:

• Alle CSS-Änderungen auf einmal kopieren und in den Code einfügen
• Du kannst einen Arbeitsbereich einrichten, mit dem die Entwicklertools Dateien direkt in deinen Quellen speichern können.

Nächste Schritte

Weitere Informationen:

• Informationen zur Barrierefreiheit im Allgemeinen
• Besonders barrierefreie Farbe und Kontrast