Montag, 24. März 2008
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 beliebige Hintergrundfarbe gewählt werden können, 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 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.
RSS 2.0 Feed
Für die Überschriften im