{"id":1475,"date":"2018-10-03T18:29:31","date_gmt":"2018-10-03T16:29:31","guid":{"rendered":"http:\/\/evileu.de\/zum-schwarzen-pinguin\/?p=1475"},"modified":"2018-11-10T10:35:42","modified_gmt":"2018-11-10T09:35:42","slug":"barrierefreie-farbkontraste-ich-hab-da-so-ne-idee","status":"publish","type":"post","link":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/2018\/10\/03\/barrierefreie-farbkontraste-ich-hab-da-so-ne-idee\/","title":{"rendered":"Barrierefreie Farbkontraste – ich hab da so ne Idee"},"content":{"rendered":"

Also, wie man ausrechnet ob auf einem farbigen Hintergrund eine schwarze oder wei\u00dfe Schriftfarbe besser lesbar ist, das hatten wir ja gerade eben schon mal. Jetzt ist der Kunde aber K\u00f6nig, und man kommt auch mal in die Verlegenheit, eine farbige Schrift auf farbigem Grund darstellen zu sollen. Die Anforderung k\u00f6nnte also heissen: es soll eine gr\u00fcne Schrift auf rotem Grund ausgegeben werden, und die soll m\u00f6glichst gut lesbar sein. Da kann man einen Colorpicker nehmen und so ungef\u00e4hr schauen was besser lesbar ist, aber das ist ja doch blo\u00df Trial&Error. Es gibt auch Formeln, mit denen man so etwas berechnen kann, f\u00fcndig wird man z.B. beim W3C, oder auf dieser Seite von nbtech<\/a>. Nach deren Algorithmus kann man die „perceived brightness“, also die wahrgenommene Helligkeit einer Farbe als Wert zwischen 0=schwarz und 255=wei\u00df berechnen. Das ist nicht trivial, weil z.B. gr\u00fcne T\u00f6ne vom menschlichen Auge als heller wahrgenommen werden als rote Schattierungen. Darum berechnet man die jeweilige wahrgenommene Helligkeit, und vergleicht die Farben dahingehend. Ein Unterschied von ca. 120 zwischen den zwei Farben wird nach W3C als ausreichender Kontrast angesehen. Die Formel lautet wie folgt:<\/p>\n

brightness\u00a0 =\u00a0 sqrt( .241 R2<\/sup> + .691 G2<\/sup> + .068 B2<\/sup> )<\/strong><\/p>\n

sqrt ist die Quadratwurzel, R, G, B sind unsere guten alten Bekannten Rot- Gr\u00fcn- und Blauanteil aus dem RGB-Farbraum, wie wir sie in HTML so gerne verwenden (ausf\u00fchrliche Infos hierzu z.B. hier bei W3Schools<\/a>)<\/p>\n

Gar nicht so einfach: was ist Rot, was ist Gr\u00fcn?<\/h2>\n

Auch das ist nicht trivial, weil von der Meinung des Betrachters abh\u00e4ngig. Ein dunkles Rotbraun mag f\u00fcr einen noch als Rot durchgehen, der n\u00e4chste ordnet es schon den braunen T\u00f6nen zu. Ein sonniges Gelb kann auch als Orange gelten, und ein blaustichiges Gr\u00fcn als Blauton herhalten. Sowas kann man nicht berechnen, da kann man sich nur eine Kr\u00fccke suchen und daran festhalten. Bei den 16,7 Mio vorhandenen RGB-Farben ist es auch ein Ding der Unm\u00f6glichkeit, \u00fcberall die korrekte Farbfamilie zu bestimmen. Wir nehmen ein paar Farben weniger, das tuts als Arbeitshypothese auch.<\/p>\n

Eine Untermenge: die benannten HTML-Farben<\/h2>\n

Ich habe da eine interessante Zusammenstellung der benannten HTML-Farben im Web gefunden. Bei https:\/\/htmlcolorcodes.com\/color-names\/ <\/a>gibt es eine Tabelle der von allen modernen Browsern unterst\u00fctzten benamsten Farben, die nach Farbfamilien (Color Groups) gruppiert ist. Auch bei w3schools gibt es eine gut gestaltete Seite \u00fcber die Color Groups<\/a>, nur sind sie da ein bi\u00dfchen anders zusammengefa\u00dft.<\/p>\n

Die Seite von htmlcolorcodes.com habe ich mir mal als Arbeitsgrundlage geklemmt und in eine Datenbanktabelle gejagt. Es sollten eigentlich 140 Farben sein, auf der Seite sind aber 143 Farben aufgef\u00fchrt. Die Tabelle enth\u00e4lt Duplikate, da werden Farben unter zwei verschiedenen Farbfamilien genannt. Ist jetzt aber nicht so schlimm, letztendlich ist die Information wertvoll, welche Farbt\u00f6ne als Rot, Blau, Gelb usw. empfunden werden. Es gibt eine Liste von 10 Farbfamilien. Ich werde bei den englischen Bezeichnungen bleiben, schliesslich sind auch die HTML-Farbnamen in Englisch.<\/p>\n

Hier mal die Liste der Farbfamilien, mit der jeweiligen Anzahl der zugeordneten Farben:<\/p>\n

YELLOW\u00a0\u00a0 \u00a011
\nWHITE\u00a0\u00a0 \u00a017
\nRED\u00a0\u00a0 \u00a09
\nPURPLE\u00a0\u00a0 \u00a019
\nPINK\u00a0\u00a0 \u00a06
\nORANGE\u00a0\u00a0 \u00a06
\nGREEN\u00a0\u00a0 \u00a023
\nGRAY\u00a0\u00a0 \u00a010
\nBROWN\u00a0\u00a0 \u00a017
\nBLUE\u00a0\u00a0 \u00a025<\/p>\n

Wie gesagt, die Summe ist hier 143, nicht 140, aber das vernachl\u00e4ssigen wir jetzt mal. Dass Blue die meisten Farbt\u00f6ne zugeordnet hat verwundert auch nicht weiter, da Blau nunmal eine sehr beliebte Farbe bei Webdesignern und Grafikern ist und im Web sehr h\u00e4ufig verwendet wird.<\/p>\n

Wer sagt, dass das Rot ist?<\/h2>\n

Unter der Farbfamilie „Red“ sind 9 benannte Farben zu finden:<\/p>\n

\"family_red\"

family_red<\/p><\/div>\n

Da sieht man schon, da\u00df die Zuordnung der einzelnen Farbt\u00f6ne zu denen Farbfamilien ausgesprochen subjektiv und diskutabel ist, Lightcoral w\u00fcrde ich eher unter Pink einordnen. Wenn man sich die RGB-Werte dieser Farben anschaut, wird man auch nicht schlauer.<\/p>\n

\"red_family_rgb\"

red_family_rgb<\/p><\/div>\n

Es ist mitnichten so, dass diese Farben alle einen besonders hohen R-Anteil haben, Darkred ist zum Beispiel so ein Ausreisser mit 139 als R-Wert, daf\u00fcr sind die G-und B-Werte Null. Ich hab lange rumgesucht, aber bisher keine praktikable Berechnungsmethode gefunden, mit der man x-beliebige Farbt\u00f6ne einer der obengenannten Farbfamilien zuordnen kann. Deswegen verwende ich die Zuordnungen von htmlcolocodes.com, da hat man zumindest mal einen Anhaltspunkt.<\/p>\n

Und wozu das Ganze?<\/h2>\n

Ganz einfach: mir schwebt sowas wie ein spezialisierter Colorpicker vor, in dem man eine frei w\u00e4hlbare Farbe vorgibt. Dann w\u00e4hlt man aus, aus welcher Farbfamilie die Kontrastfarbe kommen soll, und erh\u00e4lt einen oder mehrere Vorschl\u00e4ge, welche Farbt\u00f6ne einen guten Kontrast bieten w\u00fcrden. Das als Arbeitshypothese. Mal sehen, wie weit ich damit komme.<\/p>\n

Die Voraussetzung: eine MySQL-Tabelle mit allen 140 benannten Farben<\/h2>\n

Diese enth\u00e4lt die Farbfamilie, den Farbnamen, den Hex-Wert und den RGB-Wert. Die habe ich nat\u00fcrlich nicht per Hand eingehackt, da habe ich einen kleinen Umweg \u00fcber ein Excel-Makro genommen, mehr wird nicht verraten. Die Tabelle sieht so aus, die Feldnamen sind selbsterkl\u00e4rend:<\/p>\n

\"mysql_farbtabelle\"

mysql_farbtabelle<\/p><\/div>\n

Das wird meine Ausgangsbasis. Und ich komme mit unter 100 Zeilen Code aus. Den Source gibt es dann im n\u00e4chsten Beitrag.<\/p>\n","protected":false},"excerpt":{"rendered":"

Also, wie man ausrechnet ob auf einem farbigen Hintergrund eine schwarze oder wei\u00dfe Schriftfarbe besser lesbar ist, das hatten wir ja gerade eben schon mal. Jetzt ist der Kunde aber K\u00f6nig, und man kommt auch mal in die Verlegenheit, eine farbige Schrift auf farbigem Grund darstellen zu sollen. Die Anforderung k\u00f6nnte also heissen: es soll […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1,15,10,11,4,63,59],"tags":[],"_links":{"self":[{"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/posts\/1475"}],"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=1475"}],"version-history":[{"count":7,"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/posts\/1475\/revisions"}],"predecessor-version":[{"id":1485,"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/posts\/1475\/revisions\/1485"}],"wp:attachment":[{"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/media?parent=1475"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/categories?post=1475"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/tags?post=1475"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}