{"id":1486,"date":"2018-10-04T10:29:49","date_gmt":"2018-10-04T08:29:49","guid":{"rendered":"http:\/\/evileu.de\/zum-schwarzen-pinguin\/?p=1486"},"modified":"2018-11-10T10:35:42","modified_gmt":"2018-11-10T09:35:42","slug":"barrierefreie-farbkontraste-2-der-sourcecode","status":"publish","type":"post","link":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/2018\/10\/04\/barrierefreie-farbkontraste-2-der-sourcecode\/","title":{"rendered":"Barrierefreie Farbkontraste 2: der Sourcecode"},"content":{"rendered":"

OK jetzt gilts: man kann eine beliebige RGB-Farbe w\u00e4hlen und sich ausgeben lassen, welche der 140 benannten HTML-Farben einen guten (barrierefreien) Kontrast dazu liefert. Das kann man nicht nur f\u00fcr Schriften verwenden, sondern auch f\u00fcr Logos und Icons, die auf einen farbigen Hintergrund gesetzt werden sollen.<\/p>\n

Voraussetzung ist eine Tabelle, in der die 140 Farben mit Color Group (Farbfamilie), Namen und Hex- und RGB-Notation gespeichert sind, ich zeig hier noch mal einen Ausschnitt:<\/p>\n

\"mysql_farbtabelle\"

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

Wie die Farben da reinkommen beschreibe ich jetzt hier nicht, das ging \u00fcber ein Excel-Makro und ist letzendlich v\u00f6llig wurst f\u00fcr die Funktionalit\u00e4t. Also, wir haben unsere Farbtabelle.<\/p>\n

Jetzt brauchen wir eine Datenbankverbindung, die beschreibe ich hier auch nicht mehr extra. Dann muss wieder mal ein Formular her, f\u00fcr die Auswahl der Basisfarbe bietet sich der Input-Type Color an, bei dem man in den meisten modernen Browsern einen schicken Colorpicker angezeigt bekommt. Man k\u00f6nnte auch ein Eingabefeld f\u00fcr den Hex- oder RGB-Wert nehmen, das ist letztlich Geschmackssache. Also, los gehts, mit einer Datei namens farbnamen.php, die sieht zun\u00e4chst so aus:<\/p>\n

<!DOCTYPE html>\r\n<html lang=\"de\">\r\n<style type=\"text\/css\">\r\nh1,h2,h3{\r\n\u00a0\u00a0 \u00a0font-family:Arial;\r\n}\r\n<\/style>\r\n<head>\r\n<title>Colors Arbeitspapier<\/title>\r\n<\/head>\r\n\r\n<body>\r\n<h1>Beispiel Contrast Colors mit HTML Named Colors<\/h1>\r\n\r\n<form action=\"farbnamen.php\" method=\"post\">\r\n\r\n\u00a0\u00a0 \u00a0\u00a0 <h2>Bitte eine Farbe ausw\u00e4hlen:<\/h2>\r\n\u00a0\u00a0 \u00a0\u00a0 <input type=\"color\"<\/span> name=\"farbe<\/span>\" value=\"\"><br>\r\n\u00a0\u00a0 \u00a0\u00a0 <h2>Bitte eine Farbfamilie f\u00fcr die Kontrastfarbe w\u00e4hlen:<\/h2>\r\n\u00a0\u00a0 \u00a0<select name=\"farbfamilien<\/span>\">\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<option value=\"BLUE\">Blau<\/option>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<option value=\"GREEN\">Gr\u00fcn<\/option>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<option value=\"PURPLE\">Violett<\/option>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<option value=\"WHITE\">Wei\u00df<\/option>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<option value=\"BROWN\">Braun<\/option>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<option value=\"YELLOW\">Gelb<\/option>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<option value=\"GRAY\">Grau<\/option>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<option value=\"RED\">Rot<\/option>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<option value=\"PINK\">Pink<\/option>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<option value=\"ORANGE\">Orange<\/option>\r\n\u00a0\u00a0 \u00a0\u00a0 <\/select>\r\n\u00a0\u00a0 \u00a0 <br><br>\r\n\u00a0\u00a0 \u00a0<input type=\"submit\" name = \"senden\">\r\n\u00a0 \r\n<\/form><\/pre>\n
Das ist erstmal straightes HTML, zuerst kommt der Color Picker, dann das Dropdownfeld f\u00fcr unsere Farbfamilien, und das wars auch schon. Man k\u00f6nnte den Select auch mit einem Distinct aus der Datenbank f\u00fcttern, das hab ich mir jetzt gespart und die 10 Eintr\u00e4ge so reingeschrieben.<\/p>\n
Los geht es wie immer wenn auf den Submit-Button geklickt wurde. Der Colorpicker liefert den Hex-Wert der gew\u00e4hlten Farbe, das Dropdownfeld den Namen der Farbfamilie. Den Hex-Wert zerlege ich in die einzelnen Komponenten, die brauche ich sp\u00e4ter um meine Funktion zur Berechnung der wahrgenommenen relativen Helligkeit damit zu f\u00fcttern, dazu weiter unten mehr. Das Ganze sieht jetzt erstmal so aus:<\/p>\n
\"startbildschirm\"
startbildschirm<\/p><\/div>\n
Bei Klick auf das schwarze Farbk\u00e4stchen poppt der Colorpicker auf, in Chrome beispielsweise sieht der so aus:<\/p>\n
\"chrome_colorpicker\"
chrome_colorpicker<\/p><\/div>\n
Das Dropdownfeld ist auch keine \u00dcberraschung:<\/p>\n
\"dropdown\"
dropdown<\/p><\/div>\n
Aber jetzt wirds gleich interessant, ich habe n\u00e4mlich f\u00fcr die Zerlegung des Hex-Wertes in seine RGB-Komponenten eine schicke Funktion gefunden, das geht mit sscanf():<\/p>\n
<?php\r\nrequire_once('config.php');\r\n\r\nif(isset($_POST['senden'])){\r\n\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0echo \"Sie haben diese Farbe gew\u00e4hlt:<span style='background-color:\".$_POST['farbe'].\"'>Hexadezimalwert: \".$_POST['farbe'].\"<\/span><br>\";\r\n\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0$akt_farbe = $_POST['farbe'];\r\n\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0\/\/RGB-Werte aus hex holen<\/span>\r\n\u00a0\u00a0 \u00a0$hex = $akt_farbe;\r\n\u00a0\u00a0 \u00a0list($r, $g, $b) = sscanf($hex, \"#%02x%02x%02x\");<\/span>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0echo \"<h3>Die relative Helligkeit betr\u00e4gt: \".Brightness($r,$g,$b)<\/span>.\"<\/h3>\";\r\n\u00a0\u00a0 \u00a0echo \"<h3>Kontrastfarbe aus der Farbfamilie \".$_POST['farbfamilien'].\"<\/h3>\";\r\n\u00a0\u00a0 \u00a0echo \"<hr>\";\r\n\u00a0\u00a0 \u00a0$input_brightness = Brightness($r,$g,$b);<\/pre>\n
Mit der Funktion Brightness wird wie gesagt die wahrgenommene Helligkeit der gew\u00e4hlten Farbe bestimmt, Input-Parameter sind die drei RGB-Komponenten. Die Funktion selber sieht so aus:<\/p>\n
\/\/relative (wahrgenommene) Helligkeit aus RGB berechnen\r\nfunction Brightness($r, $g, $b)\r\n\u00a0\u00a0 \u00a0{\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 return 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}<\/pre>\n
Jetzt hole ich mir aus der Datenbank alle Farben, die zu der gew\u00e4hlten Farbfamilie geh\u00f6ren. Zuerst setze ich noch einen Flag $gefunden, der bleibt auf False wenn in der gew\u00e4hlten Farbfamilie keine Farbe mit einem ausreichenden Kontrastwert gefunden wurde und dient dann weiter unten zur Info-Ausgabe.<\/p>\n
Dann gehe ich mit einem While \u00fcber alle gefunden Farben und gebe nur diejenigen aus, bei denen eine Differenz > 130 zur relativen Helligkeit der vom Benutzer vorgegebenen Farbe gefunden wird.<\/p>\n
\/\/alle passenden Eintr\u00e4ge der Farbtabelle ausgeben\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\/\/Flag default \u00a0\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0$gefunden = false;\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\/\/Nur die Eintr\u00e4ge der gew\u00e4hlten Farbfamilie auslesen\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $abfrage = mysqli_query($conn,\"SELECT * FROM $table \r\n                    WHERE familie LIKE '\".$_POST['farbfamilien'].\"' \"); \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 while($row = mysqli_fetch_array($abfrage,MYSQLI_ASSOC)) \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 { \r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\/\/RGB-Werte aus hex holen\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0$hex = $row['hex'];\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0list($r, $g, $b) = sscanf($hex, \"#%02x%02x%02x\");\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\/\/Helligkeit bestimmen\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0$row_brightness = Brightness($r,$g,$b);\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\/\/Kontrastwert berechnen\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0$differenz = abs($row_brightness - $input_brightness);\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\/\/Nur Kontrast h\u00f6her als 130 ausgeben (Wert ggf anpassen)\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0if ($differenz > 130){\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\/\/flag setzen wenn mindestens ein Kontrast > 130 gefunden wurde\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0$gefunden = true;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 echo ' <span style=\"color:'.$row['farbname'].'\">'.$row['farbname'].'<\/span>.'.$row['hex'].'rel. Helligkeit: '.$row_brightness.' Differenz: '.$differenz.'<br>'; \r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0echo \"<h1><span style='color:\".$row['farbname'].\"; background-color:\".$akt_farbe.\"'>\".$row['farbname'].\" ist ein guter Kontrast<\/span><\/h1>\";\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0echo \"<hr>\";\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0}\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 } \/\/ ende von while $row...\r\nif($gefunden==false){echo \"Keine passende Kontrastfarbe in der Farbfamilie \".$_POST['farbfamilien'].\" gefunden\";}\r\n\r\n} \/\/Ende von isset senden<\/pre>\n
F\u00fcr die Ausgabe der passenden Kontrastfarben verwende ich Spans und formatiere sie mit den entsprechenden Farbwerten. Falls keine Farbe mit ausreichendem Kontrast gefunden wurde, gebe ich dies als Info aus. Das war’s!<\/p>\n
Hier noch ein Screenshot der Ausgabe, als Besipiel habe ich als Grundfarbe Gelb und f\u00fcr die Kontrastfarbe die Farbfamilie Blau gew\u00e4hlt:<\/p>\n
\"farben_ausgabe\"
farben_ausgabe<\/p><\/div>\n
Fertig ist das Werkzeug zur Kontrastfarbenbestimmung. Zugegeben k\u00f6nnte man es noch wesentlich h\u00fcbscher formatieren, aber die Funktionalit\u00e4t haut hin, das gen\u00fcgt mir jetzt erstmal. Schlanke noch nicht mal 100 Zeilen Code, das ist mal wieder was f\u00fcr mich und meine minimalistischen Freunde – viel Spa\u00df beim Nachbauen!<\/p>\n
Nachtrag<\/h2>\n
Jetzt konnte ich mir es doch nicht verkneifen, die ganze Sache noch ein bi\u00dfchen ansehnlicher zu gestalten. Der Prototyp sieht jetzt so aus:<\/p>\n
\"aufgehuebscht\"
aufgehuebscht<\/p><\/div>\n
Die Farben hole ich mir nat\u00fcrlich aus der Datenbank, wenn ich dazukomme, schreib ich noch einen neuen Artikel dar\u00fcber. Aber hier ist jetzt mal Schlussende, der Beitrag ist lang genug<\/p>\n
 <\/p>\n
<\/pre>\n
 <\/p>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
OK jetzt gilts: man kann eine beliebige RGB-Farbe w\u00e4hlen und sich ausgeben lassen, welche der 140 benannten HTML-Farben einen guten (barrierefreien) Kontrast dazu liefert. Das kann man nicht nur f\u00fcr Schriften verwenden, sondern auch f\u00fcr Logos und Icons, die auf einen farbigen Hintergrund gesetzt werden sollen. Voraussetzung ist eine Tabelle, in der die 140 Farben […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1,15,9,10,21,11,7,4,63,59],"tags":[],"_links":{"self":[{"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/posts\/1486"}],"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=1486"}],"version-history":[{"count":7,"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/posts\/1486\/revisions"}],"predecessor-version":[{"id":1498,"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/posts\/1486\/revisions\/1498"}],"wp:attachment":[{"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/media?parent=1486"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/categories?post=1486"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/tags?post=1486"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}