Farbe für Erfolgsmeldungen: Warum #00FF00 scheitert und welche 8 Grüntöne stattdessen taugen
Reines Grün ist die erste Erfolgsfarbe, zu der alle greifen, und für Text die falsche. Die vier Korrekturen, die acht hellen und dunklen Erfolgsfarben aus IBM Carbon und der Code für deine Entwickler.
Die richtige Erfolgsfarbe für Text ist ein dunkleres Grün, nicht #00FF00. Reines Grün wirkt frisch und liest sich auf Weiß trotzdem schlecht, auf einem dunklen Screen blendet es. Hier sind die vier Korrekturen, die acht Erfolgsfarben für Light und Dark Mode und der Code für deine Entwickler.
Warum reines Grün scheitert
Niemand wählt #00FF00 für Erfolgstext. Es passiert einfach. Es ist das Grün in der obersten Reihe jedes Farbwählers, das lime des alten CSS, das erste Grün in einer neuen Designdatei. Und so landet es in der Zeile, die jemandem sagt, dass seine Zahlung durchgegangen ist.
Reines Grün ist hell und gesättigt, also wirkt es wie „Go". Aber genau die Helligkeit ist das Problem. Es ist eine der hellsten Farben, die ein Bildschirm erzeugen kann, und heller Text auf heller Seite hat keinen Halt. Weißer Text auf #00FF00 und #00FF00-Text auf Weiß verfehlen beide das WCAG-Minimum für kleinen Text deutlich.
Die Lösung ist kein anderer Farbton. Es ist dasselbe Grün, dunkler gezogen, bis der Text Gewicht hat, und von den lautesten Flächen ferngehalten.
Die Grüntöne unten stammen aus dem Designsystem IBM Carbon, das eine vollständige Grünskala veröffentlicht und für jede Aufgabe bestimmte Stufen nutzt.
Korrektur 1: Das Grün für Text abdunkeln
Neues Passwort
✓ Passwort ist stark.
✕ #00FF00 auf Weiß: schwer lesbar
Neues Passwort
✓ Passwort ist stark.
✓ #198038 auf Weiß: gut lesbar
Dasselbe Feld, dieselbe Meldung, zwei Grüntöne. Das richtige ist Carbons Green 60. Es ist immer noch klar grün, und es ist das, was dein Auge lesen kann, obwohl das linke das „grünere" Grün ist.
Nutze das dunklere Grün für jeden Erfolgstext: die Zeile unter einem Feld, ein Label, das grün wird, ein Inline-Tag „Verifiziert", das Häkchen-Icon selbst. Halte #00FF00 komplett aus Text heraus. Liegt dein Markengrün nahe an reinem Grün, spare es für Illustrationen und große Display-Schrift auf, wo die Größe die Arbeit übernimmt, die bei kleinem Text die Dunkelheit leistet.
Korrektur 2: Das Banner tönen, dann dunklen Text nutzen
✕ Weiß auf #00FF00: schreit, trotzdem schwer lesbar
✓ #044317 auf #A7F0BA: gut lesbar
Eine durchgehende Neonleiste mit weißem Text ist das Lauteste auf der Seite und trotzdem schwer lesbar, denn Weiß auf #00FF00 hat denselben schwachen Kontrast wie #00FF00 auf Weiß. Die Farben haben nur die Plätze getauscht. Das Problem nicht.
Ein weicher grüner Container mit dunkelgrünem Text sagt „Erfolg" über seine Farbe und lässt die Worte lesbar bleiben. Erfolg ist eine gute Nachricht, also sollte sie nicht brüllen. Shopifys Polaris-System landet am selben Punkt: Seine Erfolgsfläche #CDFED4 trägt dunkelgrünen Text, #014B40.
Nutze den getönten Container für Banner, Toasts und Inline-Hinweisboxen. Reserviere eine durchgehend grüne Fläche für genau eine Sache, den einen Button, der die Aktion bestätigt, und setze ein dunkles oder weißes Label auf ein Grün, das tief genug ist, es zu tragen, etwa #198038.
Korrektur 3: Auf dunklen Screens abmildern
Seitenstatus
✓ Deployment bereit.
✕ #00FF00 auf Dunkel: blendet
Seitenstatus
✓ Deployment bereit.
✓ #42BE65 auf Dunkel: ruhig und klar
Der Dark Mode kehrt den Rat um. Reines Grün auf fast Schwarz besteht das Kontrastminimum mit Leichtigkeit, ein Prüftool schlägt also nicht an. Trotzdem ist es die falsche Wahl. Ein voll gesättigtes Grün auf dunklem Grau glüht und ermüdet das Auge, und eine Liste mit zehn davon ist kaum anzusehen.
Carbons dunkles Theme nutzt ein weicheres, helleres Grün, Green 40, #42BE65. Auf #161616 ist es gut lesbar, ohne zu blenden. Das ist die allgemeine Regel für dunkle Themes: Gesättigte Farben, die auf Weiß funktionieren, werden auf Dunkel heller und weicher. Unser Paper zu Farbsystemen für den Dark Mode deckt den Rest der Palette ab, und die Schwesterregel für Fehler steht in Farbe für Fehlermeldungen.
Korrektur 4: Nie Farbe allein verwenden
Zahlung 1
✕ Nur ein Punkt: Welche ging durch?
Zahlung 1
✓ Erfolgreich
✓ Häkchen und Wort: weiterhin eindeutig
Nimm einen grünen Punkt für „Erfolgreich" und einen roten Punkt für „Fehlgeschlagen". Wandle sie mit den üblichen Luminanzgewichten (0,299 Rot, 0,587 Grün, 0,114 Blau) in Graustufen um, und sie sehen fast identisch aus:
Grüner Punkt #198038 in Grau
Roter Punkt #DA1E28 in Grau
So sieht eine Statusspalte für jemanden mit Rot-Grün-Sehschwäche aus, und ungefähr auch für jeden auf einem ausgebleichten Screen in der Sonne. Jeder Erfolgszustand braucht drei Dinge:
- Eine Farbe: das dunklere Grün auf Hell, das weichere Grün auf Dunkel.
- Eine Form: ein Häkchen vor der Meldung, auch ohne Farbe sichtbar.
- Worte: was passiert ist. „Zahlung eingegangen" schlägt einen grünen Punkt.
Das ist WCAG 1.4.1, Verwendung von Farbe: Farbe kann eine Botschaft unterstützen, aber nie der einzige Weg sein, sie zu vermitteln. Schalte deinen Bildschirm einmal auf Graustufen, bevor du eine Statusliste ausliefest (am Mac: Systemeinstellungen, Bedienungshilfen, Anzeige, Farbfilter; derselbe Filter steckt in den Anzeige-Einstellungen der Bedienungshilfen unter iOS und Android).
Die 8 Erfolgsfarben, hell und dunkel
Tippe auf einen Chip, um seinen Code zu kopieren.
| Rolle | Hell | Dunkel | Einsatz |
|---|---|---|---|
| Erfolg | #198038 | #42BE65 | Erfolgstext, Häkchen-Icons, Erfolgsrahmen |
| Auf Erfolg | #FFFFFF | #161616 | Text auf einer durchgehenden Erfolgsfläche, etwa einem Bestätigen-Button |
| Erfolgscontainer | #A7F0BA | #044317 | Banner, Toasts und Inline-Hinweisboxen |
| Auf Erfolgscontainer | #044317 | #A7F0BA | Text und Icons in diesen Containern |
Das dunkle Theme ist keine neue Palette. Es sind dieselben vier Stufen der Grünskala mit getauschten Rollen: Die Containerfarbe wird zur Textfarbe und umgekehrt.
Gib das deinem Entwickler
Dieselben acht Farben als CSS Custom Properties, wobei die dunklen Werte mit dem System-Theme umschalten:
:root {
--color-success: #198038;
--color-on-success: #FFFFFF;
--color-success-container: #A7F0BA;
--color-on-success-container: #044317;
}
@media (prefers-color-scheme: dark) {
:root {
--color-success: #42BE65;
--color-on-success: #161616;
--color-success-container: #044317;
--color-on-success-container: #A7F0BA;
}
}
.field--valid { border-color: var(--color-success); }
.field__hint--valid { color: var(--color-success); }
.alert--success {
background: var(--color-success-container);
color: var(--color-on-success-container);
}
.alert--success::before { content: "✓ "; }
Carbon nennt diese auf seiner Grünskala Green 60, Green 40, Green 20 und Green 80. Egal welches System du nutzt, die vier Rollennamen sind es wert, geklaut zu werden: Sie halten die nächste Person davon ab, zu #00FF00 zu greifen.
Eine verwandte Falle: iOS systemGreen, #34C759, ist als Text auf Weiß zu hell. Apple nutzt es für Schalter und Flächen, wo die Form die Bedeutung trägt. Kopiere es nicht in Fließtext.
FAQ
Welche Farbe sollten Erfolgsmeldungen haben?
Ein dunkles Grün, das auch in kleinen Größen gut lesbar ist, etwa #198038 auf weißem Hintergrund. Kombiniere es mit einem Häkchen und einem Wort, das sagt, was passiert ist.
Ist #00FF00 für Erfolgstext barrierefrei?
Nein. Reines Grün auf Weiß verfehlt das WCAG-Kontrastminimum für Fließtext deutlich. Nimm ein dunkleres Grün wie #198038.
Welches Grün eignet sich für ein Erfolgsbanner?
Töne die Fläche mit einem blassen Grün wie #A7F0BA und setze dunkelgrünen Text, #044317, darauf. Dieses Paar ist gut lesbar und schreit nicht.
Welche Farbe sollte Erfolg im Dark Mode haben?
Ein weicheres, helleres Grün wie #42BE65 auf #161616. Reines Grün besteht den Kontrastcheck auf dunklen Hintergründen, blendet aber und ermüdet das Auge.
Kann Erfolg allein durch Farbe gezeigt werden?
Nein. Ein grüner und ein roter Punkt sehen in Graustufen gleich aus, und WCAG 1.4.1 verlangt, dass Farbe nie das einzige Signal ist. Ergänze ein Häkchen und ein Wort wie Erfolgreich oder Fehlgeschlagen.
Quellen
- IBM Carbon Design System, Farbübersicht: Green 60 #198038, Green 40 #42BE65, Green 20 #A7F0BA, Green 80 #044317 und Gray 100 #161616.
- WCAG 2.2, 1.4.3 Contrast (Minimum) und 1.4.1 Use of Color.
- Kontrast geprüft mit der WCAG-Formel für relative Luminanz (Weiß auf #00FF00 und #00FF00 auf Weiß 1,37:1; #198038 auf Weiß 5,02:1; #044317 auf #A7F0BA 8,69:1; #42BE65 auf #161616 7,57:1; #00FF00 auf #161616 13,19:1). Die Graustufenwerte nutzen die Luminanzgewichte 0,299, 0,587, 0,114.
- Shopify Polaris Erfolgsfläche #CDFED4 mit Text #014B40, aus
@shopify/polaris-tokens9.4.2. - iOS systemGreen #34C759 gemessen gegen Weiß (2,22:1); siehe Apples Human Interface Guidelines zu Farbe.
- Das Passwortformular, die Quittung an mia@brainy.ink, das brainy-site-Deployment und die Zahlungsliste sind erfundene Beispiele, die für diese Seite gebaut wurden.
- Zuerst als Karussell auf UX Brainy veröffentlicht.
Want success, error and every other state designed as one system? Our team designs and builds product UI that holds up in light and dark.
Get Started
