Negerboxkampf im Tunnel - oder: weißer Adler auf weißem Grund

Hinweis:
Dieser Artikel ist älter als 18 Monate / wurde seit 18 Monaten nicht aktualisiert. Dies kann (muss aber nicht) dazu führen, dass der Artikel, und / oder darin beschriebene Techniken, nicht mehr aktuell sind. Bitte berücksichtigen Sie diesen Hinweis bei der Lektüre.

Dieser Artikel ist am 13. Juni 2020 von meinem Wordpress-Blog hierher umgezogen. Weitere Artikel werden folgen.
Den Titel, auch wenn er im Jahr 2020 nicht mehr "politically correct" ist, behalte ich natürlich unverändert bei. So hieß der Spruch eben in meiner Jugend, als es auch noch Mohrenköpfe und Zigeunerschnitzel gab.

Beim Erstellen von Anwendungen steht man hin und wieder vor dem Problem, die Lesbarkeit von Schrift zu gewährleisten, wenn der User Schrift- oder Hintergrundfarben frei wählen kann.

Ein Beispiel ist der Credit-Link in meinem Suchscript. Der Webmaster will das Script an die Farben seines Seitendesigns anpassen. Wenn ich ihm aber die freie Wahl bei der farblichen Gestaltung auch des Credit-Links gebe, dann gibt es halt immer wieder pfiffige Zeitgenossen, die genau für diesen Zweck schwarze Schrift auf ihrem schwarzen Seitenhintergrund schön finden.

Das wiederum passt mir nicht.

Ich sorge also mit ein wenig PHP dafür, dass zur Anpassung an die Zielseite eine beliebige Hintergrundfarbe gewählt werden kann, und dennoch mein Link optimal lesbar bleibt.

Der PHP Code dazu ist gar nicht so schwer zu verstehen:
if (preg_match('/^#[0-9A-F]{1,6}$/i', $bg) && strlen($bg) == 7) { $redH = base_convert(substr($bg, 1, 2), 16, 10); $greenH = base_convert(substr($bg, 3, 2), 16, 10); $blueH = base_convert(substr($bg, 5, 2), 16, 10); $sum = $redH*299 + $greenH*587 + $blueH*114; if ($sum < 127000 ) { $comp = "#FFFFFF"; } else { $comp ="#000000"; } } else { $fehler = 1; $bg = "#FFFFFF"; $comp = "#000000"; } In Zwischenablage kopieren

Je nach gewählter Hintergrundfarbe ($bg in der search_config.php einzustellen) wird als Schriftfarbe $comp weiß #FFFFFF oder schwarz #000000 eingestellt.
Welche Farbwerte aus 16 Millionen möglichen aber führen zu optimaler Lesbarkeit mit schwarzer, welche Farben mit weißer Schrift?

Das W3C weiß die Antwort.

In der Zeile
$sum = $redH*299 + $greenH*587 + $blueH*114; ist dieses Wissen im Code umgesetzt.

Hier kann man das Ergebnis selbst testen und ein wenig herumspielen.
Und hier habe ich die Technik noch etwas erweitert, und ein kleines Tool erstellt, um auch Farbkontraste zu prüfen.

Artikeltexte und Code-Snippets: Creative Commons CC BY-SA 4.0
Medien (Bilder, Videos, Audios) sind evtl. urheberrechtlich geschützt.