Überprüfen auf Kontrastprobleme mit dunklem design und hellem Design

  • Artikel

Beim Testen der Farbbarrierefreiheit können verschiedene Farbdesigns für die Anzeige vorhanden sein, die Sie auf Kontrastprobleme testen müssen.

Die meisten Betriebssysteme verfügen über einen dunklen und einen hellen Modus. Ihre Webseite kann mithilfe einer CSS-Medienabfrage auf diese Betriebssystemeinstellung reagieren. Sie können diese Designs testen und Ihre CSS-Medienabfrage testen, ohne Ihre Betriebssystemeinstellung ändern zu müssen, indem Sie den Abschnitt Emulate CSS media feature prefers-color-scheme im Renderingtool verwenden.

Die Demowebseite für Barrierefreiheitstests enthält beispielsweise ein helles und ein dunkles Design. Die Demoseite erbt die Einstellung für das dunkle oder helle Design vom Betriebssystem. Wenn wir DevTools verwenden, um das Betriebssystem zu simulieren, das auf ein lichtes Schema festgelegt wird, und dann die Demo-Webseite aktualisieren, zeigt das Tool Probleme sechs Farbkontrastprobleme anstelle von zwei an. (Möglicherweise werden unterschiedliche Zahlen angezeigt.)

So emulieren Sie die Auswahl des bevorzugten Farbdesigns eines Benutzers:

  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. Drücken Sie ESC , um den Bereich Schnellansicht am unteren Rand von DevTools zu öffnen.

  4. Klicken Sie auf der Symbolleiste "Schnellansicht" auf die Schaltfläche Weitere Tools (Symbol "), und wählen Sie dann Rendering aus. Das Renderingtool wird im Bereich Schnellansicht geöffnet.

  5. Scrollen Sie nach unten zur Dropdownliste Emulate CSS media feature prefers-color-scheme( Emulate CSS media feature prefers-color-scheme : light), und wählen Sie dann prefers-color-scheme: light aus. Die Webseite wird mit light-theme.csserneut gerendert:

    Verwenden des Renderingtools zum Simulieren eines Lichtmodus und Auslösen des anderen Designs des Dokuments

  6. Wählen Sie im Bereich Schnellansicht das Tool Probleme aus, und erweitern Sie dann den Abschnitt Barrierefreiheit . Abhängig von verschiedenen Faktoren erhalten Insufficient color contrast Sie möglicherweise Warnungen. Im Abschnitt BETROFFENE RESSOURCEN des Problems gibt es 6 Elemente mit unzureichendem Farbkontrast:

    Neue Kontrastprobleme aufgrund der Änderung des hellen Designs erkannt

    Auf der Demo-Webseite ist der Abschnitt Spende status der Seite im hellen Modus nicht lesbar und muss geändert werden:

    Im Abschnitt

  7. Öffnen Sie in DevTools das Tool Elemente , und drücken Sie dann STRG+F unter Windows/Linux oder BEFEHL+F unter macOS. Das Textfeld Suchen wird angezeigt, um in der HTML-DOM-Struktur zu suchen:

    Das Textfeld

  8. Geben Sie schema ein. Die folgenden CSS-Medienabfragen wurden gefunden, und die entsprechenden CSS-Dateien können jetzt aktualisiert werden:

    <link rel="stylesheet" href="css/light-theme.css" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)">
<link rel="stylesheet" href="css/dark-theme.css" media="(prefers-color-scheme: dark)">

Siehe auch