Kürzlich stand ich bei einer Visualisierung vor folgendem Problem: Welche Textfarben kann man noch gut auf einem weißen Hintergrund erkennen und welche nicht? Ich erinnere mich noch eine brute-force-Lösung, die ich vor einigen Jahren bei einem ähnlichen Problem gewählt hatte: Nimm die Farbe und mische sie mit schwarz!

Im RGB-Farbraum geht dies sehr einfach, in dem man jede der drei Farbkomponenten mit einer Zahl zwischen 0 und 1 multipliziert:

Auch wenn das mein Problem damals prinzipiell gelöst hatte, hat dieser Weg einige Nachteile: Zum einen werden auch solche Farben verdunkelt, die man vorher ohne Probleme hätte lesen können. Damit verschenkt man gewissermaßen Farben, da aus einem dunkelrot schnell ein undefinierbares schwarzgraubraun wird. Zum anderen verlieren die Farben damit an Sättigung, der Gesamteindruck wird folglich farbloser (siehe abschließende Visualisierung, Spalte “+50% schwarz”).

Diesmal wollte ich es also besser lösen und dazu die Farben in einen wahrnehmungsoptimierten Farbraum umrechnen. Besonders geeignet schienen mir das HSL und HSB-Modell, da dort die vielversprechende Komponente Farbhelligkeit vorkommt. Angenommen, die Helligkeit h ist bekannt, so kann ein einfacher Schwellwert β (= Lesbarkeitsschwelle) festgelegt werden:

Doch welches Modell ist nun besser geeignet? Die Modelle HSL und HSB unterscheiden sich vor allem in der Interpretation der Helligkeit. Bei HSL bezeichnet L die relative Helligkeit (lightness), im Gegensatz zur absoluten Helligkeit B (brightness) bei HSB¹.

Schauen wir uns doch zuerst mal an, wie die lightness und die brightness aus einer RGB-Farbe berechtnet werden. Als relative Helligkeit wird einfach der Mittelwert aus der minimalen und maximalen Farbkomponente festgelegt, während die absolute Helligkeit durch eine affine Linearkombination aller dreier Farbkomponenten beschrieben wird²:

Die unterschiedliche Komponenten-Wichtung in der brightness-Berechnung hat den einfachen Grund, dass die Farbkomponenten tatsächlich unterschiedlich hell wahrgenommen werden.

Diesen Effekt verdeutlicht die folgende Abbildung: Obwohl alle drei Farben eine relative Helligkeit von 50% haben³ nehmen wir die gelbe Schrift eindeutig heller wahr als die blaue.

Und eben dieser Unterschied spiegelt sich in den entsprechenden brightness-Werten wieder, bei denen unser blau mit 7%, das grün mit 72% und das gelb mit 93% abschneidet. Sieht ganz so aus, als hätten wir unser Lieblingsmodell gefunden!

Und wo bleibt die Visualisierung???

Um die Ergebnisse der theoretischen Analyse zu verifizieren, habe ich wieder eine kleine Demonstration zusammengebastelt. Auf der Visualisierung verteilt sich jede Menge Text, dessen Farbe sich von links nach rechts und dessen Helligkeit von oben nach unten ändert. Oben links kann man zwischen dem HSL- und HSB-Modell umschalten.

Erwartungsgemäß fällt sogleich der “Einknick” der Lesbarkeit im HSL-Modell auf. Versucht man für die Helligkeit eine Schwelle β festzulegen, bis zu der der Text in jeder Farbe noch gelesen werden kann, so muss man sich wegen der schlechten Lesbarkeit des gelben Textes auf etwa 45% begrenzen.

Im HSB-Modell kann man die Schwelle schon deutlich höher ansetzen, erst ab etwa 70% stört das grelle Cyan. Aus Neugier habe ich diesen Test anschließend noch auf schwarzem Hintergrund wiederholt, in der Erwartung hier würde sich ein ähnliches Ergebnis zeigen.

Zuersteinmal war ich verwundert dass plötzlich der HSB-Raum chaotischer aussieht als der HSL-Raum und ich wollte daraus schon schlussfolgern, dass sich das HSB-Modell nur auf hellem Hintergrund besser eignet als HSL. Schaut man jedoch genauer hin, so findet man auch hier für den HSB-Raum eine bessere Lesbarkeitsschwelle von etwa 24% (im Gegensatz zu etwa 36% bei HSL, wo das dunkelblau sehr schlecht lesbar ist).

Ergebnisse

In der folgenden Visualisierung können die drei genannten Ansätze interaktiv ausprobiert werden.

Fazit

1. Zur Berechnung der Helligkeit von Text zur Feststellung seiner Lesbarkeit eignet sich das HSB-Modell besser als das HSL-Modell. Dies gilt sowohl auf hellem wie auch dunklem Hintergrund.
2. Farbiger Text lässt sich am Monitor angenehmer lesen, wenn er auf schwarzem Grund steht.