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
- Markup: Grundregeln für dunkle Websites
- Veerle Pieters: My view on light text on dark background vs. readability
- Nadja Müller:Linktipps für dunkle Designs
- Michael Preidel: Negativdarstellung und Ergonomie
- Einfach für Alle: Helles oder Dunkles?
6 Antworten auf „Tipps zu hellem Text auf dunklem Grund“
Danke! Wenn ich diesen Artikel lese, dann fühle ich mich angesprochen. Ich werde die Tipps auf meiner Seite testen.
Du kannst das nicht einfach mit diesen Beispiels, die du hier brauchst, den Lesern versuchen rüberzubringen.
Besser wäre es eine separate Beispielseite zu erstellen, um den ganzen Hintergrund zu verdunkeln.
Ich sage das weil deine Seite ganz weiss ist – und ein plötzlich schwarzes Feld in dieser Schneewüste wirkt für das Auge viel mühsamer.
Sonst guter Beitrag!
Grüsse
Danke für den Hinweis, Tom. Hab es entsprechend geändert :)
Warum gibts denn für Kontrast kein Beispiel? Also nicht falsch verstehen, aber die ersten drei Dinge treffen auch auf helle Websites zu, während gerade der Kontrast bei dunklen Websites die größte Rolle spielt. Es ist gewissermaßen eine Gratwanderung, ob ein Design nun „funktioniert“ – d.h. der Leser fühlt sich wohl beim Anschauen der Seite, oder eben nicht. Viel mehr noch als bei hellen Websites.
Beispielsweise ist #FFF auf #000 überhaupt kein Problem, umgekehrt gehts gar nicht. Wenn man aber nun #EEE auf #111 nimmt, oder die Schrift ganz leicht ins Gelbliche fallen lässt, dann fällt das dem Leser so gut wie gar nicht auf, aber es ist weitaus weniger anstrengend.
Meine zwei Cents zum Sonntag :-)
Der erhöhte Zeilenabstand von 140 % ist mir persönlich ein wenig viel 120% würdens auch tun. Die Links bei Kontrast und Laufweite bringen leider ein „Fehler: Server nicht gefunden“ zum Vorschein ;o(
Beim Kontrast finde ich den grauen Text viel besser lesbar als den weißen. Meiner Meinung nach ist der Kontrast weiß auf schwarz zu stark, da sollte man eine leicht gräuliche Schriftfarbe wählen. Aber ich bevorzuge doch eher hellen Untergrund und dunklen Text…