Die Lesbarkeit Ihrer Website verbessern

Sofia Emelianova

GitHub

Wichtiger Hinweis:Text mit niedrigem Kontrast ist das häufigste Problem der Barrierefreiheit im Web. Im Februar 2022 traten dieses Problem auf 83, 9% der beliebtesten Millionen Startseiten auf. Weitere Informationen finden Sie im WebAIM Million 2022 Report.

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

Mit den Entwicklertools können Sie:

• Kontrastprobleme entdecken Verwenden Sie das Steuerfeld CSS-Übersicht, den Tab Probleme (Vorschau) oder einen Lighthouse-Bericht, um eine Liste aller Probleme zu erhalten.
• Kontrastprobleme beheben Sie können sich die Probleme über eine Kurzinfo im Inspector-Modus ansehen und Farben auswählen, die in der Farbauswahl vorgeschlagen werden, um das Kontrastverhältnis zu korrigieren.
• Sehschwächen nachbilden. Betrachten Sie Ihre Website so, wie die Nutzer sie sehen.

Text mit niedrigem Kontrast entdecken

So erkennen Sie Text mit niedrigem Kontrast:

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

2. Rufen Sie mithilfe eines der drei Steuerfelder eine Liste aller Kontrastprobleme ab:

   • Übersicht über Preisvergleichsportale
   • (Vorschau) Probleme
   • Leuchtturm

Kontrastprobleme im Steuerfeld „CSS-Übersicht“

So erhalten Sie einen Überblick:

1. Öffnen Sie die CSS-Übersicht.
2. Eine Übersicht aufnehmen
3. Öffnen Sie den Abschnitt Farben, scrollen Sie zu Kontrastprobleme und klicken Sie auf ein Problem, falls vorhanden.

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 niedrigem Kontrast korrigieren beschrieben.

(Vorschau) Kontrastprobleme auf dem Tab „Probleme“

Hinweis:Diese Vorschaufunktion ist standardmäßig deaktiviert.

So rufen Sie eine Liste der Probleme auf:

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

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

   

4. Beheben Sie das Problem wie im Abschnitt Text mit niedrigem Kontrast korrigieren beschrieben.

Kontrastprobleme in einem Lighthouse-Bericht

So führen Sie einen Bericht aus:

1. Öffnen Sie in den Entwicklertools die 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 Seitenaufbau analysieren und warten Sie, bis Lighthouse den Bericht erstellt hat.
4. Scrollen Sie nach unten zum Abschnitt Kontrast und klicken Sie in der Liste der Elemente auf den Link eines betroffenen Elements.
5. Beheben Sie das Problem wie im Abschnitt Text mit niedrigem Kontrast korrigieren beschrieben.

Text mit niedrigem Kontrast korrigieren

So beheben Sie ein Problem mit niedrigem Kontrast:

1. Suchen Sie ein Kontrastproblem und klicken Sie im Steuerfeld CSS-Übersicht, auf dem Tab Probleme oder im Lighthouse-Bericht auf einen Link zu einem betroffenen Element. In den Entwicklertools werden Sie zum Steuerfeld Elemente weitergeleitet und dort das entsprechende Element ausgewählt. Auf dieser Demoseite ist beispielsweise h1.line1 das erste betroffene Element.

2. Klicken Sie in den Entwicklertools rechts oben auf Prüfen und bewegen Sie den Mauszeiger auf das Element im Darstellungsbereich. Die Entwicklertools zeigen eine Kurzinfo für dieses Element an.

   

   Neben dem Kontrastwert in der Kurzinfo sehen Sie das Warnzeichen . Das Kontrastverhältnis misst den Helligkeitsunterschied zwischen den Farben im Vordergrund (Textfarbe) und den Hintergrundfarben.

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

   

   Die Farbauswahl gibt an, dass das Kontrastverhältnis nicht den AA- oder AAA-Stufen der WebAIM-Richtlinien entspricht.

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

   

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

   

6. Beheben Sie analog dazu alle Kontrastprobleme, die Sie im Steuerfeld 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, in dem die Entwicklertools Dateien direkt in deinen Quellen speichern können.

Nächste Schritte

Weitere Informationen:

• Allgemeine Informationen zu Bedienungshilfen
• Bedienungshilfen speziell für Farbe und Kontrast