In Light text on dark background vs. readability von Roger Johansson geht’s mal wieder um die Probleme und Tipps zu weißem/hellen Text auf schwarzen/dunklen Hintergrund. Besonders im Hinblick auf die Lesbarkeit. Oftmals verwischen sich die hellen Buchstaben zu einem nicht lesbaren Brei. Die wichtigsten Regeln einmal zusammengefasst:
Schriftgröße
Als allererstes sollte man eine ausreichende Schriftgröße verwenden. Mini-Texte jenseits der 10px sollten generell vermieden werden, lesbar wird es so ab 12px. Auf eine geeignete Schriftart ist wie immer auch zu achten!
Beispiel zur Schriftgröße ansehen.
Zeilenabstand vergrößern
Um die Lesbarkeit zu steigern und keinen Textbrei zu erhalten, sollte der Zeilenabstand vergrößert werden. Am einfachsten geht dies mit der CSS-Anweisung line-height: Ein Beispiel: line-height: 1.4em;. Dies würde den Zeilenabstand um 40 % der Schriftgröße erhöhen.
Beispiel zum erhöhten Zeilenabstand ansehen.
Wie man sieht, hat die Lesbarkeit enorm zugenommen. [Feed-Abonnenten sollten einfach mal die Original-Seite anschauen und das Stylesheet neu laden (F5 drücken).]
Laufweite erhöhen (sperren)
Zusätzlich zum Zeilenabstand kann man auch noch die Abstände zwischen den Buchstaben vergrößern: letter-spacing: 0.03em;. Hierbei ist es wichtig, das ganze nicht zu übertreiben! Außerdem sollte man hier auch die Wortabstände per word-spacing vergrößern, da es bei hohen Werten sonst schwer werden könnte, Zwischenräume und Leerzeichen auseinanderzuhalten. Dieser Wert sollte über dem Buchstaben-Abstand liegen.
Beispiel zur erhöhten Laufweite ansehen.
Kontrast
Der Kontrast zwischen Hintergrund- und Textfarbe sollte ausreichend genug sein, beide voneinander zu unterscheiden, aber auch nicht zu groß oder auch grob ausfallen, da dies auf Dauer schwer für die Augen werden kann. Wählt man für den Hintergrund die Farbe Schwarz #000 und gibt dem Text ein dunkles grau wie #666, dann ist der Text kaum zu erkennen. Färbt man den Text allerdings weiß (#FFF) wird es wieder besser mit der Lesbarkeit.
Beispiel zum Kontrast ansehen.
Natürlich gelten diese Regeln auch bei dunkel-auf-hell-Webseiten. Vielen Dank nochmal an Christoph für seine Hinweise in den Kommentaren.
Weitere Infos
Mit der Aktion Pink for October wollen Webdesigner und -entwickler aus Amerika ihre Webseiten den ganzen Oktober hindurch in Rosa (engl. Pink) erstrahlen lassen, um so auf den in Amerika stattfindenen Monat des Brustkrebs hinzuweisen. Ziele der Aktion sollen vor allem höhere Spendensummen und (bisher noch in Klammern) die Internationalisierung dieses Tags sein.