Helligkeitskurven: Warum lineare Rampen falsch aussehen

Bau eine zehnstufige blaue Rampe auf die naheliegende Art. Nimm die üblichen Endpunkte — Helligkeit 0,97 oben, 0,25 unten —, teile den Abstand durch neun und verteile gleichmäßige Sprünge von 0,08. Stell das Ergebnis dann neben eine generierte Rampe mit denselben Endpunkten, demselben Farbton, demselben Sättigungsplan. Die gleichmäßige Rampe ist nicht kaputt, aber neben der gekurvten wirkt sie seltsam billig: Ihr helles Ende springt von weißlich zu sichtbar blau, ohne etwas dazwischen, während ihre dunkle Hälfte Stufe um Stufe an nahezu austauschbaren Marineblautönen verbraucht.

Der Unterschied ist die Helligkeitskurve. Interfaces verbrauchen am hellen Ende einer Rampe weit mehr unterscheidbare Werte — Hintergründe, Cards, Washes, dezente und Standard-Rahmen drängen sich alle zwischen L ≈0,84 und 0,97 — als am tiefen Ende. Deshalb verteilt eine gut gebaute Skala die Helligkeit auf einer Kurve: eng gesetzte Stufen oben, größere Schritte durch die Mitteltöne. In Scale Composer ist die Kurve stückweise — zwei Segmente mit eigenen Exponenten, die sich an einem Bruchpunkt bei 75 % des Wegs nach unten treffen — und der obere Exponent wird vom selben Verhältnis gesetzt, das die Schriftgrößenskala der Website steuert. Wie das funktioniert und warum gleichmäßige Abstände scheitern, ist dieser Teil unseres Leitfadens zu Farbskalen.

Warum scheitern gleichmäßige Abstände, wenn Helligkeit perzeptiv ist?

Der Einwand, den man zuerst ernst nehmen sollte: OKLCHs L ist ein perzeptives Maß — so gebaut, dass gleiche Bewegungen in der Helligkeit für das Auge ungefähr wie gleiche Bewegungen aussehen. Teile es gleichmäßig auf, und die Stufen sehen tatsächlich gleichmäßig verteilt aus. Genau das ist das Problem: Das Angebot an Stufen ist gleichförmig, die Nachfrage danach ist es nicht.

Nimm das helle Ende eines typischen Produkt-Screens auf: den Seitenhintergrund, die Card darauf, den Tabellenstreifen, einen Hover-Wash, eine ausgewählte Füllung, einen dezenten Rahmen, einen Standard-Eingaberahmen. Sieben Aufgaben, die unterscheidbare Werte brauchen und alle zwischen L ≈0,84 und 0,97 liegen. Eine lineare Rampe gibt dieser ganzen Nachbarschaft zwei Stufen — 0,97 und 0,89 — mit einem Abstand dazwischen, der für ein Hintergrund-und-Card-Paar zu grob ist. Frag nun, wie viele unterschiedliche Fast-Schwarztöne derselbe Screen braucht: Überschriftentext, vielleicht eine Oberfläche mit hoher Betonung. Die lineare Rampe stattet dieses Ende genauso großzügig aus. Gleichmäßige Abstände scheitern nicht perzeptiv, sondern ökonomisch — sie verbrauchen Auflösung dort, wo niemand sie braucht.

Was macht eine Helligkeitskurve eigentlich?

Sie verschiebt die Auflösung dorthin, wo die Nachfrage ist. Die Kurve von Scale Composer ist stückweise: Die Rampe wird an einem Bruchpunkt geteilt, standardmäßig bei 75 % des Wegs nach unten, was bei L ≈0,43 landet. Jedes Segment folgt seiner eigenen exponentiell geformten Kurve, und ein Exponent über 1 packt die Stufen eines Segments zu dessen hellem Ende hin zusammen. Das obere Segment packt die Stufen Richtung Weiß und gibt den Oberflächen ihre Auflösung. Das untere Segment startet knapp unterhalb des Bruchs sanft neu und schafft eine zweite Tasche eng gesetzter Stufen — die dunklen Textwerte —, bevor es den finalen Sturz zu 900 nimmt, wo ein großer Sprung harmlos ist, weil kaum eine Rolle zwischen Fast-Schwarztönen unterscheidet.

Hier ist die Standardkurve (bei Skalenverhältnis 1,333) gegen die lineare Rampe, gleiche Endpunkte:

Lies zuerst das helle Ende. Die gekurvte Rampe setzt drei Stufen auf oder über L 0,84 gegen die zwei der linearen Rampe — und, ebenso wichtig, ihre Abstände sind abgestuft: ≈0,031 von 50 auf 100, dann ≈0,056, dann ≈0,073, gegen die feste 0,080 der linearen Rampe. Der Übergang vom Hintergrund zur Card wird zu einem Flüstern statt zu einem Ruck. Lies dann die dunkle Hälfte, wo die zweite Tasche auftaucht: Der gekurvte Abstand von 700 zu 800 beträgt ≈0,068, enger als die ≈0,09–0,11 großen Schritte drumherum — genau dort, wo eine Palette ihre dunklen Textstufen unterscheidbar haben will.

Öffne die stückweise Kurve auf dieser Rampe in Scale Composer — die zehn Stufen auf der Kurve aufgetragen, der Bruchpunkt bei 75 % sichtbar und die abgestuften Abstände in der Stufenliste ablesbar.

Was hat die Schriftgrößenskala mit der Farbrampe zu tun?

In Scale Composer teilen sich die beiden eine Zahl. Das für die gesamte Website geltende Skalenverhältnis — der Multiplikator, der die Schriftgrößen der Schriftgrößenskala staffelt — setzt zugleich den oberen Exponenten der Farbkurve:

p₁ = 1 + (ratio − 1) × 1.5

Eine Quarten-Skala (reine Quarte, Verhältnis 1,333) ergibt p₁ ≈ 1,5. Eine dichtere große Terz (1,25) ergibt 1,375; eine dramatischere übermäßige Quarte (1,414) ergibt ≈1,62. Der Effekt läuft in eine Richtung: Je höher der Exponent, desto länger schmiegen sich die hellen Stufen der Rampe an Weiß, bevor sie fallen — bei Verhältnis 1,25 landet Stufe 100 bei L ≈0,931; bei 1,414 steigt sie auf ≈0,946, wobei der Abstieg durch die Mitteltöne entsprechend schneller ist.

Die Folge ist ein System, das sich gemeinsam bewegt. Wähle eine steilere Schriftgrößenskala — größere Sprünge zwischen den Überschriftengrößen, eine theatralischere Hierarchie — und die Farbrampen werden mit ihr steiler: helle Werte feiner und länger gehalten, Mitteltöne schneller abfallend. Wähle eine dichtere, flachere Skala, und die Rampen entspannen sich auf dieselbe Weise. Ob Hierarchie in der Schrift und Hierarchie in der Farbe dasselbe Temperament teilen sollten, ist eine Design-Haltung und kein Gesetz — aber sie zu koppeln bringt etwas Konkretes: einen Regler und keine Möglichkeit für die beiden Systeme, versehentlich auseinanderzudriften.

Wo sollte der Bruchpunkt sitzen?

Der Standard von 75 % legt den Bruch bei L ≈0,43 fest, zwischen den arbeitenden Mitteltönen und den dunklen Textstufen — aber es ist ein Parameter, keine Konstante. Zieh den Bruch höher an der Rampe hinauf, und das untere Segment beginnt früher: Mehr von der Skala wird zu Textauflösungs-Territorium. Schieb ihn tiefer, und das obere Segment dehnt sich und begünstigt Oberflächen. Das Geländer beim Experimentieren ist die JND-Warnung: Wenn zwei benachbarte Stufen einander bis auf 0,02 L nahekommen — ungefähr die Schwelle, unter der sie sich nicht mehr auseinanderhalten lassen —, markiert Scale Composer das Paar, das Zeichen dafür, dass eine Kurve so weit getrieben wurde, bis Stufen kollabiert sind.

Zieh den Bruchpunkt auf dieser Rampe — schieb ihn hoch und runter und beobachte, wie die Auflösungstaschen mit ihm wandern; treib ihn weit genug, und die JND-Warnung zeigt genau, welches Stufenpaar zuerst kollabiert.