Farbe für Fehlermeldungen: Warum #FF0000 scheitert und welche 8 Rottöne Sie stattdessen nutzen
Reines Rot ist die erste Fehlerfarbe, die jeder wählt, und die falsche für Text. Die vier Korrekturen, die acht hellen und dunklen Fehlerfarben und der Code für Ihre Entwickler.
Die richtige Fehlerfarbe für Text ist ein dunkleres Rot, nicht #FF0000. Reines Rot wirkt laut und lässt sich in den kleinen Schriftgrößen von Fehlermeldungen trotzdem schlecht lesen, und auf dunklen Screens flimmert es. Hier sind die vier Korrekturen, die acht Farben für Light und Dark Mode und der Code für Ihre Entwickler.
Warum reines Rot scheitert
Niemand wählt #FF0000 für Fehlertext. Es passiert einfach. Es ist das Rot in der obersten Reihe jedes Farbwählers, das Schlüsselwort red in CSS, das erste Farbfeld in einer neuen Designdatei. So landet es in der einen Zeile des Screens, die beim ersten Mal richtig gelesen werden muss.
Reines Rot ist hell und gesättigt, wirkt also stark, ist aber nicht dunkel. Seine Helligkeit liegt nahe an einem mittleren Grau. Setzen Sie es klein auf Weiß, verlieren die Buchstaben ihre Kanten.
Die Lösung ist nicht ein anderer Farbton. Es ist dasselbe Rot, dunkler gezogen, bis der Text Gewicht hat.
Korrektur 1: Das Rot für Text abdunkeln
Geben Sie eine gültige E-Mail-Adresse ein.
✕ #FF0000 auf Weiß: schwer lesbar
Geben Sie eine gültige E-Mail-Adresse ein.
✓ #B3261E auf Weiß: gut lesbar
Dasselbe Feld, dieselbe Meldung, zwei Rottöne. Das richtige ist die Fehlerfarbe des hellen Themes von Material 3, und genau dort landet Ihr Blick, obwohl das linke das „rötere“ Rot ist.
Nutzen Sie das dunklere Rot für jeden Fehlertext: die Meldung unter einem Feld, ein Label, das rot wird, ein Inline-Hinweis „Pflichtfeld“. Halten Sie #FF0000 komplett aus Text heraus. Liegt Ihr Markenrot nah an reinem Rot, behalten Sie es für Illustrationen und große Display-Schrift, wo die Größe die Arbeit übernimmt, die in kleinem Text die Dunkelheit leistet.
Korrektur 2: Den Banner tönen, nicht anmalen
✕ Weiß auf #FF0000: schreit, bleibt schwer lesbar
✓ #410E0B auf #F6CBC8: gut lesbar
Ein durchgehend roter Balken mit weißem Text ist das Lauteste auf der Seite und trotzdem schwer zu lesen, denn Weiß auf #FF0000 hat denselben schwachen Kontrast wie #FF0000 auf Weiß. Die Farben haben die Plätze getauscht, das Problem nicht.
Ein sanfter roter Container mit dunkelrotem Text sagt „Fehler“ über seine Farbe und lässt die Worte lesbar bleiben. Die Dringlichkeit kommt vom Icon und von der Meldung. Materials eigener Container ist ein blasseres #F9DEDC; wir nehmen eine Stufe tiefer, #F6CBC8, weil das blassere Rosa neben dunklen Interface-Elementen verwaschen wirkt.
Korrektur 3: Auf dunklen Screens abmildern
Geben Sie eine gültige E-Mail-Adresse ein.
✕ #FF0000 auf Dunkel: flimmert
Geben Sie eine gültige E-Mail-Adresse ein.
✓ #F2B8B5 auf Dunkel: ruhig und klar
Der Dark Mode dreht den Rat um. Reines Rot auf fast Schwarz erfüllt das Kontrastminimum, ein Prüftool schlägt also nicht an, aber ein gesättigtes Rot auf dunklem Grau vibriert an den Rändern. Materials dunkles Theme nutzt ein helles, weiches Fehlerrot, #F2B8B5, das zum dunklen Hintergrund dieselbe Beziehung hat wie #B3261E zu Weiß.
Das ist die allgemeine Regel für dunkle Themes: Gesättigte Farben, die auf Weiß funktionieren, werden auf Dunkel heller und weicher. Unser Beitrag zum Dark-Mode-Design behandelt den Rest der Palette.
Korrektur 4: In Graustufen prüfen
✕ Nur Rahmen: welches Feld ist falsch?
Geben Sie eine gültige E-Mail-Adresse ein.
✓ Icon und Worte: weiterhin eindeutig
Reines Rot und ein mittleres Grau haben fast dieselbe Helligkeit. Ein Feld, dessen einziges Fehlersignal ein roter Rahmen ist, sieht in Graustufen aus wie jedes andere Feld. Schalten Sie Ihren Bildschirm einmal auf Graustufen, bevor Sie ein Formular ausliefern (Systemeinstellungen, Bedienungshilfen, Anzeige, Farbfilter auf dem Mac; derselbe Filter steckt in den Anzeigeeinstellungen der Bedienungshilfen auf iOS und Android).
Jeder Fehlerzustand braucht drei Dinge:
- Eine Farbe: das dunklere Rot auf Hell, das weichere Rot auf Dunkel.
- Eine Form: ein Icon vor der Meldung, auch ohne Farbe sichtbar.
- Worte: was schiefgelaufen ist und was zu tun ist. „Geben Sie eine gültige E-Mail-Adresse ein“ schlägt „Ungültige Eingabe“.
Das ist WCAG 1.4.1, Verwendung von Farbe: Farbe darf eine Botschaft unterstützen, aber nie der einzige Weg sein, sie zu vermitteln.
Die 8 Fehlerfarben, hell und dunkel
Tippen Sie auf einen Chip, um den Code zu kopieren.
| Rolle | Hell | Dunkel | Verwenden für |
|---|---|---|---|
| Fehler | #B3261E | #F2B8B5 | Fehlertext, Fehlerrahmen, das Fehler-Icon |
| Auf Fehler | #FFFFFF | #601410 | Text auf einer vollflächigen Fehlerfüllung, etwa einem Löschen-Button |
| Fehler-Container | #F6CBC8 | #8C1D18 | Banner, Toasts und Inline-Hinweisboxen |
| Auf Fehler-Container | #410E0B | #F9DEDC | Text und Icons in diesen Containern |
Das geben Sie Ihrem Entwickler
Dieselben acht Farben als CSS Custom Properties, wobei die dunklen Werte mit dem System-Theme umschalten:
:root {
--color-error: #B3261E;
--color-on-error: #FFFFFF;
--color-error-container: #F6CBC8;
--color-on-error-container: #410E0B;
}
@media (prefers-color-scheme: dark) {
:root {
--color-error: #F2B8B5;
--color-on-error: #601410;
--color-error-container: #8C1D18;
--color-on-error-container: #F9DEDC;
}
}
.field--invalid { border-color: var(--color-error); }
.field__error { color: var(--color-error); }
.alert--error {
background: var(--color-error-container);
color: var(--color-on-error-container);
}
In Material existieren diese Rollen bereits als colorScheme.error, onError, errorContainer und onErrorContainer; die einzige Änderung gegenüber dem Standard ist der tiefere helle Container. Überall sonst sind die vier Namen es wert, geklaut zu werden: Sie halten die nächste Person davon ab, zu #FF0000 zu greifen.
Die Kontrastwerte
WCAG 2 verlangt für Fließtext mindestens 4,5 zu 1.
| Paar | Kontrast |
|---|---|
| #FF0000 Text auf Weiß | 4,0 zu 1, unter dem Minimum |
| #B3261E Text auf Weiß | 6,5 zu 1 |
| Weißer Text auf #FF0000 | 4,0 zu 1, unter dem Minimum |
| #410E0B Text auf #F6CBC8 | 11,1 zu 1 |
| #F2B8B5 Text auf dunklem #141218 | 10,9 zu 1 |
| #FF0000 Text auf dunklem #141218 | 4,7 zu 1, besteht und vibriert trotzdem |
Die letzte Zeile zeigt, warum ein Prüftool nicht reicht. Reines Rot auf Dunkel besteht technisch und ist trotzdem die falsche Wahl.
FAQ
Welche Farbe sollten Fehlermeldungen haben?
Ein dunkles Rot, das sich auch in kleinen Größen gut lesen lässt, etwa #B3261E auf weißem Hintergrund. Kombinieren Sie es mit einem Icon und einer Meldung, die sagt, wie das Problem zu beheben ist.
Ist #FF0000 für Fehlertext barrierefrei?
Nein. Reines Rot auf Weiß hat einen Kontrast von etwa 4,0 zu 1, unter den 4,5 zu 1, die WCAG für Fließtext verlangt, und Fehlermeldungen sind meist klein.
Was ist die Fehlerfarbe in Material Design 3?
Die Fehlerrolle im hellen Theme ist #B3261E mit #FFFFFF darauf, der Fehler-Container ist #F9DEDC mit Text in #410E0B. Im dunklen Theme ist die Fehlerrolle #F2B8B5 und der Container #8C1D18.
Welche Farbe sollten Fehler im Dark Mode haben?
Ein helleres, weicheres Rot wie #F2B8B5. Reines Rot besteht den Kontrasttest auf dunklen Hintergründen, vibriert aber und ist unangenehm zu lesen.
Kann ein Fehler nur mit Farbe angezeigt werden?
Nein. Etwa jeder zwölfte Mann hat eine Form von Farbenblindheit, und WCAG 1.4.1 verlangt, dass Farbe nie das einzige Signal ist. Ergänzen Sie ein Icon und Worte.
Quellen
- Die Basis-Fehlerrollen von Material Design 3, hell und dunkel, aus den Material-Farbrollen und den androidx-Compose-Farbtokens.
- WCAG 2.2, 1.4.3 Kontrast (Minimum) und 1.4.1 Verwendung von Farbe.
- Kontrastverhältnisse berechnet mit der WCAG-Formel für relative Luminanz. Reines Rot und #808080 Grau haben eine relative Luminanz von 0,213 und 0,216.
- Häufigkeit von Farbenblindheit vom National Eye Institute.
- Erstmals veröffentlicht als Karussell auf UX Brainy.
Want error states, forms and every other state designed as one system? Our team designs and builds product UI that holds up in light and dark.
Get Started
