Archiv der Kategorie: Accessibility/Barrierefreiheit

Barrierefreie Farbkontraste revisited: die ganze HTML-Palette

140 Farben war mir zuwenig

Ich habe in dem Artikel über Barrierefreie Farbkontraste 2 den Source zur Bestimmung von idealen Kontrastfarben nach WCAG-Richtlinien aus den benannten Farben der HTML-Palette vorgestellt. Jetzt habe ich das Thema nochmal aufgegriffen, weil mir die Beschränkung auf die benannten Farben doch ein zu enges Korsett war, das sind ja nur ca. 140, und der HTML-Farbraum umfasst  bekanntermassen 24 Bit Farbtiefe, das sind 16.777.216 Farben. Ich hatte damals eine MySQL Tabelle der benannten Farben mit ihren RGB-Werten verwendet, das Konzept habe ich jetzt gekippt, bei über 16 Mio Farben war mir das dann doch zu unhandlich.

Der ganze HTML-Farbraum

Statt dessen benutze ich jetzt den ganzen Farbraum zur Bestimmung der idealen Kontrastfarben und berechne mir die RGB-Komponenten durch drei geschachtelte While-Schleifen. Na ja, nicht den ganzen Farbraum, ich steppe mit einer definierten Schrittweite durch die RGB-Werte, damit die Ergebnisse nicht so unübersichtlich werden. In der Testphase hat sich eine Schrittweite von 20 als praktikabel erwiesen, da hat man noch eine wirklich grosse Auswahl möglicher Farben, und es bleibt trotzdem recht übersichtlich.

Was das Programm macht

Zur Eingabe der vom Benutzer gewünschten Farbe benutze ich wieder einen Colorpicker, man könnte aber auch gleichgut ein Textfeld zur Eingabe des Hex- oder RGB-Wertes vorsehen. Die gewählte Farbe wird in ihre RGB-Komponenten zerlegt, mithilfe der Formel für die relative wahrgenommene Helligkeit wird die Brightness bestimmt. Ein barrierefreier Farbkontrast wird bei einer Differenz der Brightness zweier Farben von einem Wert von ca. 120 bis 130 erzielt, diesen kann man im Code festlegen.

Ich steppe jetzt in drei geschachtelten Schleifen durch den gesamten 24-Bit-Farbraum. Damit das nicht uferlos wird, gebe ich wie gesagt für jede Iteration eine Schrittweite von 20 an, bei Bedarf könnte man das auch noch feiner oder gröber einstellen.

Ich berechne die Brightness der jeweils aktuellen Farbe, berechne die Differenz zur vom Benutzer gewählten Farbe und gebe die aktuelle Farbe nur dann aus, wenn diese Differenz über dem eingestellten Schwellwert liegt. Bei der Ausgabe liefere ich dann gleich den rgb(x,y,z) der aktuellen Farbe mit. That’s it – wenn ich dazukomme, mache ich die Tage noch ein paar Screenshots der Ausgabe. Den Sourcecode liefere ich diesmal nicht mit, der kommt in mein Portfolio 🙂

Nachtrag: die Screenshots

Der Startbildschirm ist unspektakulär, hat aber auch nur eine Funktionailtät: den Colorpicker.

el_allcolors_start

el_allcolors_start

Hier ein Ausschnitt des Ergebnisses, man sieht dass die gewählte Farbe wirklich gut zu den vorgeschlagenen Farben kontrastiert:

el_allcolors_ergebnis

el_allcolors_ergebnis

Ganz am Ende gebe ich noch aus, wieviele mögliche Kontrastfarben es gibt:

el_allcolors_anzahlfarben

el_allcolors_anzahlfarben

Das wars –  viel Spaß beim Austüfteln!

Ich bin Accessibility-Aktivistin

Diese Vokabel, im Original „Accessibility activist“ habe ich im Web aufgeklaubt, und sie passt mir wie Latsch auf Pantoffel. Aktivistin, das hat auch was Kämpferisches und Radikales, und damit kann ich mich durchaus identifizieren. Ich meine das ernst mit dem barrierefreien Webdesign, es ist mir ein echtes Anliegen, meine Kunden bei der barrierefreien Gestaltung ihrer Webauftritte behilflich zu sein. Das hat viele Facetten, von einer rein technischen Bedienbarkeit mit der Tastatur und dem Screenreader über die barrierefreie Strukturierung und klare Gliederung angebotener Texte bis hin zu einer klaren, barrierefrei verständlichen Sprache, das Anwendungsspektrum der Barrierefreieheit ist weitgefächert.

Und je mehr ich lerne, um so klarer wird mir auch dass ich noch viel zu lernen habe und wahrscheinlich noch auf Jahre hinaus täglich etwas Neues in Sachen Barrierefreiheit lernen kann. Trotzdem werde ich nie alles wissen können, dafür ist das Gebiet einfach zu umfangreich. Aber ich bin dran, und ich bin in Diskussionen zum Thema auch durchaus ein bisschen ein Radikalinsky, eben weil ich davon überzeugt bin,  dass Barrierefreiheit speziell im Internet nicht nur wichtig, sondern auch notwendig und überaus qualitätsfördernd ist. Ich leihe mir da mal den Slogan einer Teamkollegin:  „Accessibility – for a brighter, clearer Web!

Das habe ich mir auf die Fahne geschrieben, und damit ziehe ich in dem Kampf, aber nicht verbissen, sonder guten Mutes und guter Laune. Es gibt viel zu tun – legen wir los!

attacke

attacke