Text auf farbigen Buttons: Die richtige On-Farbe wählen
Ein Team veröffentlicht ein Marken-Refresh, und der neue Primary-Button — ein freundlicheres, helleres Blau als das alte — geht mit derselben weißen Beschriftung raus, die jeder Button davor trug. Wochen später kommt das Accessibility-Audit zurück: Die Beschriftung fällt beim Kontrast durch. Niemand hat den Text geändert; die Füllung darunter hat sich verschoben. Die Kombination, die jahrelang bestanden hat, bestand ab dem Tag nicht mehr, an dem die Marke heller wurde.
Der Text auf einem farbigen Button wird gegen die Füllung geprüft, auf der er sitzt, nicht gegen die Seite — und Füllungen mittlerer Helligkeit sind die Falle: Es gibt ein Band von Markenfarben, in dem weder reinweißer noch fast schwarzer Text die 4,5:1-Untergrenze für Beschriftungen in Textgröße erreicht. Systeme lösen das mit einer abgeleiteten On-Farbe — einer Textrolle, die pro Füllung mit einer harten Kontrast-Untergrenze berechnet wird und auf einen fast weißen oder fast schwarzen Anker zurückfällt, wenn keine Stufe der Farbrampe besteht. Wie dieses Band funktioniert und wie du dich per Design daraus befreist, ist dieser Teil unseres Leitfadens zu Farbskalen.
Welches Kontrastpaar wird eigentlich gemessen?
Die Beschriftung gegen die Füllung — sonst nichts. Ein blauer Button auf einer weißen Seite umfasst drei Farben, und das Paar, das entscheidet, ob die Beschriftung lesbar ist, ist Beschriftung-auf-Blau. Die Untergrenzen kommen aus WCAGs Kontrast-Minimum: 4,5:1 für Text in normaler Größe, gelockert auf 3:1 für „großen” Text — ab 24px, oder ab 18,66px bei Fettschrift. Die meisten Button-Beschriftungen sind weder noch, also ist 4,5:1 die geltende Untergrenze.
Rechne die Zahlen für das Blau nach, das in diesem Hub durchgehend verwendet
wird, #2563eb (oklch(0.546 0.215 262.9)): Weißer Text darauf misst ≈5,2:1 —
besteht mit Spielraum. Aber fast schwarzer Text (#111-Klasse) auf derselben
Füllung misst ≈3,6:1 — fällt durch. Diese Füllung hat genau eine gangbare
Richtung, und zufällig ist es die, die die Konvention bevorzugt. Nicht jede
Marke hat so viel Glück.
Wo liegt die Gefahrenzone?
Mach die Marke heller und sieh zu, wie das Bestehen kippt. Ein helleres Blau der
#4A8CF7-Klasse — etwa L 0,65 in OKLCH — ergibt für weißen Text ≈3,3:1 (fällt
bei Text in Textgröße durch), während dunkler Text jetzt bequem ≈5,7:1 erreicht.
Irgendwo zwischen diesen beiden Blautönen tauschen die beiden Optionen die
Plätze, und im Übergangsband — Füllungen um L ≈0,58–0,62 — erreicht weder
reines Weiß noch fast Schwarz 4,5:1. Dieses Band ist die Gefahrenzone, und sie
ist nicht exotisch: freundliche, gesättigte Mitteltöne sind genau dort, wo viele
zeitgenössische Marken gerne leben.
Die intuitive Merkregel: Weißer Text braucht eine dunkle Bühne und dunkler Text eine helle, und eine Füllung mittlerer Helligkeit ist keins von beidem. Sie sitzt in der Mitte der Wippe, wo niemand genug Hebel bekommt.
Was ist eine On-Farbe und wie wird sie abgeleitet?
Die System-Antwort ist, die Beschriftung zu einer abgeleiteten Rolle zu machen
statt zu einer Wahl pro Button. Unter den ~17 semantischen Rollen, die Scale
Composer pro Surface ableitet, ist onFill: die Textfarbe für Inhalt, der auf
einer farbigen Füllung sitzt, gewählt mit einer harten WCAG-Untergrenze — und
wenn keine Stufe der Farbrampe gegen die Füllung besteht, fällt die Rolle auf
einen System-Anker zurück, das fast Weiß oder fast Schwarz, das beim rohen
Kontrast gewinnt. Die Ableitung ersetzt das Raten: Jede Füllung — einschließlich
Funktionsfüllungen wie Fehler und Erfolg —
bekommt eine Beschriftungsfarbe, die zum Zeitpunkt der Generierung geprüft
wurde, und eine künftige Markenänderung leitet die Antwort neu ab, statt sie
still ungültig zu machen.
Öffne die On-Farben-Ableitung im Scale Composer — die
Markenfüllung mit ihrer abgeleiteten onFill-Rolle, dem Kontrastverhältnis, das
sie erreicht, und dem APCA-Wert daneben.
Warum hält sich „einfach Weiß nehmen”?
Zwei ehrliche Gründe. Ästhetisch wirkt Weiß-auf-Farbe für viele Augen sauberer — dunkler Text auf einer farbigen Füllung hat einen utilitaristischen Beiklang, gegen den sich manche Marken sträuben. Und die Ausnahme für großen Text trübt das Bild: Eine fette 19px-Beschriftung braucht nur 3:1, also besteht eine Kombination, die beim Audit für einen Button durchfällt, für ihr größeres Geschwister — und Teams verallgemeinern von dem Button, den sie getestet haben. Die Ausnahme ist real — größere, kräftigere Striche brauchen tatsächlich weniger Kontrast, um lesbar zu sein — aber sie rettet nur die Buttons, die die Größenschwelle wirklich erreichen, und das tun die meisten nicht.
Welche Notausgänge gibt es, wenn die Marke in der Mittelzone sitzt?
Drei, grob geordnet danach, wie oft Systeme dazu greifen:
- Die Füllung eine Stufe abdunkeln. Die stille Entscheidung vieler Systeme: Buttons nutzen die 600 statt der 500, genau damit weißer Text die Untergrenze erreicht. Der Markenfarbton überlebt; die Füllung wandert eine Stufe ihre eigene Farbrampe hinab — dieselbe Bewegung, die Hover- und Pressed-Zustände ableitet.
- Dunklen Text annehmen. Material 3 ging diesen Weg über seine tonalen Paletten — Dunkel-auf-Tonal-Kombinationen als Standard. Es wirkt zeitgemäß, sobald die anfängliche Ungewohntheit verfliegt, und es öffnet die helle Hälfte der Farbrampe für Füllungen.
- Als groß qualifizieren. Mach die Beschriftung fett und dimensioniere sie auf 18,66px oder mehr, dann gilt 3:1. Legitim, aber fragil — es bindet eine Farbentscheidung an eine Typografie-Entscheidung, und die nächste Person, die die Beschriftung verkleinert, bricht den Vertrag unsichtbar.
Ein Absatz zum neueren Instrument: APCA, das Kontrastmodell, um das herum WCAGs nächste Generation gebaut ist, bewertet die Mittelzone feiner als das Verhältnis es tut und unterscheidet Kombinationen, die die 4,5:1-Regel in einen Topf wirft. Der Scale Composer zeigt den Lc-Wert neben jedem Verhältnis, ohne ein Urteil darüber zu fällen, weil APCAs Schwellen von der Verwendung abhängen. Als Zweitmeinung in der Gefahrenzone ist das genau dort, wo diese feinere Körnung hilft.
Finde die Kante deiner eigenen Marke
Ob deine Marke sicher auf einer Seite des Übergangs sitzt oder mittendrin, ist eine Messung, keine Vermutung. Lade eine Füllung mittlerer Helligkeit und sieh zu, wie die On-Farben-Ableitung den Grenzfall bearbeitet — schiebe die Helligkeit der Füllung Schritt für Schritt und sieh, wo die abgeleitete Beschriftung von Weiß auf Dunkel umschlägt, und wo der System-Anker einspringen muss, weil die Farbrampe selbst nichts hat, das besteht. Dieser Umschlagpunkt, einmal gefunden, ist eine Seite Richtlinien wert: Er sagt dir genau, wie viel Spielraum deine Markenfarbe hat, bevor ihre Buttons anfangen, mit ihren eigenen Beschriftungen zu streiten.