Überprüfen des Textfarbenkontrasts im Standardzustand mit dem Tool "Inspect"

  • Artikel

Überprüfen Sie den Textfarbkontrast im Standardzustand mit dem Tool Inspect . Die Informationsüberlagerung des Tools "Überprüfen " auf der Webseite enthält einen Abschnitt "Barrierefreiheit ", der Kontrastinformationen enthält.

Für Elemente, die Text enthalten, zeigt die Informationsüberlagerung des Tools Überprüfen Folgendes an:

  • Das Kontrastverhältnis von Text im Vergleich zu Hintergrundfarben.
  • Ein grünes Häkchensymbol für Elemente mit ausreichendem Kontrast.
  • Ein gelbes Warnungssymbol für Elemente, die nicht genügend Kontrast haben.

In einigen Fällen wird der Kontrast beeinflusst, indem der Browser auf helles oder dunkles Design festgelegt wird.

Auf der Demowebseite für Barrierefreiheitstests weisen die blauen Links des Navigationsmenüs der Seitenleiste beispielsweise genügend Kontrast auf, aber der grüne Link Hunde im Abschnitt Spende status weist nicht genügend Kontrast auf. Untersuchen Sie diese Elemente mithilfe des Inspect-Tools wie folgt:

  1. Öffnen Sie die Demowebseite für Barrierefreiheitstests in einem neuen Fenster oder einer neuen Registerkarte.

  2. Klicken Sie mit der rechten Maustaste auf eine beliebige Stelle auf der Webseite, und wählen Sie dann Untersuchen aus. Oder drücken Sie F12. DevTools wird neben der Webseite geöffnet.

  3. Klicken Sie in der linken oberen Ecke von DevTools auf die Schaltfläche Untersuchen (Überprüfen), damit das Symbol hervorgehoben ist (blau).

  4. Zeigen Sie auf der gerenderten Webseite auf den blauen Link Katzen des Navigationsmenüs der Seitenleiste. Die Informationsüberlagerung des Tools "Überprüfen " wird angezeigt. Im Abschnitt Barrierefreiheit der Informationsüberlagerung wird ein grünes Häkchen in der Zeile Kontrast angezeigt, das angibt, dass dieses Element einen ausreichenden Kontrast zwischen Textfarbe und Hintergrundfarbe aufweist:

    Die Menüelemente weisen einen ausreichenden Kontrast auf, wie im Tool

  5. Zeigen Sie auf der gerenderten Webseite im Abschnitt Spendenstatus auf den Link Hunde . Die Informationsüberlagerung des Untersuchungstools zeigt ein orangefarbenes Ausrufezeichen in der Zeile Kontrast an, der angibt, dass dieses Element nicht genügend Kontrast zwischen Text und Hintergrundfarben aufweist:

    Ein Element, das nicht über genügend Kontrast verfügt, wie in der Warnung im Inspect-Tool gezeigt

Verschiedene Optionen zum Untersuchen des Text-Farbkontrastes in DevTools

Verwenden Sie die folgenden DevTools-Features, um den Text-Farbkontrast zu untersuchen:

  • Verwenden Sie das Inspect-Tool (als Informationsüberlagerung auf der Webseite), um zu überprüfen, ob ein einzelnes Seitenelement über genügend Textfarbenkontrast verfügt. Die Informationsüberlagerung des Tools "Überprüfen " enthält einen Abschnitt "Barrierefreiheit " mit einer Zeile "Kontrastinformationen ". Das Inspect-Tool zeigt nur Textkontrastinformationen für den aktuellen Zustand an. Dieser Ansatz wird im aktuellen Artikel beschrieben.

  • Das Tool Probleme meldet automatisch alle Farbkontrastprobleme für die gesamte Webseite, wenn Text- und Hintergrundfarbe nicht ausreichend Kontraste aufweisen. Dieser Ansatz wird unter Überprüfen, ob Textfarben genügend Kontrast aufweisen beschrieben.

  • Emulieren Sie einen nicht standardmäßigen Zustand, z. B. den hover Zustand. Klicken Sie hierzu im Bereich Formatvorlagen auf die Schaltfläche Elementzustand umschalten (:hov), in dem der Abschnitt Elementzustand erzwingen angezeigt wird. Dieses Feature wird unter Überprüfen der Barrierefreiheit aller Zustände von Elementen beschrieben.

Siehe auch