Die Lesbarkeit Ihrer Website verbessern

Sofia Emelianova

Wichtig:Text mit geringem Kontrast ist das größte Problem in Bezug auf Barrierefreiheit im Web. Im Februar 2022 war das bei 83, 9% der Startseiten der Top 1 Million der Fall. Weitere Informationen finden Sie im WebAIM Million 2022-Bericht.

Text mit geringem Kontrast erschwert die Lesbarkeit Ihrer Website für alle Nutzer, insbesondere für Nutzer mit Sehbeeinträchtigungen. Die DevTools können Probleme mit geringem Kontrast automatisch erkennen und bessere Farben vorschlagen, um sie zu beheben.

Mit den Entwicklertools können Sie Folgendes tun:

• Kontrastprobleme erkennen Im Steuerfeld CSS-Übersicht, auf dem Tab Probleme (Vorabversion) oder in einem Lighthouse-Bericht finden Sie eine Liste aller Probleme.
• Probleme mit dem Kontrast beheben Rufen Sie die Probleme im Inspektionsmodus mit einer Kurzinfo auf und wählen Sie Farben aus, die in der Farbvorlage vorgeschlagen werden, um das Kontrastverhältnis zu korrigieren.
• Sehschwächen emulieren Sehen Sie sich Ihre Website so an, wie sie Ihre Nutzer sehen.

Text mit geringem Kontrast erkennen

So finden Sie Text mit niedrigem Kontrast:

1. Öffnen Sie die Entwicklertools auf Ihrer Seite. In dieser Anleitung können Sie diese Demoseite verwenden.

2. Über eines der drei Steuerfelder können Sie eine Liste aller Kontrastprobleme aufrufen:

   • CSS-Übersicht
   • (Vorabversion) Probleme
   • Lighthouse

Kontrastprobleme im Bereich „CSS-Übersicht“

So erhalten Sie einen Überblick:

1. Öffnen Sie die CSS-Übersicht.
2. Erfassen Sie eine Übersicht.
3. Öffnen Sie den Bereich Farben, scrollen Sie zu Kontrastprobleme und klicken Sie gegebenenfalls auf ein Problem.

4. Bewegen Sie den Mauszeiger in der Tabelle Kontrastprobleme auf ein Element und klicken Sie auf den Link daneben.

   

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

(Vorabversion) Kontrastprobleme auf dem Tab „Probleme“

Hinweis:Dies ist eine Vorschaufunktion, die standardmäßig deaktiviert ist.

So rufen Sie eine Liste der Probleme ab:

1. Aktivieren Sie auf dem Tab Probleme die Meldung von Kontrastproblemen:
   1. Öffne die Einstellungen > Experimentell.
   2. Suchen Sie in der Filterleiste nach contrast issue.
   3. Aktivieren Sie die Option Automatische Meldung von Problemen mit dem Kontrast über den Bereich „Probleme“ aktivieren.
   4. Klicken Sie oben in der Aufforderung auf DevTools neu laden.
2. Öffnen Sie den Tab „Probleme“.

3. Maximieren Sie die Kontrastprobleme, die in den DevTools gefunden wurden, maximieren Sie dann die Tabelle mit den Elementen und klicken Sie auf einen Link neben dem Element.

   

4. Beheben Sie das Problem wie im Abschnitt Text mit geringem Kontrast korrigieren 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 (Standard)
   • Kategorien: Barrierefreiheit
   • Gerät: Computer
3. Klicken Sie auf Seitenladezeit analysieren und warten Sie, bis Lighthouse den Bericht generiert hat.
4. Scrollen Sie nach unten zum Bereich 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 korrigieren beschrieben.

Text mit geringem Kontrast korrigieren

So beheben Sie ein Problem mit niedrigem Kontrast:

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

2. Klicken Sie oben rechts in den Entwicklertools auf  Inspect (Prüfen) und bewegen Sie den Mauszeiger auf das Element im Darstellungsbereich. In den DevTools wird eine Kurzinfo zu diesem Element angezeigt.

   

   Beachten Sie das Warnsymbol  neben dem Wert für das Kontrastverhältnis in der Kurzinfo. Das Kontrastverhältnis gibt den Helligkeitsunterschied zwischen den Farben im Vordergrund (Textfarbe) und im Hintergrund an.

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

   

   In der Farbvorlage sehen Sie, dass das Kontrastverhältnis nicht den AA- oder AAA-Stufen der WebAIM-Richtlinien entspricht.

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

   

5. Alternativ können Sie eine Farbe manuell auswählen, indem Sie den Kreis in der Vorschau der Farbtöne ziehen. Wählen Sie eine Farbe unter der oberen oder unteren Linie aus, um die AA- oder AAA-Stufe nicht zu überschreiten.

   

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

Speichern Sie die Änderungen.

So speichern Sie die Änderungen, die Sie in den Entwicklertools vorgenommen haben:

• Alle CSS-Änderungen gleichzeitig kopieren und in den Code einfügen
• Sie können einen Arbeitsbereich einrichten, in dem DevTools Dateien direkt in Ihren Quellen speichern kann.

Nächste Schritte

Weitere Informationen:

• Allgemeine Informationen zur Barrierefreiheit
• Insbesondere Farb- und Kontrasteinstellungen