Montag, 24. März 2008 – zuletzt vor 5 Jahren aktualisiert
Negerboxkampf im Tunnel - oder: weißer Adler auf weißem Grund
Hinweis: Dieser Artikel wurde seit längerer Zeit nicht aktualisiert.
Die beschriebenen Techniken funktionieren weiterhin, sollten aber ggf. an aktuelle Anforderungen angepasst werden.
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";
}
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.
Copyright-Hinweis
Artikeltexte und Code-Snippets: Creative Commons
CC BY-SA 4.0
Medien (Bilder, Videos, Audios) sind evtl. urheberrechtlich geschützt.
Kommentare
Über Ihren Kommentar zu diesem Artikel freue ich mich.
Wenn Sie aber Fragen haben, und eine Antwort erwarten, nutzen Sie bitte das Supportforum! Die Nutzung des Forums ist auch ohne Registrierung möglich.