Share
Einer der wichtigsten Aspekte bei der Erstellung barrierefreier Websites ist der lesbare Text. Das Erstellen von lesbarem Text bedeutet wiederum, dass Sie einen ausreichenden Farbkontrast zwischen Ihren Textfarben und Ihren Hintergrundfarben haben.
Schauen Sie sich beispielsweise den violetten Text auf weißem Hintergrund von der Homepage von Tuts + an. Dieses Kontrastniveau ist alles gut:
Beispiel für ein gutes Textkontrastverhältnis Wenn wir den Text jedoch heller machen, können wir schnell einen Punkt erreichen, an dem der Kontrast zu gering ist und das Ablesen zu schwierig wird:
Derselbe Text hat jetzt einen schlechten Kontrast Dies mag ein relativ einfaches Konzept sein, aber in der Praxis einen ausreichenden Kontrast zu gewährleisten, kann tatsächlich etwas schwierig sein. Manchmal sieht der Farbkontrast für das Auge gut aus, ist jedoch in der Realität möglicherweise nicht auf dem neuesten Stand. Wie können wir also sicher sein, dass unsere Farbkontraststufen barrierefrei sind? Hier können Chrome Dev Tools helfen.
Dieses Tutorial ist Teil von Web Accessibility: der Complete Learning Guide, in dem wir eine Reihe von Tutorials, Artikeln, Kursen und E-Books zusammengestellt haben, um Ihnen das Verständnis der Web-Zugänglichkeit von Anfang an zu erleichtern.
In den obigen Screenshots sehen Sie die Farbauswahl von Chrome Dev Tools. Wenn Sie genau hinschauen, können Sie auch sehen, dass in diesem Farbwähler zusätzliche Informationen enthalten sind, wie z. B. die Anzeige eines Kontrastverhältniswerts, der Ihnen eine Rückmeldung über die Farbauswahl gibt. Dies ist Teil der kürzlich hinzugefügten Tools für Barrierefreiheit in Chrome. Schauen wir uns an, wie alles funktioniert.
HinweisHinweis: Möglicherweise werden im Internet einige Anweisungen angezeigt, in denen Sie die Verwendung von "Developer Experiments" zur Verwendung dieser Farbkontrastprüfungsfunktionen aktivieren müssen. Dies ist jedoch nicht mehr der Fall. Die Funktionalität ist jetzt in Chrome und Chromium integriert.
Öffnen Sie zunächst die Chrome / Chromium Dev-Werkzeuge und wählen Sie ein beliebiges Textelement in Ihrem HTML-Code aus. Dann in der Styles Registerkarte, suchen Sie die Farbe Klicken Sie auf das kleine Farbfeld, um das Auswahlwerkzeug zu öffnen.
Wählen Sie ein Textelement aus und klicken Sie auf das farbige Quadrat, um zu beginnen In dem Bereich, den ich unten mit einem roten Quadrat hervorgehoben habe, wird der Kontrastwert von 5,00 angezeigt, den dieses Textelement erhalten hat. Diese Bewertung ergibt sich aus dem Erkennen der Farbe des Hintergrundelements und dem Vergleich mit der Farbe des Textes.
Sie werden auch bemerken, dass neben der Partitur zwei grüne Häkchen angezeigt werden. Dies bedeutet, dass dieses Kontrastverhältnis innerhalb der akzeptierten Parameter für die Zugänglichkeit liegt.
Die Zustimmung zum Kontrastverhältnis erhalten Diese grundlegende Verhältniszahl ist hilfreich, aber um Zugriff auf alle Farbkontrastwerkzeuge zu erhalten, klicken Sie auf den nach unten zeigenden Pfeil rechts neben der Kontrastbewertung. Es wird eine QuickInfo mit der Bezeichnung angezeigt Zeig mehr wenn du darüber schwebst.
Erweitern Sie die Tools, um weitere Informationen zum Farbkontrast zu erhalten Mit diesem erweiterten Abschnitt erhalten wir einige zusätzliche Informationen. Hier sehen Sie die idealen Kontrastwerte, die Sie erreichen sollten, wobei höhere Werte für einen stärkeren Kontrast stehen. Ein Wert zwischen 3,0 und 4,5 wird als „AA“ dargestellt und wird als Minimum betrachtet, während 4,5 oder höher als „AAA“ dargestellt wird und ideal ist.
Jetzt sehen wir die zu erreichenden Kontrastwerte und eine "sichere" Linie im Farbwähler Sie werden auch bemerken, dass nach dem Erweitern der Vollfarbenkontrastwerkzeuge oben in der Farbauswahl eine Linie angezeigt wird. Dies ist die Trennlinie zwischen Textfarben, die mindestens mit „AA“ bewertet wurden, und solchen, die nicht den Standards entsprechen.
Hinweis: Sie können der Linie ziemlich nahe kommen und von einer "AAA" -Rating auf "AA" wechseln, wobei sie über 3,0 bleiben, aber unter 4,5 bleiben:
Annäherung an die Linie ist immer noch in Ordnung, wenn auch nicht ideal Alles oberhalb der Linie wird jedoch mit roten Warnsymbolen gekennzeichnet, um Ihnen mitzuteilen, dass die Farbkombination ein Problem für die Zugänglichkeit darstellt:
Überqueren Sie die Linie und verlieren Sie Ihre AA / AAA-Kontrastbewertung Sie können auch den Alpha-Schieberegler verschieben, der sich unterhalb des Farbton-Schiebereglers befindet. Die "sichere" Linie wird verschoben, um der erhöhten Transparenz Rechnung zu tragen:
Durch Bewegen des Alpha-Schiebereglers wird auch die sichere Linie verschoben Beachten Sie außerdem, dass die Seite der Linie, auf die Ihre Textfarbe fallen soll, je nach Farbe des Hintergrunds invertiert werden kann. Wenn Ihr Text auf einem dunklen Hintergrund angezeigt wird, soll die Farbe Ihres Texts angezeigt werden über die Linie. Wenn sich Ihr Text auf einem hellen Hintergrund befindet, sollte seine Farbe fallen unten die Linie.
Unten sehen Sie ein Beispiel für diese Inversion, mit einem dunklen Hintergrund im linken Bild und einem hellen Hintergrund im rechten Bild. Beachten Sie, dass es auch eine Vorschau der Text- und Hintergrundfarben gibt Aa innerhalb eines Kreises unter dem Zeig mehr Schalter:
Links sollte heller Text auf dunklem Hintergrund seine Farbe über der Linie haben. Rechts sollte dunkler Text auf hellem Hintergrund seine Farbe unterhalb der Linie haben. Diese Tools zur Farbkontrastprüfung in Chrome und Chromium erleichtern die Lesbarkeit während des Designprozesses erheblich. Alles, was wir tun müssen, ist eine kurze Überprüfung der einzelnen Textfarben. Verwenden Sie den Farbwähler, um die Einstellungen anzupassen, und integrieren Sie die neuen Farben dann wieder in unseren Code.
Dies ist ein Schritt näher, um das Internet zu einem großartigen Ort für alle zu machen!
Accentsconagua