Die Lesbarkeit Ihrer Website verbessern

Sofia Emelianova
Sofia Emelianova
GitHub

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:

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.

    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 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. Berichte zu Kontrastproblemen 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.

    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 Mehr Tabs. Weitere Tabs > Lighthouse.
  2. Erstellen Sie einen Lighthouse-Bericht mit den folgenden Einstellungen:
    • Modus: Navigation (Standardeinstellung)
    • Kategorien: Bedienungshilfen
    • Gerät: Computer Lighthouse-Bericht mit den Einstellungen „Navigation“, „Bedienungshilfen“ und „Desktop“
  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. Der Bereich „Kontrast“ des Lighthouse-Berichts enthält eine Liste der Elemente mit Kontrastproblemen.
  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. Ein Element, für das im Steuerfeld „Elemente“ ein Kontrastproblem ausgewählt ist. Auf dieser Demoseite ist beispielsweise h1.line1 das erste betroffene Element.

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

    In der Kurzinfo wird neben dem Kontrastwert ein Warnzeichen angezeigt.

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

    Der Bereich „Kontrastverhältnis“ der Farbauswahl.

    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. Vorgeschlagene Farbe verwenden. Mit der Farbauswahl wird die Textfarbe entsprechend den Richtlinien für das Kontrastverhältnis angewendet.

    Die angewendete Farbe entspricht den Richtlinien.

  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.

    Wählen Sie einen Farbton unter dem Endergebnis aus, um im AAA-Level zu bleiben.

  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:

Nächste Schritte

Weitere Informationen: