{"id":1320,"date":"2018-06-25T13:18:25","date_gmt":"2018-06-25T11:18:25","guid":{"rendered":"http:\/\/evileu.de\/zum-schwarzen-pinguin\/?p=1320"},"modified":"2018-11-09T06:23:47","modified_gmt":"2018-11-09T05:23:47","slug":"kontrastfarbe-automatisch-berechnen-mit-jqueryjavascript","status":"publish","type":"post","link":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/2018\/06\/25\/kontrastfarbe-automatisch-berechnen-mit-jqueryjavascript\/","title":{"rendered":"Kontrastfarbe automatisch berechnen mit jquery\/Javascript"},"content":{"rendered":"<p>Das hat jetzt mit WordPress nur insoweit was zu tun, als ich eine Anforderung vom Kunden hatte, ein Info-Widget mit in zuf\u00e4lligen Intervallen wechselnden Farben zu hinterlegen, der wollte das halt gern so haben. Dabei stellte sich aber gleich die Herausforderung, dass der Text (default schwarz) bei dunklen Hintergrundfarben nat\u00fcrlich schlecht bis gar nicht zu lesen war. Will heissen, die Textfarbe sollte dann auch dynamisch angepasst werden, und das mach ich mit jquery\/Javascript. Daf\u00fcr hab ich mir eine L\u00f6sungsstrategie zusammengegooglet, die man vielleicht mal irgendwo anders brauchen kann, deswegen kommt sie hier rein.<\/p>\n<h2>Zuf\u00e4llige Farbe f\u00fcr den Hintergrund bestimmen<\/h2>\n<p>Daf\u00fcr habe ich mir dieses recht \u00fcberschaubare Snippet ergooglet, das sehr zuverl\u00e4ssig funktioniert:<\/p>\n<pre>\/\/******Zuf\u00e4llige Hex-Farbe erzeugen*********************\/\r\n\u00a0\u00a0 \u00a0function randomColor(){\r\n\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0var x=Math.round(0xffffff * Math.random()).toString(16);\r\n\u00a0\u00a0 \u00a0var y=(6-x.length);\r\n\u00a0\u00a0 \u00a0var z=\"000000\";\r\n\u00a0\u00a0 \u00a0var z1 = z.substring(0,y);\r\n\u00a0\u00a0 \u00a0var color= \"#\" + z1 + x;\r\n\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0return color;\r\n\u00a0\u00a0 \u00a0}<\/pre>\n<h2>Relative (wahrgenommene) Helligkeit einer Farbe bestimmen<\/h2>\n<p>Daf\u00fcr gibt es vom w3c eine Faustformel, die ich f\u00fcr den Kontrast bei barrierefreien Seiten immer wieder mal brauche, die geht so:<\/p>\n<pre>\/\/***********relative Helligkeit von r,g,b bestimmen\r\n\u00a0\u00a0 \u00a0function Brightness(r, g, b)\r\n\u00a0\u00a0 \u00a0{\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 return Math.sqrt(\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0 r * r * .241 + \r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0 g * g * .691 + \r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0 b * b * .068);\r\n\u00a0\u00a0 \u00a0}\r\n\r\n<\/pre>\n<p>Man f\u00fcttert sie mit den RGB-Werten einer Farbe und kriegt einen Wert zwischen 0 und 255 heraus, der die relative Helligkeit einer Farbe bezeichnet. Man nimmt dann als Kontrastfarbe f\u00fcr die untere H\u00e4lfte des Farbspektrums wei\u00df, f\u00fcr die obere H\u00e4lfte schwarz. Den Schwellwert von 130 kann man nach Geschmack noch ein bisschen nach oben oder unten anpassen.<\/p>\n<pre>\/\/****************Textfarbe je nach Schwellwert zur\u00fcckgeben\r\n\u00a0\u00a0 \u00a0function textfarbe(helligkeit){\r\n\u00a0\u00a0 \u00a0if (helligkeit &gt; 130){return 'black'}\r\n\u00a0\u00a0 \u00a0if (helligkeit &lt;= 130){return 'white'}\r\n\r\n\u00a0\u00a0 \u00a0}<\/pre>\n<h2>Wir haben Hex und brauchen RGB<\/h2>\n<p>Deswegen gibts noch eine Umwandlungsfunktion, die uns den Hex-String zerlegt und die RGB_Werte liefert:<\/p>\n<pre>\/\/************rgb-Werte aus hex holen\r\n\u00a0\u00a0 \u00a0function hexToR(h) {return parseInt((cutHex(h)).substring(0,2),16)}\r\n\u00a0\u00a0 \u00a0function hexToG(h) {return parseInt((cutHex(h)).substring(2,4),16)}\r\n\u00a0\u00a0 \u00a0function hexToB(h) {return parseInt((cutHex(h)).substring(4,6),16)}\r\n\u00a0\u00a0 \u00a0function cutHex(h) {return (h.charAt(0)==\"#\") ? h.substring(1,7):h}\r\n\r\nvar R = hexToR(aktfarbe);\r\nvar G = hexToG(aktfarbe);\r\nvar B = hexToB(aktfarbe);<\/pre>\n<p>Mit den drei Variablen kann man dann die Funktion Brightness() aufrufen, und mit der wiederum die Funktion textfarbe(), die uns dann schlussendlich die passende Kontrastfarbe f\u00fcr unsere zuf\u00e4llige Hintergrundfarbe liefert. Ich gebe zu es ist ein bisschen von hinten durch die Brust ins Auge, aber es funktioniert. Hier mal das ganze Script zum Nachvollziehen:<\/p>\n<h2>Das Script<\/h2>\n<pre>&lt;script&gt;\r\n\u00a0\u00a0\u00a0 $(document).ready(function(){\r\n\u00a0\u00a0 \u00a0setInterval(farbwechsler, 5000)\r\n\u00a0\u00a0\u00a0 farbwechsler();\r\n\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0\/\/******Zuf\u00e4llige Hex-Farbe erzeugen*********************\/\r\n\u00a0\u00a0 \u00a0function randomColor(){\r\n\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0var x=Math.round(0xffffff * Math.random()).toString(16);\r\n\u00a0\u00a0 \u00a0var y=(6-x.length);\r\n\u00a0\u00a0 \u00a0var z=\"000000\";\r\n\u00a0\u00a0 \u00a0var z1 = z.substring(0,y);\r\n\u00a0\u00a0 \u00a0var color= \"#\" + z1 + x;\r\n\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0return color;\r\n\u00a0\u00a0 \u00a0}\r\n\r\n\u00a0\u00a0 \u00a0\/\/************rgb-Werte aus hex holen\r\n\u00a0\u00a0 \u00a0function hexToR(h) {return parseInt((cutHex(h)).substring(0,2),16)}\r\n\u00a0\u00a0 \u00a0function hexToG(h) {return parseInt((cutHex(h)).substring(2,4),16)}\r\n\u00a0\u00a0 \u00a0function hexToB(h) {return parseInt((cutHex(h)).substring(4,6),16)}\r\n\u00a0\u00a0 \u00a0function cutHex(h) {return (h.charAt(0)==\"#\") ? h.substring(1,7):h}\r\n\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0\/\/***********relative Helligkeit von r,g,b bestimmen\r\n\u00a0\u00a0 \u00a0function Brightness(r, g, b)\r\n\u00a0\u00a0 \u00a0{\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 return Math.sqrt(\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0 r * r * .241 + \r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0 g * g * .691 + \r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0 b * b * .068);\r\n\u00a0\u00a0 \u00a0}\r\n\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0\/\/****************Textfarbe je nach Schwellwert zur\u00fcckgeben\r\n\u00a0\u00a0 \u00a0function textfarbe(helligkeit){\r\n\u00a0\u00a0 \u00a0if (helligkeit &gt; 130){return 'black'}\r\n\u00a0\u00a0 \u00a0if (helligkeit &lt; 130){return 'white'}\r\n\r\n\u00a0\u00a0 \u00a0}\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\r\nfunction farbwechsler(){\r\n\r\nvar aktfarbe = randomColor();\r\n\r\nvar R = hexToR(aktfarbe);\r\nvar G = hexToG(aktfarbe);\r\nvar B = hexToB(aktfarbe);\r\n\r\n\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 document.getElementById(\"zufall\").style.backgroundColor = aktfarbe;\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 document.getElementById(\"inhalt\").innerHTML =\"Hex: \"+ aktfarbe;\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 document.getElementById(\"rgb\").innerHTML = \"rgb: \"+R+\", \"+G+\", \"+B;\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 document.getElementById(\"brightness\").innerHTML =\"Helligkeit: \"+ Brightness(R,G,B);\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 document.getElementById(\"schrift\").style.backgroundColor = aktfarbe;\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 document.getElementById(\"schrift\").style.color = textfarbe(Brightness(R,G,B));\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 }\r\n\r\n\u00a0\u00a0 \u00a0\r\n\u00a0 })\r\n&lt;\/script&gt;<\/pre>\n<p>Ich hab mal die Funktion farbwechsler() auf alle 5 Sekunden gesetzt, f\u00fcr den Demo-Effekt.<\/p>\n<p>Und hier noch das passende HTML zum Ausprobieren:<\/p>\n<pre>&lt;body&gt;\r\n\r\n&lt;h1&gt;Beispiel Contrast Colors mit Javascript&lt;\/h1&gt;\r\n&lt;div id = \"zufall\"&gt;Schriftfarbe statisch&lt;\/div&gt;\r\n&lt;div id=\"inhalt\"&gt;...&lt;\/div&gt;\r\n&lt;div id=\"rgb\"&gt;...&lt;\/div&gt;\r\n&lt;div id=\"brightness\"&gt;...&lt;\/div&gt;\r\n&lt;div id=\"schrift\"&gt;&lt;h1&gt;Schriftfarbe dynamisch&lt;\/h1&gt;&lt;\/div&gt;\r\n\r\n&lt;\/body&gt;<\/pre>\n<p>Das wars! So gibt es immer lesbare Schrift auch auf zuf\u00e4llig generierten Hintergrundfarben.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Das hat jetzt mit WordPress nur insoweit was zu tun, als ich eine Anforderung vom Kunden hatte, ein Info-Widget mit in zuf\u00e4lligen Intervallen wechselnden Farben zu hinterlegen, der wollte das halt gern so haben. Dabei stellte sich aber gleich die Herausforderung, dass der Text (default schwarz) bei dunklen Hintergrundfarben nat\u00fcrlich schlecht bis gar nicht zu [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1,47,59],"tags":[],"_links":{"self":[{"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/posts\/1320"}],"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=1320"}],"version-history":[{"count":3,"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/posts\/1320\/revisions"}],"predecessor-version":[{"id":1323,"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/posts\/1320\/revisions\/1323"}],"wp:attachment":[{"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/media?parent=1320"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/categories?post=1320"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/tags?post=1320"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}