Der Anwendungsfall: Mit dem Customizer sollen die Farben eines WordPress-Themes angepasst werden können. Für einfache Link-Farben, Buttons und Akzente ist das weitgehend unproblematisch. Es genügt, eine einzelne Farbe festzulegen.
Wird dagegen die Hintergrundfarbe einer Fläche, auf der Text liegt, farblich angepasst, so ist das Resultat der Anpassung unter Umständen ein fast unlesbarer oder zumindest schwer lesbarer Text. Zum Beispiel schwarze Schrift auf dunkelgrauem Grund, oder hellgraue Schrift auf hellem Grund.
Das mag man im ersten Moment auf das fehlende gestalterische Feingefühl des Benutzers schieben. Aber nicht lesbare Texte sind ein großes Minus für die Barrierefreiheit einer Website.
Wir als Theme-Entwicklerinnen und -Entwickler haben also die Aufgabe, unsere Kunden (und die Kunden unserer Kunden) vor Fehlkonfiguration zu schützen. Das könnte durch die Möglichkeit erfolgen, dass wir einfach eine weitere Farbauswahl hinzufügen, über die sich die Farbe des Textes steuern lässt. Im Vergleich zu einer statischen Textfarbe hätten wir dem kundigen Benutzer so zumindest die Möglichkeit gegeben, bei Problemen mit Kontrast oder Aussehen des Textes gegensteuern zu können.
Weil eine Fehlkonfiguration aus Unwissenheit damit aber nicht ausgeschlossen werden kann und immer mehr Optionen die Bedienung eines Themes nicht unbedingt erleichtern, wäre es elegant, dieses Problem automatisiert zu lösen.
Nach kurzer Recherche bin ich über einen Blog-Adventskalender, genauer einen Beitrag auf 24ways.org aus dem Jahr 2010 gestolpert. Darin beschreibt der Autor eine PHP-Funktion, die diese genau unseren Anforderungen entspricht:
function getContrast50($hexcolor){
return (hexdec($hexcolor) > 0xffffff/2) ? 'black':'white';
}Code-Sprache: PHP (php)Im Kontext unseres Szenarios würden wir der Funktion den aktuellen Farbwert unseres Hintergrunds als HEX-Code übergeben.
getContrast50('#adff2f');Code-Sprache: PHP (php)Die Funktion würde „entscheiden“, ob (in diesem Beispiel) Schwarz oder Weiß einen besseren Kontrast zur angegebenen Hintergrundfarbe bieten und den entsprechenden Wert zurückgeben, den wir wiederum nutzen können um den Text entsprechend einzufärben. Das Problem einer versehentlichen Einschränkung der Barrierefreiheit lässt sich auf diesem Wege umgehen, ohne den Customizer mit weiteren Optionen zu belasten.
Mentions