Tipps zu Entwicklertools: Text mit niedrigem Kontrast erkennen und korrigieren

Sofia Emelianova
Sofia Emelianova

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 Report.

In den Chrome-Entwicklertools können Sie alle Kontrastprobleme auf einen Blick erkennen und mit nur einem Klick beheben.

In diesem Video erfahren Sie, wie Sie:

  • Kontrastverhältnisse werden in der Kurzinfo im Inspektionsmodus und die empfohlenen Werte für das Verhältnis in der Farbvorlage angezeigt.

    Kontrastverhältnisse sind in einer Kurzinfo mit einer Farbauswahl verfügbar, mit der das Verhältnis der alternativen Farben gemessen werden kann. Die Rationen sind in AA- und AAA-Qualität verfügbar.

  • Wählen Sie in der Farbvorlage vorgeschlagene Farben aus oder wählen Sie eine Farbe unter den Linien für das Kontrastverhältnis aus, um die WebAIM-Richtlinien einzuhalten.

    Empfohlene Linien für das Kontrastverhältnis sind in der Vorschau der Farbtöne in der Farbauswahl verfügbar.

  • Alle Kontrastprobleme finden Sie in den Bereichen Preisvergleichsportal – Übersicht und Probleme (Vorabversion).

    Kontrastprobleme, die im Steuerfeld „CSS-Übersicht“ und auf dem Tab „Probleme“ aufgeführt sind

  • Sie können Sehschwächen emulieren, um zu sehen, wie Ihre Seite für alle Nutzer aussieht.

    Unscharfes Sehen, ausgewählt auf dem Tab „Rendering“ und im Viewport emuliert.

Im Tutorial Lesbarkeit Ihrer Website verbessern erfahren Sie mehr über die praktische Umsetzung.

Weitere Informationen erhalten Sie unter: