{"id":1525,"date":"2018-11-28T18:00:11","date_gmt":"2018-11-28T17:00:11","guid":{"rendered":"http:\/\/evileu.de\/zum-schwarzen-pinguin\/?p=1525"},"modified":"2018-12-01T11:19:57","modified_gmt":"2018-12-01T10:19:57","slug":"barrierefreie-farbkontraste-revisited-die-ganze-html-palette","status":"publish","type":"post","link":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/2018\/11\/28\/barrierefreie-farbkontraste-revisited-die-ganze-html-palette\/","title":{"rendered":"Barrierefreie Farbkontraste revisited: die ganze HTML-Palette"},"content":{"rendered":"

140 Farben war mir zuwenig<\/h2>\n

Ich habe in dem Artikel \u00fcber Barrierefreie Farbkontraste 2<\/a> 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\u00e4nkung auf die benannten Farben doch ein zu enges Korsett war, das sind ja nur ca. 140, und der HTML-Farbraum umfasst\u00a0 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 \u00fcber 16 Mio Farben war mir das dann doch zu unhandlich.<\/p>\n

Der ganze HTML-Farbraum<\/h2>\n

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<\/strong> Farbraum, ich steppe mit einer definierten Schrittweite durch die RGB-Werte, damit die Ergebnisse nicht so un\u00fcbersichtlich werden. In der Testphase hat sich eine Schrittweite von 20 als praktikabel erwiesen, da hat man noch eine wirklich grosse Auswahl m\u00f6glicher Farben, und es bleibt trotzdem recht \u00fcbersichtlich.<\/p>\n

Was das Programm macht<\/h2>\n

Zur Eingabe der vom Benutzer gew\u00fcnschten Farbe benutze ich wieder einen Colorpicker, man k\u00f6nnte aber auch gleichgut ein Textfeld zur Eingabe des Hex- oder RGB-Wertes vorsehen. Die gew\u00e4hlte Farbe wird in ihre RGB-Komponenten zerlegt, mithilfe der Formel f\u00fcr 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.<\/p>\n

Ich steppe jetzt in drei geschachtelten Schleifen durch den gesamten 24-Bit-Farbraum. Damit das nicht uferlos wird, gebe ich wie gesagt f\u00fcr jede Iteration eine Schrittweite von 20 an, bei Bedarf k\u00f6nnte man das auch noch feiner oder gr\u00f6ber einstellen.<\/p>\n

Ich berechne die Brightness der jeweils aktuellen Farbe, berechne die Differenz zur vom Benutzer gew\u00e4hlten Farbe und gebe die aktuelle Farbe nur dann aus, wenn diese Differenz \u00fcber 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 \ud83d\ude42<\/p>\n

Nachtrag: die Screenshots<\/h2>\n

Der Startbildschirm ist unspektakul\u00e4r, hat aber auch nur eine Funktionailt\u00e4t: den Colorpicker.<\/p>\n

\"el_allcolors_start\"

el_allcolors_start<\/p><\/div>\n

Hier ein Ausschnitt des Ergebnisses, man sieht dass die gew\u00e4hlte Farbe wirklich gut zu den vorgeschlagenen Farben kontrastiert:<\/p>\n

\"el_allcolors_ergebnis\"

el_allcolors_ergebnis<\/p><\/div>\n

Ganz am Ende gebe ich noch aus, wieviele m\u00f6gliche Kontrastfarben es gibt:<\/p>\n

\"el_allcolors_anzahlfarben\"

el_allcolors_anzahlfarben<\/p><\/div>\n

Das wars –\u00a0 viel Spa\u00df beim Aust\u00fcfteln!<\/p>\n","protected":false},"excerpt":{"rendered":"

140 Farben war mir zuwenig Ich habe in dem Artikel \u00fcber 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\u00e4nkung auf die benannten Farben doch ein zu enges Korsett war, das sind ja nur […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[65,11,4,63],"tags":[],"_links":{"self":[{"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/posts\/1525"}],"collection":[{"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/comments?post=1525"}],"version-history":[{"count":5,"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/posts\/1525\/revisions"}],"predecessor-version":[{"id":1533,"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/posts\/1525\/revisions\/1533"}],"wp:attachment":[{"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/media?parent=1525"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/categories?post=1525"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/tags?post=1525"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}