Hover- und Pressed-Zustände: Aus der Skala abgeleitet

Die Hover-Farbe eines Buttons sollte nicht aus seiner Ruhefarbe berechnet werden — sie sollte die benachbarte Stufe auf derselben Farbskala sein. In einem hellen Theme ist Hover eine Stufe dunkler als der Ruhezustand und Pressed noch eine Stufe dunkler: Ein Button, der auf brand-600 ruht, hovert bei brand-700 und wird bei brand-800 gedrückt. Drei echte Farben aus der Farbrampe, nicht zwei gefilterte Varianten einer einzigen.

Die Regel klingt fast zu klein, um einen Artikel zu rechtfertigen, und doch gehört ihr Gegenteil — Hover-Zustände, die per Opacity, darken() oder einem Helligkeitsfilter erzeugt werden — zu den häufigsten Fehlern in ausgelieferten Interfaces. Warum benachbarte Stufen gewinnen, wie weit sie auseinanderliegen sollten und warum die ganze Regel im Dark Mode die Richtung umkehrt, folgt alles daraus, wie Farbskalen aufgebaut sind — die Grundlage, die unser Leitfaden zu Farbskalen abdeckt.

Warum nicht Opacity oder ein darken()-Filter?

Weil Filter die Farbrampe verlassen. Der Hover von brand-600 wird zu einer Farbe, die sonst nirgends im System existiert — unbenannt, ungetestet, unsichtbar für die Token-Pipeline — und sie verhält sich auf drei konkrete Arten daneben.

Opacity mischt sich mit allem, was dahinterliegt. Ein Button mit 85 % Opacity ergibt eine Farbe auf einer weißen Seite und eine andere auf einer eingefärbten Karte, sodass der „gleiche” Hover-Zustand über das Produkt hinweg variiert. Schlimmer noch, die Mischung kann mit dem Hintergrund kollidieren: Ein durchscheinendes Blau über einer warmen Fläche nimmt diese Wärme auf, und niemand hat das Ergebnis je gewählt.

Kanalbasiertes Abdunkeln driftet. darken() und Verwandte skalieren RGB-Werte herunter, und in sRGB bewirkt diese Operation mehr als nur Abdunkeln: Sie entsättigt in der Regel und kann den Farbton verschieben, weil die Kanäle unterschiedlich schnell clippen. Der Hover kommt gräulicher und leicht farbtonverschoben heraus — wahrgenommen als schmutzig statt tiefer.

Die gefilterte Farbe wurde nie auf Kontrast geprüft. Die Ruhefarbe hat ihre Mindestwerte bestanden; die Ausgabe des Filters hat gar nichts bestanden. Text, der im Ruhezustand 4,5:1 erfüllte, kann beim Hover stillschweigend durchfallen.

Die CSS-Mechanik ist der triviale Teil — :hover tauscht eine Custom Property oder eine Klasse aus. Die Frage war immer nur, welche Farbe der Tausch hereinbringt, und die Skala enthält die richtige Antwort bereits: die Stufe nebenan, nach denselben Regeln erzeugt, auf demselben Farbton, bereits geprüft.

Wie groß sollte der Sprung zwischen den Zuständen sein?

Eine Stufe ist meist richtig, und die Grenzen auf beiden Seiten erklären, warum.

Die Untergrenze ist perzeptiv: Eine Änderung unterhalb der eben wahrnehmbaren Differenz (JND) liest sich wie gar keine Änderung. Scale Composer warnt, wenn benachbarte Stufen weniger als 0,02 L auseinanderliegen, denn ein Hover-Sprung, der kleiner ist, ist ein Hover, den Nutzer nicht sehen können — der Button fühlt sich tot an, obwohl das Stylesheet schwört, er reagiere.

Die Obergrenze ist Identität: Ein Sprung über mehrere Stufen liest sich als andere Farbe statt als anderer Zustand. Der Button scheint seine Meinung darüber zu ändern, was er ist, und das Auge nimmt einen Austausch wahr, keinen Druck. Zwischen diesen Grenzen landet eine gut gebaute Stufe bequem: klar sichtbar, aber unverkennbar dieselbe Farbe. Pressed nimmt dann die Stufe hinter Hover — die Interaktion vertieft sich in dieselbe Richtung, in der sie begann.

Wie sieht der Gang in Zahlen aus?

Aus der blauen Ausgangsfarbe #2563eb — oklch(0.546 0.215 262.9) — ergibt sich die 600/700/800-Nachbarschaft der Farbrampe so:

Jeder Schritt senkt die Helligkeit um ≈0,09 — rund das Vierfache der JND-Schwelle von 0,02, also unverkennbar, während der Farbton über alle drei Stufen bei 262,9° hält. Diese Farbton-Spalte ist das leise Argument gegen Filter: Ein sRGB-darken() hätte ihn nicht gehalten. Dass das Chroma zum dunklen Ende hin abklingt, ist der Sättigungsplan der Farbrampe selbst am Werk — deshalb liest sich der Pressed-Zustand als dasselbe Blau, tiefer gedrückt, statt als neue, gräulichere Farbe. Der Scale Composer leitet stateNormal, stateHover und statePressed unter seinen semantischen Rollen genau so ab — benachbarte Stufen auf der Farbrampe, zugewiesen gegen die Kontrast-Mindestwerte der Fläche.

Öffne diesen dreistufigen Gang im Scale Composer — Ruhe, Hover und Pressed als Nachbarn auf der blauen Farbrampe hervorgehoben, mit den gemessenen Helligkeitsabständen dazwischen.

Was ist mit Focus und Disabled?

Zwei Zustände fallen nicht unter die Gang-Regel — kurz dazu.

Focus ist keine Änderung der Füllfarbe. Es ist eine eigene Ring-Rolle — eine Kontur, die sowohl gegen den Button als auch gegen die Seite dahinter sichtbar bleiben muss. Sie als „eine Stufe weiter” abzuleiten, begräbt sie; Tastaturnutzer brauchen, dass sich der Ring bemerkbar macht, nicht dass er in der Druck-Sequenz aufgeht.

Disabled tritt ganz aus der Interaktionslogik heraus. Es ist das Paar mit niedrigem Chroma und niedrigem Kontrast im Rollen-Set, und das mit Absicht: Ein deaktiviertes Steuerelement kommuniziert, indem es zurücktritt. Kontrast-Mindestwerte gelten für es nicht — Accessibility-Richtlinien nehmen inaktive Steuerelemente aus — weshalb es der eine Zustand ist, der bei den Prüfungen, welche die anderen bestehen, durchfallen soll.

Warum kehrt der Dark Mode die Richtung um?

Auf dunklen Flächen wird Hover heller, nicht dunkler. Die Konvention stammt aus der Elevations-Logik: In dunklen Themes werden Flächen näher am Betrachter heller dargestellt, und ein gehovertes Steuerelement ist kurzzeitig „angehoben”. Es gibt auch einen schlicht praktischen Grund — von einer dunklen Ruhestufe aus steuert Dunkler auf Schwarz zu, und die Zustandsänderung ersäuft.

Eine abgeleitete dunkle Palette bekommt die Umkehr durch Konstruktion, nicht durch Ausnahme. Scale Composer leitet dunkle Paletten aus derselben Ausgangsfarbe ab, mit ihrer eigenen Helligkeitskurve und einem Chroma-Boost von rund 20 % (dunkle Umgebungen dämpfen die wahrgenommene Farbigkeit), sodass die Stufen der dunklen Farbrampe echte, geordnete Farben für sich sind — und „eine Stufe in die interaktive Richtung gehen” zeigt entlang ihnen einfach in die andere Richtung. Keine theme-spezifischen Hover-Hacks; die Regel überlebt, die Richtung kehrt sich um.

Kippe denselben Button auf die abgeleitete dunkle Palette — die Rollen Ruhe, Hover und Pressed neu abgeleitet auf der dunklen Farbrampe, heller wandernd, wo das helle Theme dunkler wanderte.