Die Lesbarkeit Ihrer Website verbessern

Sofia Emelianova
Sofia Emelianova
GitHub

Texte mit geringem Kontrast erschweren das Lesen Ihrer Website für alle Nutzer, insbesondere für Nutzer mit Sehbeeinträchtigungen. In den Entwicklertools können Probleme mit geringem Kontrast automatisch erkannt und bessere Farben vorgeschlagen werden, um sie zu beheben.

Mit den Entwicklertools können Sie Folgendes tun:

  • Kontrastprobleme erkennen. Verwenden Sie das Steuerfeld CSS-Übersicht (Vorschau), den Tab Probleme oder einen Lighthouse -Bericht, um eine Liste aller Probleme zu erhalten.
  • Kontrastprobleme beheben. Sehen Sie sich die Probleme im Inspektormodus mit einem Tooltip an und wählen Sie Farben aus, die von der Farbauswahl vorgeschlagen werden, um das Kontrastverhältnis zu korrigieren.
  • Sehbeeinträchtigungen emulieren. Sehen Sie sich Ihre Website so an, wie sie von Ihren Nutzern gesehen wird.

Text mit geringem Kontrast erkennen

So erkennen Sie Text mit geringem Kontrast:

  1. Öffnen Sie die Entwicklertools auf Ihrer Seite.

  2. Listen Sie alle Kontrastprobleme mit einem der folgenden drei Steuerfelder auf:

Sie können mit unserem CodePen experimentieren.

Kontrastprobleme im Steuerfeld „CSS-Übersicht“

So erhalten Sie eine Übersicht:

  1. Öffnen Sie die CSS-Übersicht.
  2. Erstellen Sie eine Übersicht.
  3. Öffnen Sie den Bereich Farben , gehen 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.

    Liste der Kontrastprobleme in der CSS-Übersicht.

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

(Vorschau) Kontrastprobleme auf dem Tab „Probleme“

So erhalten Sie eine Liste der Probleme:

  1. Aktivieren Sie die Berichterstellung zu Kontrastproblemen auf dem Tab Probleme :
    1. Öffnen Sie die Einstellungen > Experimentell.
    2. Suchen Sie in der Filterleiste nach contrast issue.
    3. Wählen Sie Automatische Berichterstellung zu Kontrastproblemen über das Steuerfeld „Probleme“ aktivieren aus. Berichterstellung für Kontrastprobleme aktivieren.
    4. Klicken Sie oben in der Eingabeaufforderung auf Entwicklertools neu laden.
  2. Öffnen Sie den Tab „Probleme“.

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

    Tabelle der Elemente mit Kontrastproblemen auf dem Tab „Probleme“

  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 (Standard)
    • Kategorien: Barrierefreiheit
    • Gerät: Desktop

    Lighthouse-Bericht mit Einstellungen für Navigation, Barrierefreiheit und Desktop.

  3. Klicken Sie auf Seitenaufbau analysieren und warten Sie, bis Lighthouse den Bericht erstellt hat.

  4. Gehen Sie zum Abschnitt Kontrast. Klicken Sie in der Liste der Elemente auf einen Link zu einem betroffenen Element.

    Der Abschnitt „Kontrast“ im Lighthouse-Bericht mit einer Liste von Elementen, bei denen Kontrastprobleme auftreten.

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

Text mit geringem Kontrast beheben

So beheben Sie ein Problem mit geringem Kontrast:

  1. Suchen Sie nach einem Kontrastproblem und klicken Sie auf einen Link zu einem betroffenen Element entweder im Steuerfeld CSS-Übersicht, auf dem Tab Probleme oder im Lighthouse-Bericht. Sie werden in den Entwicklertools zum Steuerfeld Elemente weitergeleitet und das entsprechende Element wird ausgewählt.

    Im Bereich „Elemente“ ist ein Element mit einem Kontrastproblem ausgewählt.

    In unserem nicht barrierefreien CodePen-Beispiel ist das erste betroffene Element h1.line1.

  2. Klicken Sie rechts oben in den Entwicklertools auf Untersuchen und bewegen Sie den Mauszeiger im Darstellungsbereich auf das Element. In den Entwicklertools wird ein Tooltip für dieses Element angezeigt.

    In der Kurzinfo wird neben dem Kontrastwert ein Warnsymbol angezeigt.

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

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

    Der Bereich „Kontrastverhältnis“ in der Farbauswahl.

    In der Farbauswahl wird angezeigt, dass das Kontrastverhältnis nicht den AA- oder AAA Anforderungen der WebAIM-Richtlinien entspricht.

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

    Die angewendete Farbe entspricht den Richtlinien.

  5. Alternativ können Sie eine Farbe manuell auswählen, indem Sie den Kreis in der Vorschau der Farbtöne ziehen. Wenn Sie die AA- oder AAA-Anforderung erfüllen möchten, wählen Sie eine Farbe unter der oberen bzw. unteren Linie aus.

    Wählen Sie eine Farbe unterhalb der unteren Linie aus, um das AAA-Niveau beizubehalten.

  6. Beheben Sie auf ähnliche Weise alle Kontrastprobleme, die Sie mit dem Steuerfeld CSS-Übersicht, dem Tab Probleme, oder dem Lighthouse-Bericht gefunden haben.

Änderungen speichern

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

Nächste Schritte

Weitere Informationen: