Die Helligkeit, englisch brightness, beschreibt, wie viel Licht eine Fläche auszustrahlen oder zurückzuwerfen scheint. In Farbmodellen ist sie neben Farbton und Sättigung die dritte Größe, allerdings mit unterschiedlicher Bedeutung: In HSB ist volle Helligkeit die reine Farbe, in HSL ist sie Weiß. Für die Lesbarkeit von Text zählt der Helligkeitsunterschied mehr als jeder Unterschied im Farbton.
- Helligkeit (Brightness)
Das Maß dafür, wie hell eine Farbe erscheint, also wie viel Licht eine Fläche abzugeben scheint.
Beispiel: „Die Helligkeit der Schriftfarbe reicht auf dem hellblauen Grund nicht für einen guten Kontrast.“Abgrenzung zum Hellbezugswert, englisch lightness: Die CIE misst ihn an einer weißen Fläche in gleicher Beleuchtung, die Helligkeit dagegen absolut.
Helligkeit in HSB und HSL
Im Modell HSB, auch HSV, beschreibt die Helligkeit den Abstand von Schwarz. Rot, Weiß und Gelb haben dort dieselbe Helligkeit, weil keiner von ihnen Schwarz enthält. In HSL dagegen bedeutet 0 Prozent Schwarz, 50 Prozent die reine Farbe und 100 Prozent Weiß. Wer zwischen Grafikprogramm und CSS wechselt, rechnet deshalb leicht falsch.
Warum die Helligkeit in HSL täuscht
Die Helligkeit in HSL entspricht nicht der Wahrnehmung: Reines Blau und reines Gelb haben beide 50 Prozent, Blau wirkt aber viel dunkler. Das Modell OKLCH löst das; gleiche Werte für L wirken dort gleich hell, auch bei verschiedenen Farbtönen.
.akzent {
color: oklch(60% 0.15 250);
}Helligkeit und Kontrast
Ob Text lesbar ist, entscheidet der Helligkeitsunterschied zum Hintergrund. Die WCAG rechnen ihn über die relative Leuchtdichte in ein Kontrastverhältnis um.