Testen des Text-Farbkontrasts mit der Farbauswahl

  • Artikel

Personen mit Sehschwäche sehen möglicherweise keine Bereiche, die sehr hell oder sehr dunkel sind. Alles scheint in etwa auf der gleichen Helligkeitsstufe zu erscheinen, was es schwierig macht, Konturen und Kanten zu unterscheiden.

Das Kontrastverhältnis misst die Helligkeitsdifferenz zwischen Vordergrund und Hintergrund von Text. Wenn Ihr Text ein niedriges Kontrastverhältnis aufweist, kann es sein, dass Personen mit sehschwachen Personen Ihre Website als leeren Bildschirm erleben.

In DevTools besteht eine Möglichkeit zum Anzeigen des Kontrastverhältnisses eines Textelements darin, die Farbauswahl auf der Registerkarte Formatvorlagen des Tools Elemente zu verwenden. Mit der Farbauswahl können Sie überprüfen, ob Ihr Text den empfohlenen Kontrastverhältnissen entspricht.

So überprüfen Sie den Textfarbenkontrast mithilfe der Farbauswahl:

  1. Öffnen Sie in DevTools das Tool Elemente .

  2. Wählen Sie in der DOM-Struktur das Textelement aus, das Sie überprüfen möchten.

  3. Suchen Sie auf der Registerkarte Formatvorlagen die Farbeigenschaft , die auf das Element angewendet wird, und klicken Sie dann auf das Farbquadrat neben der Farbeigenschaft .

    Die Farbauswahl wird geöffnet:

    Die Farbauswahl, die auf der Registerkarte Formatvorlagen neben der Farbeigenschaft des Elements geöffnet wird

  4. Untersuchen Sie den Abschnitt Kontrastverhältnis der Farbauswahl:

    Der Abschnitt

    Der Abschnitt Kontrastverhältnis zeigt eine Bewertung für das Kontrastverhältnis zwischen Text und Hintergrund sowie ein Symbol an, das angibt, ob das Kontrastverhältnis den Empfehlungen entspricht:

    • Ein roter durchgestrichener Kreis bedeutet, dass das Element die Mindestempfehlung nicht erfüllt.
    • Ein Häkchen bedeutet, dass das Element die Mindestempfehlung erfüllt.
    • Zwei Häkchen bedeuten, dass das Element die erweiterte Empfehlung erfüllt.

  5. Weitere Informationen finden Sie, indem Sie auf den Abschnitt Kontrastverhältnis klicken, um ihn zu erweitern:

    Die Linie

    In der visuellen Auswahl oben in der Farbauswahl werden zwei Linien angezeigt, die über die visuelle Auswahl verlaufen, zusammen mit einem Kreis für die aktuelle Farbe. Wenn die aktuelle Farbe den Empfehlungen entspricht, erfüllt alles auf derselben Seite der Zeile auch die Empfehlungen. Wenn die aktuelle Farbe nicht den Empfehlungen entspricht, entspricht alles auf der gleichen Seite auch nicht den Empfehlungen.

  6. Um verschiedene Farben auszuprobieren, klicken Sie in die visuelle Auswahl, oder wählen Sie ein Farbmuster am unteren Rand der Farbauswahl aus.

Siehe auch

Hinweis

Teile dieser Seite sind Änderungen, die auf Arbeiten basieren, die von Google erstellt und geteilt und gemäß den in der Creative Commons Attribution 4.0 International License beschriebenen Bedingungen verwendet werden. Die originale Seite befindet sich hier und wurde von Kayce Basques (Technical Writer, Chrome DevTools & Lighthouse) verfasst.

Creative Commons License Dieses Werk ist unter einer Creative Commons Attribution 4.0 International License lizenziert.