Ein guter Farbsatz für eine Warnmeldung auf dunklem Hintergrund

Ich denke, alles, was Sie tun müssen, ist, Ihre Textfarbe in Weiß zu ändern:

Jede kontrastreiche Farbe würde basierend auf Ihrem Bild funktionieren. Es muss nicht rot oder eine Form von Rot/Rosa sein. Ein Gelb, Orange, helleres Blau, Violett usw. würde alle funktionieren. Das einzige, was ich tun würde, ist Grün zu vermeiden, um einen "Erfolgs" -Eindruck zu vermeiden. Sie können die Warnung einfach an jedes vorhandene Farbschema anpassen, das Sie möglicherweise verwenden.

Der Schlüssel ist einfach, den Kontrast hoch zu halten.

Rot funktioniert natürlich auch, aber Sie müssen auch den Kontrast zwischen dem roten Hintergrund und dem Text beibehalten. Roter Text auf rotem Grund ist einfach nicht kontrastreich genug.

Sie haben Recht, die Farben reichen für das Szenario nicht aus - es gibt nicht genug Kontrast, um gut lesbar zu sein. Hier ist auch eine gute Lektüre zur Formulierung, die von Nutzen sein könnte - ich würde auch von der Formulierung "Oops" abraten :-)

http://uxmovement.com/forms/how-to-make-your-form-error-messages-more-reassuring/

Für die Farbe - ich würde ein durchscheinendes Rot oder 'hellrosa' empfehlen, nehme ich an - ziemlich normale Farbe mit Fehlermeldungen und ausreichendem Kontrast zur dunkelroten Schrift.

(Ich gebe der obigen Antwort +1, weil sie einen guten Punkt zur Ikonographie ansprechen.)

Bis zu einem gewissen Grad kann es bei der Frage der Farbe eher um Ästhetik gehen, die besser zum GD-Stack-Austausch passt.

Aus Sicht der Benutzerfreundlichkeit ist jedoch das wichtigste Problem beim Umgang mit hellen oder dunklen Hintergründen, sicherzustellen, dass das Element einen ausreichenden Kontrast aufweist.

Zu diesem Zweck würde ich vorschlagen, so etwas wie dieses Farbkontrast-Tool zu verwenden , um Ihre Vorder- und Hintergrundfarben zu messen.

Die aktuellen Werte, die Sie verwenden, sind zu ähnlich:

Es spielt keine Rolle, welche Farbe es hat, wenn Ihre Benutzer (einschließlich derer mit weniger als perfektem Sehvermögen) es nicht lesen können.

Ich würde entweder den Hintergrund dunkler und den Text heller machen, wenn beide rot sein sollen, oder einfach den Text weiß machen.

Haben Sie eine Ikonografie ausprobiert, die auf den Fehler aufmerksam macht, anstatt die Region einzufärben? Sie könnten ein helles Feld (wie das rote, das Sie haben) mit schwarzem Text verwenden. Das wäre sehr gut lesbar und der helle Hintergrund würde sich vom Hintergrund abheben. Verwenden Sie dann ein Symbol wie dieses in der Box als Blickfang.

Ich habe unten ein schnelles Beispiel zusammengestellt - ich glaube nicht, dass ich Weiß verwenden würde, aber das ist der Hintergrund des Beispielbildes, das ich gefunden habe - wahrscheinlich eher ein helles Grau oder so:

Diese rote Schriftfarbe tötet es, versuchen Sie es heller zu machen (vielleicht weiß, Ihr Alarmhintergrund ist bereits rot genug).

Eine gute allgemeine Methode, der ich folge, besteht darin, immer schwarzen oder weißen Text zu verwenden. Ich addiere einfach jede der RGB-Komponenten und mittele sie und treffe dann die Entscheidung zwischen Weiß oder Schwarz, basierend darauf, auf welcher Seite von 127 sie liegen.

#9C2B2Ezu dezimal istRGB(156, 43, 46)

(156 + 43 + 46)/3 ~= 81,67

81,66 ist näher an 0 als an 255, daher würde ich in diesem speziellen Beispiel weißen Text einfügen.