错误提示的颜色:为什么 #FF0000 不行,以及该用的 8 种红色
纯红是大家最先选中的错误色,却是文字的错误选择。四个修正方法、八种明暗模式下的错误色,以及可以直接交给开发的代码。
错误文字的正确颜色是更深的红色,而不是 #FF0000。纯红看着很吵,但在错误提示常用的小字号下依然难读,在深色屏幕上还会刺眼。下面是四个修正方法、明暗模式下要用的八种颜色,以及可以直接交给开发的代码。
为什么纯红不行
没人会特意选 #FF0000 做错误文字,它是自己跑过来的。它是所有取色器第一行的那个红,是 CSS 里的 red 关键字,是新设计文件里的第一个色板。于是它最后落在了屏幕上那行必须一次就读对的文字上。
纯红明亮、饱和,所以看起来很有力量,但它并不深。它的明度接近中灰。把它放在白底上用小字号,字母的边缘就糊掉了。
解决办法不是换一个色相,而是同一个红,调深到文字有分量为止。
修正 1:文字用更深的红
邮箱
请输入有效的邮箱地址。
✕ 白底上的 #FF0000:难以阅读
邮箱
请输入有效的邮箱地址。
✓ 白底上的 #B3261E:轻松易读
同一个输入框,同一条提示,两种红。右边这个是 Material 3 浅色主题的错误色,你的视线会落在它身上,尽管左边那个才是“更红”的红。
所有错误文字都用这个更深的红:输入框下方的提示、变红的标签、行内的“必填”标记。文字里彻底不要出现 #FF0000。如果你的品牌红接近纯红,就把它留给插画和大号展示字体,在那里靠字号完成小字靠深度完成的工作。
修正 2:横幅用浅色底,别整块涂红
✕ #FF0000 上的白字:大喊大叫,依然难读
✓ #F6CBC8 上的 #410E0B:轻松易读
纯红底配白字的横幅是页面上最吵的东西,却依然难读,因为 #FF0000 上的白字和白底上的 #FF0000 对比度一样弱。颜色换了位置,问题没变。
柔和的红色容器配深红文字,用颜色说“出错了”,同时让文字能被读清楚。紧迫感来自图标和文案。Material 自己的容器色是更浅的 #F9DEDC;我们用深一档的 #F6CBC8,因为更浅的粉色放在深色界面元素旁边会显得发白。
修正 3:深色屏幕上要柔和
邮箱
请输入有效的邮箱地址。
✕ 深色上的 #FF0000:刺眼
邮箱
请输入有效的邮箱地址。
✓ 深色上的 #F2B8B5:平静清晰
深色模式把建议反了过来。近黑背景上的纯红能通过最低对比度要求,所以检测工具不会报错,但深灰上的饱和红边缘会抖动。Material 的深色主题使用浅而柔和的错误红 #F2B8B5,它与深色背景的关系,就像 #B3261E 与白色的关系。
这是深色主题的通用规则:在白底上好用的饱和色,到了深色上要更浅、更柔。我们关于深色模式设计的文章讲了调色板的其余部分。
修正 4:用灰度检查一遍
邮箱
✕ 只有边框:哪个输入框出错了?
邮箱
请输入有效的邮箱地址。
✓ 图标加文字:依然一目了然
纯红和中灰的明度几乎一样,所以只靠红色边框提示错误的输入框,在灰度下看起来和其他输入框没区别。发布表单前,把屏幕切成灰度看一次(Mac 上是系统设置、辅助功能、显示、色彩滤镜;iOS 和 Android 的辅助功能显示设置里也有同样的滤镜)。
每个错误状态都需要三样东西:
- 颜色:浅色背景用更深的红,深色背景用更柔的红。
- 形状:提示前面的图标,不靠颜色也能看见。
- 文字:哪里出了错,以及该怎么做。“请输入有效的邮箱地址”胜过“输入无效”。
这就是 WCAG 1.4.1,颜色的使用:颜色可以辅助传达信息,但绝不能是唯一的方式。
8 种错误色,浅色与深色
点击任意色块即可复制色值。
| 角色 | 浅色 | 深色 | 用途 |
|---|---|---|---|
| 错误色 | #B3261E | #F2B8B5 | 错误文字、错误边框、错误图标 |
| 错误色上的内容 | #FFFFFF | #601410 | 实心错误填充上的文字,比如“删除”按钮 |
| 错误容器 | #F6CBC8 | #8C1D18 | 横幅、轻提示和行内警示框 |
| 错误容器上的内容 | #410E0B | #F9DEDC | 这些容器内的文字和图标 |
把这个交给你的开发
同样的八种颜色写成 CSS 自定义属性,深色值随系统主题切换:
: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);
}
在 Material 中,这些角色已经存在,分别是 colorScheme.error、onError、errorContainer 和 onErrorContainer;与默认值唯一的区别是更深的浅色容器。在其他任何地方,这四个名字都值得偷来用:它们能阻止下一个人去拿 #FF0000。
对比度数据
WCAG 2 要求正文文字至少达到 4.5 比 1。
| 组合 | 对比度 |
|---|---|
| 白底上的 #FF0000 文字 | 4.0 比 1,低于最低要求 |
| 白底上的 #B3261E 文字 | 6.5 比 1 |
| #FF0000 上的白字 | 4.0 比 1,低于最低要求 |
| #F6CBC8 上的 #410E0B 文字 | 11.1 比 1 |
| 深色 #141218 上的 #F2B8B5 文字 | 10.9 比 1 |
| 深色 #141218 上的 #FF0000 文字 | 4.7 比 1,通过了,但依然刺眼 |
最后一行说明了为什么只靠检测工具不够。深色上的纯红在技术上通过了,但依然是错误的选择。
FAQ
错误提示应该用什么颜色?
一种在小字号下也容易阅读的深红色,比如白色背景上的 #B3261E。再配上图标,以及一条说明如何解决问题的提示。
#FF0000 用作错误文字符合无障碍要求吗?
不符合。白底上的纯红对比度约为 4.0 比 1,低于 WCAG 对正文要求的 4.5 比 1,而错误提示通常字号很小。
Material Design 3 的错误色是什么?
浅色主题的错误色是 #B3261E,其上内容为 #FFFFFF,错误容器是 #F9DEDC,文字为 #410E0B。深色主题的错误色是 #F2B8B5,容器是 #8C1D18。
深色模式下错误应该用什么颜色?
更浅、更柔和的红色,比如 #F2B8B5。纯红在深色背景上能通过对比度检查,但会刺眼,读起来不舒服。
可以只用颜色来显示错误吗?
不可以。约每十二个男性中就有一人有某种形式的色盲,而 WCAG 1.4.1 要求颜色绝不能是唯一的信号。请加上图标和文字。
来源
- Material Design 3 基线错误角色(浅色与深色),来自 Material 颜色角色以及 androidx Compose 颜色令牌。
- WCAG 2.2, 1.4.3 Contrast (Minimum) 和 1.4.1 Use of Color。
- 对比度按 WCAG 相对亮度公式计算。纯红和 #808080 灰的相对亮度分别为 0.213 和 0.216。
- 色盲患病率数据来自美国国家眼科研究所。
- 最初以轮播图形式发布于 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
