Erfolg, Warnung, Fehler, Info: Funktionsfarben richtig gemacht

Stell dir ein gedämpftes Enterprise-Dashboard vor: schieferblaue Markenfarbe, getönte Grautöne, nichts lauter als ein Gemurmel — eine Palette, abgestimmt auf Achtstundentage. Ein Speichern läuft durch, und ein Toast schiebt sich herein: Vollgas-Neongrün, direkt aus den Voreinstellungen einer Komponenten-Bibliothek. Mit dem Grün als Grün ist nichts verkehrt. In dieser Oberfläche wirkt es wie aus einem anderen Produkt hineinkopiert — und die Naht, die es offenlegt, zieht sich durch die gesamte Kategorie von Farben, zu der es gehört.

Funktionsfarben — Erfolgsgrün, Warn-Bernsteinorange, Fehlerrot, Info-Blau — sind die vier konventionellen Intent-Farben des Interface-Designs, und sie richtig zu machen bedeutet zwei Verpflichtungen: Halte die Farbtöne an der Konvention, denn Nutzer kommen bereits darauf trainiert an, sie zu lesen, und baue jede als vollständige Rampe, abgestimmt auf deine Palette — Chroma an das Gesamtniveau der Palette angepasst, Helligkeit so gesetzt, dass alle vier gleich laut wirken und den Kontrast bestehen, und der Farbton nie allein gelassen, um eine Bedeutung zu tragen. Der Neon-Toast scheitert an der Abstimmungshälfte. Dieser Artikel behandelt beide Hälften; die Rampen-Mechanik darunter steckt in unserem Leitfaden zu Farbskalen.

Warum Grün, Bernstein, Rot und Blau — und nicht Farbtöne deiner Wahl?

Weil der Code erlernt ist, nicht natürlich. Nichts in der Wahrnehmung macht, dass Grün Erfolg bedeutet; die Assoziation ist eine Konvention, verstärkt durch Ampeln und durch Jahrzehnte von Interfaces, die dieselben Zuordnungen wiederholen, und Nutzer bringen sie in jedes neue Produkt mit. Genau dieses Vortraining ist der ganze Wert: Ein roter Rahmen liest sich als „etwas ist fehlgeschlagen“, bevor ein einziges Wort verarbeitet ist.

Gegen die Konvention anzukämpfen kostet Verständlichkeit. Ein violetter Fehler ist zuerst ein Rätsel und erst dann eine Botschaft, und die Steuer wird zu den denkbar schlechtesten Momenten fällig — wenn bereits etwas schiefgegangen ist. Die Marke drückt sich überall sonst in der Palette aus; diese vier sind der Ort, an dem man sich fügt. Was du behältst, ist trotzdem beträchtlich: der genaue Farbtonwinkel innerhalb jedes Bandes, das Chroma-Niveau, die Helligkeitsplatzierung — genug Freiheit, um die vier unverkennbar zu deinen zu machen, ohne den Code zu brechen.

Warum ist jede Funktionsfarbe eine Rampe und kein einzelnes Farbfeld?

Verfolge Fehler durch ein einziges Formular-Absenden. Das fehlerhafte Feld braucht einen blassroten Hintergrund — eine Tönung auf 50er-Ebene. Das Icon und der Rahmen des Feldes brauchen einen mittelstarken Kern, ein 500 oder 600. Der Meldungstext unter dem Feld braucht ein 700, das 4,5:1 gegen die blasse Tönung dahinter schafft. Ein Intent, drei Stufen — und Hover-Zustände, dunkle Flächen und Diagramme fügen immer weitere hinzu. Das ist dieselbe Tönung-Kern-Text-Anatomie, die eine Marken-Rampe hat, und ein einzelnes Farbfeld der Klasse #ff0000 kann sie nicht liefern.

In Scale Composer sind die vier Intents eine feste Gruppe in der Paletten-UI, und jede wird als vollständige 50–900-Rampe von derselben Mechanik wie die Markenfarbe erzeugt: Stufen auf der Helligkeitskurve, Chroma von einem Profil geformt und unterhalb der Gamut-Decke gedeckelt, semantische Rollen pro Fläche gegen WCAG-Grenzwerte und APCA abgeleitet.

Öffne die vier Funktionsrampen in Scale Composer — Erfolg, Warnung, Fehler und Info als zehnstufige Skalen, jede mit ihren Tönungs-, Kern- und Text-Stufen, abgeleitet auf dieselbe Weise wie die der Marken-Rampe.

Die vier Funktionsfarben-Rampen in Scale Composer — Erfolg, Warnung, Fehler und Info, jede eine vollständige zehnstufige Skala von blasser Tönung bis zur dunklen Text-Stufe

Wie bringst du die vier dazu, sich nativ statt hineinkopiert anzufühlen?

Gleiche ihr Chroma an das Gesamtniveau der Palette an. Der Neon-Toast scheitert an der Distanz: Eine gedämpfte Palette, deren Markenspitze um Chroma ≈0,09 liegt, kann kein Erfolgsgrün bei ≈0,22 aufnehmen — das Grün spielt in einem anderen Register. Zieh das Spitzen-Chroma der vier zum Niveau der Palette hin, leicht darüber, damit sie noch signalisieren: etwa ≈0,11–0,13 gegen jene ≈0,09-Marke, als Richtwert. Der umgekehrte Fehler existiert ebenfalls — eine leuchtende Consumer-Palette mit zaghaften Funktionsfarben lässt echte Zustände dekorativ aussehen.

Diese Regel lässt sich überhaupt nur formulieren, weil OKLCH-Chroma über alle Farbtöne hinweg absolut ist: „die vier erreichen ihre Spitze innerhalb von ≈0,02 der Marke“ bedeutet dieselbe Menge Farbe für das Grün, das Bernstein, das Rot und das Blau gleichermaßen.

Warum schreit Rot, während Grün bei „gleicher“ Intensität flüstert?

Weil die Primärfarben bei voller Stärke perzeptiv schief sind. Volles Rot #ff0000 ist oklch(≈0.63 0.26 29); volles Grün #00ff00 ist oklch(≈0.87 0.29 142). Wähle beide bei „voller Intensität“, und du hast eine schwere, dunkle Farbe mit einer luftigen, hellen gepaart — der Fehler dominiert jedes Layout, das er sich mit Erfolg teilt, liest sich zorniger als beabsichtigt, während das Grün zur Tapete verblasst.

Die Lösung ist Platzierung, nicht Intuition: Gib den vier ähnliches Chroma und ähnliche Kern-Helligkeit in OKLCH — sagen wir Kerne nahe L ≈0,55–0,60 bei angeglichenem Chroma — und sie kommen gleich laut heraus. Gleiche Lautstärke ist eine Paletten-Eigenschaft, die du konstruieren kannst, kein Zufall, auf den du hoffst.

Warum ist Warnung die schwierigste der vier?

Weil Bernstein hoch oben lebt. Das Farbtonband, das Nutzer als „Warnung“ lesen, erreicht sein leuchtendstes Bestes bei hoher Helligkeit — ein repräsentatives Bernstein liegt um oklch(≈0.77 0.19 70) — und gegen einen weißen Hintergrund rechnet sich das zu ungefähr 2,1:1. Das scheitert an allem: am 3:1-Grenzwert für Icons und Rahmen und am 4,5:1-Grenzwert für Text.

Der durchgerechnete Fall: Um 3:1 gegen Weiß zu schaffen, muss ein Bernstein-Icon oder -Rahmen seine Helligkeit auf etwa L ≈0,67 herunter; Warn-Text auf Weiß braucht etwa L ≈0,57. Aber Bernstein abzudunkeln zieht es Richtung Braun, also besteht das Handwerk darin, das Chroma hochzuhalten, während die Stufen dunkler werden, hinzunehmen, dass die 600–700-Stufen oranger wirken als die 500, und sich auf die Anatomie der Rampe zu stützen: Eine blasse 50–100-Bernsteinfläche mit dunklem 700–800-Bernsteinbraun-Text trägt den Intent, während das 3:1-schaffende 600 den Rahmen zeichnet. (Auf dunklen Hintergründen entspannt sich das Problem — helles Bernstein ist dort zu Hause.)

Was ist mit Nutzern, die den Farbton gar nicht lesen können?

Ungefähr 1 von 12 Männern hat eine Rot-Grün-Sehschwäche, die genau die Erfolg-Fehler-Unterscheidung zusammenbrechen lässt, auf die sich die Konvention stützt. Deshalb ist der Farbton nie das einzige Signal: WCAGs Kriterium zur Verwendung von Farbe macht das zu einer harten Regel, und die praktische Form ist, dass ein Icon und Text die Farbe immer begleiten. Die Rampen-Anatomie hilft auch hier — ein blass getönter Hintergrund mit dunklem Text trägt „etwas braucht Aufmerksamkeit“ allein durch die Helligkeitsstruktur, selbst für jemanden, der das rote Feld nicht vom grünen unterscheiden kann.

Die Abstimmungshälfte ist der Teil, den man üben sollte, denn es ist der Teil, den Komponenten-Bibliotheken auslassen. Stimme die vier Funktionsrampen gegen eine gedämpfte Markenpalette neu ab — zieh ihr Chroma zum Niveau der Palette hin und beobachte den Moment, in dem der Toast aufhört zu schreien und anfängt, dazuzugehören.