一组很好的颜色,用于在深色背景上发出警报消息

平面设计 颜色 界面设计
2022-02-18 01:09:00

目标

为深色背景的警报消息选择一个好的颜色组合。

场景

这就是我现在所拥有的:

错误信息

  • 边框/字体颜色:#e84e4f
  • 警报背景颜色:#9c2b2e
  • 车身背景颜色:#d2cece

问题

我不知道...我只是认为颜色不够好。当然,这取决于我的上下文,但我认为红色对于人类的眼睛来说太重、太痛苦和太震撼了——你不也是这样想的吗?

我需要一些其他和谐的颜色来表示非常适合背景的验证错误。

建议?

4个回答

我认为您需要做的就是将文本颜色更改为白色:

在此处输入图像描述

任何高对比度的颜色都可以根据您的图像工作。它不必是红色或某种形式的红色/粉红色。黄色、橙色、浅蓝色、紫色等都可以。我唯一会做的就是避免绿色以远离“成功”的印象。您可以轻松定制警报以匹配您可能正在使用的任何现有配色方案。

关键是保持高对比度。

颜色

显然红色也可以,但是您还需要保留红色背景和文本之间的对比。红色背景上的红色文字对比度不够高。

红色的

你说得对,颜色不够适合场景 - 对比度不够,难以阅读。这里也是一个关于措辞的好读物,这可能是有用的——我也会避开措辞“哎呀”:-)

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

对于颜色——我想我会推荐一种半透明的红色或“浅粉色”——相当标准的颜色,带有错误信息,并且与深红色的文字形成了足够的对比。

(我是 +1 上面的答案,因为他们提出了一个关于肖像的好观点。)

在某种程度上,颜色问题可能更多地与美学有关,这更适合 GD 堆栈交换。

然而,从可用性的角度来看,处理浅色或深色背景时最重要的问题是确保元素具有足够的对比度。

为此,我建议使用这种颜色对比工具来测量您的前景色和背景色。

您使用的当前值太相似了:

在此处输入图像描述

如果您的用户(包括视力不完美的用户)无法阅读它,那么它是什么颜色并不重要。

如果您希望它们都为红色,我要么使背景更暗,文本更亮,要么简单地将文本设置为白色。