Sprung zum Inhalt

Webdesign nach Maß von webdesign weisshart

Mein Blog

RSS Feed AbonnementRSS 2.0 Feed

zum Archiv und den Kategorien

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

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 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.



Kommentare

Noch keine Beiträge.

Einen Kommentar abgeben

Damit Code-Beispiele richtig angezeigt werden, müssen Sonderzeichen maskiert werden (z.B. < zu &lt;).


(notwendig)

(notwendig)

Spamschutz:
Je nach Inhalt wird Ihr Kommentar eventuell nicht sofort angezeigt, sondern muss manuell freigeschaltet werden.

Archiv:

Kategorien:

Creative Commons Lizenzvertrag
Alle Texte (nicht Bilder!) Creative Commons CC BY-NC-SA 3.0 DE