Farbkontrast Barrierefreiheits-Tools

Barrierefreiheit ist heutzutage in aller Munde, insbesondere wenn es um Farbkontraste geht. Ich bin diese Woche über ein paar Tools gestolpert, die meiner Meinung nach ziemlich raffiniert sind, um sicherzustellen, dass der gesamte Text auf unseren Websites lesbar ist, unabhängig von der Hintergrundfarbe, die er haben mag.

Zuerst einmal ist da der Accessible Color Generator, der sich als wunderbares Werkzeug zum Auswählen alternativer Farben erweist. Nehmen wir an, Sie arbeiten an einer Marke mit der Farbe X. Sie können eine Vielzahl anderer ergänzender Farben generieren, wie diese

---

Als Nächstes kommt Contrast, eine ziemlich großartige MacOS-App, die sich ständig in der Menüleiste befindet und hilft, barrierefreie Farbkombinationen basierend auf den WCAG-Richtlinien zu identifizieren. Dieses ist besonders nützlich, wenn Sie zufällig ein Designer sind

---

Das erinnert mich an einen wunderbaren Beitrag darüber, wie das Lyft-Designteam die Art und Weise, wie sie Farben in ihrer App verwenden, neu angegangen ist. Kevyn Arnott erklärt

Farbe scheint auf den ersten Blick fast naiv einfach, wird aber, wenn sie sich über größere Produkte erstreckt, unglaublich komplex. Tausende von Menschen entwickeln gleichzeitig Produkte, und diese Produkte sind stark auf Farbe angewiesen. Dies übt einen enormen Druck auf das Farbsystem aus, um sicherzustellen, dass alle Produkte konsistent erstellt werden, ist aber sehr schwer zu implementieren, da es nur allzu leicht ist, Farben einzeln anzuwenden.

Das Team hat dann ColorBox.io entwickelt, mit dem Sie systematisch eine Menge Farben für Ihre Designsystem-Arbeit erstellen können. Das ist ziemlich raffiniert!

---

Außerdem haben die Leute von GOV.UK ihr eigenes Werkzeug für Farbbarrierefreiheit entwickelt, das Contrast Checker heißt, welches (wie Sie sich schon gedacht haben) hilft, den Kontrast zwischen dem Hintergrund eines Elements und der Seite selbst zu überprüfen

---

Und natürlich gibt es den bewährten WebAIM Kontrastprüfer, der für viele Entwickler da draußen eine erste Anlaufstelle ist.

---

Selbst DevTools können Ihnen etwas über Farbkontraste erzählen, indem sie die Farben direkt dort betrachten.

---

Bisher haben wir uns Werkzeuge angesehen, die Kontraste prüfen. Aber es gibt eine Klasse von Werkzeugen, die zugängliche Kontraste während der Entwicklung automatisieren können. Josh Bader schrieb einen Ansatz auf, der hohe Kontraste erzwingt, indem CSS-Custom-Properties mit der calc()-Funktion kombiniert werden. Facundo Corradini machte etwas Ähnliches, das die Schriftfarbe basierend auf der Hintergrundfarbe dahinter wechselt.

---

Oh! Und wir haben vielleicht etwas, worauf wir uns freuen können mit der color-adjust-Eigenschaft. Sie ist in der CSS Color Module Level 4-Spezifikation vorgeschlagen und könnte Browsern mehr Kontrolle über die Anpassung von Farb-Werten geben, die im Stylesheet deklariert sind. Sie ist nicht wirklich auf Farbkontraste ausgerichtet, aber es ist etwas Interessantes daran, die Verantwortung für die Wiedergabe von Farb-Werten an den Browser zu übergeben, basierend auf bestimmten Bedingungen.