{"id":1571,"date":"2020-10-01T17:25:34","date_gmt":"2020-10-01T15:25:34","guid":{"rendered":"http:\/\/evileu.de\/zum-schwarzen-pinguin\/?p=1571"},"modified":"2020-10-01T17:25:34","modified_gmt":"2020-10-01T15:25:34","slug":"konform-zu-wcag-kontrastfarben-automatisch-berechnen","status":"publish","type":"post","link":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/2020\/10\/01\/konform-zu-wcag-kontrastfarben-automatisch-berechnen\/","title":{"rendered":"Konform zu WCAG: Kontrastfarben automatisch berechnen"},"content":{"rendered":"<p>Ich bin\u00a0darauf hingewiesen worden, dass mein <a href=\"http:\/\/evileu.de\/zum-schwarzen-pinguin\/2018\/11\/28\/barrierefreie-farbkontraste-revisited-die-ganze-html-palette\/\">Color\u00a0Tool f\u00fcr barrierefreie Kontrastfarben<\/a> im WEB nicht der aktuellsten Version der WCAG entspricht. OK, hab ich ein bisschen recherchiert und umgestrickt. Was fr\u00fcher als Brightness gehandelt wurde, hei\u00dft jetzt Luminescence und wird etwas anders berechnet. Zum Vergleich der Schrift- und Hintergrundfarbe wird eine Ratio herangezogen, 4.5:1 entspricht AA, 7:1 enspricht AAA. Die Berechnung ist im Ganzen etwas komplexer geworden, aber doch kein Hexenwerk. Nachlesen kann man die n\u00f6tigen Formeln hier:<br \/>\nhttps:\/\/www.w3.org\/WAI\/GL\/wiki\/Relative_luminance<\/p>\n<p>Das Kernst\u00fcck ist die Formel zur Umrechnung des RGB-Wertes aus dem Colorpicker in WCAG-konforme Lumineszenz, die sieht so aus:<\/p>\n<pre>function Luminescence($r, $g, $b) \/\/neuere Definition nach wcag s. a. https:\/\/www.w3.org\/WAI\/GL\/wiki\/Relative_luminance\r\n\r\n {\r\n $rs = $r\/255;\r\n $gs = $g\/255;\r\n $bs = $b\/255;\r\n \r\n if ($rs &lt;= 0.03928)\r\n {\r\n $R = $rs\/12.92;\r\n }\r\n else {\r\n $R = (($rs+0.055)\/1.055) ** 2.4;}\r\n \r\n if ($gs &lt;= 0.03928)\r\n { $G = $gs\/12.92;\r\n }\r\n else {\r\n $G = (($gs+0.055)\/1.055) ** 2.4;\r\n }\r\n \r\n if ($bs &lt;= 0.03928){\r\n $B = $bs\/12.92 ;}\r\n else \r\n {$B = (($bs+0.055)\/1.055) ** 2.4;}\r\n\r\n $Lumi = 0.2126 * $R + 0.7152 * $G + 0.0722 * $B;\r\n \r\n return $Lumi;\r\n \r\n \r\n }<\/pre>\n<p>Dann braucht man noch die Formel f\u00fcr die Contrast Ratio, die findet sich <a href=\"https:\/\/www.w3.org\/WAI\/GL\/wiki\/Contrast_ratio\">hier<\/a>\u00a0im WCAG-Wiki.\u00a0Damit kann man sich einstellen, ob man AA oder AAA kompatibel sein m\u00f6chte, und das wars dann auch im Grossen und Ganzen.<\/p>\n<pre>\r\nif ($input_luminescence &gt;= $row_luminescence){\r\n  $ratio = ($input_luminescence+0.05)\/($row_luminescence+0.05);\r\n  }\r\n else\r\n {\r\n $ratio = ($row_luminescence+0.05)\/($input_luminescence+0.05);\r\n }\r\n\r\n if ($ratio&gt;4.5){ \/\/Nur die Farben nehmen bei denen die Ratio gr\u00f6sser als 4.5 ist\r\n...\r\n\r\n\r\n<\/pre>\n<p>Viel Spa\u00df beim Ausprogrammieren!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Ich bin\u00a0darauf hingewiesen worden, dass mein Color\u00a0Tool f\u00fcr barrierefreie Kontrastfarben im WEB nicht der aktuellsten Version der WCAG entspricht. OK, hab ich ein bisschen recherchiert und umgestrickt. Was fr\u00fcher als Brightness gehandelt wurde, hei\u00dft jetzt Luminescence und wird etwas anders berechnet. Zum Vergleich der Schrift- und Hintergrundfarbe wird eine Ratio herangezogen, 4.5:1 entspricht AA, 7:1 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[15,21,11,4,63],"tags":[],"_links":{"self":[{"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/posts\/1571"}],"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=1571"}],"version-history":[{"count":2,"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/posts\/1571\/revisions"}],"predecessor-version":[{"id":1573,"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/posts\/1571\/revisions\/1573"}],"wp:attachment":[{"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/media?parent=1571"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/categories?post=1571"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/tags?post=1571"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}