Die Lesbarkeit Ihrer Website verbessern

Sofia Emelianova
Sofia Emelianova

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:

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.

    Liste der Kontrastprobleme in der CSS-Übersicht

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

(Vorabversion) Kontrastprobleme auf dem Tab „Probleme“

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. Aktivieren Sie die Meldung von Problemen mit dem Kontrast.
    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.

    Tabelle mit Elementen mit Kontrastproblemen auf dem Tab „Probleme“.

  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 Mehr Tabs. Weitere Tabs > Lighthouse.
  2. Erstellen Sie einen Lighthouse-Bericht mit den folgenden Einstellungen:
    • Modus: Navigation (Standard)
    • Kategorien: Barrierefreiheit
    • Gerät: Computer Lighthouse-Bericht mit Navigations-, Bedienungshilfen- und Desktopeinstellungen
  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. Der Abschnitt „Kontrast“ im Lighthouse-Bericht mit einer Liste der Elemente, bei denen Probleme mit dem Kontrast auftreten
  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. Im Bereich „Elemente“ ist ein Element mit einem Kontrastproblem ausgewählt. Auf dieser Demoseite ist beispielsweise h1.line1 das erste betroffene Element.
  2. Klicken Sie oben rechts in den Entwicklertools auf Prüfen Inspect (Prüfen) und bewegen Sie den Mauszeiger auf das Element im Darstellungsbereich. In den DevTools wird eine Kurzinfo zu diesem Element angezeigt.

    In der Kurzinfo wird neben dem Kontrastwert ein Warnsymbol angezeigt.

    Beachten Sie das Warnsymbol Warnung. 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.

    Im Bereich „Kontrastverhältnis“ der Farbauswahl

    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 Verwenden Sie die vorgeschlagene Farbe. Vorgeschlagene Farbe verwenden. Mit der Farbvorlage 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. Wählen Sie eine Farbe unter der oberen oder unteren Linie aus, um die AA- oder AAA-Stufe nicht zu überschreiten.

    Wählen Sie einen Farbton unter der Untergrenze aus, um das AAA-Niveau beizubehalten.

  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:

Nächste Schritte

Weitere Informationen: