成功消息的颜色:为什么 #00FF00 不行,以及该用的 8 种绿色
纯绿是大家挑选成功色时的第一选择,却是文字的错误选择。四个修复方法、来自 IBM Carbon 的八种浅色与深色成功色,以及可以直接交给开发者的代码。
成功文字的正确颜色是更深的绿色,而不是 #00FF00。纯绿看起来很清新,但在白底上依然难以阅读,在深色屏幕上还会刺眼。下面是四个修复方法、浅色与深色模式下要用的八种成功色,以及可以直接交给开发者的代码。
为什么纯绿不行
没人会特意选 #00FF00 作为成功文字。它是自己冒出来的。它是每个取色器第一行的绿色,是旧 CSS 里的 lime,是新设计文件里的第一个绿色。于是它就落在了告诉用户付款成功的那一行上。
纯绿明亮又饱和,所以看起来像「通行」。但亮度恰恰是问题所在。它是屏幕能显示的最亮的颜色之一,浅色文字放在浅色页面上,没有任何着力点。白色文字放在 #00FF00 上,和 #00FF00 文字放在白色上,都远远达不到 WCAG 对小字号文字的最低要求。
解决办法不是换一个色相。而是同一种绿色,调深到文字有分量为止,并且别把它用在最吵的表面上。
下面的绿色来自 IBM Carbon 设计系统,它发布了完整的绿色色阶,并为每种用途指定了具体的色阶。
修复 1:文字用更深的绿色
新密码
✓ 密码强度很高。
✕ 白底上的 #00FF00:难以阅读
新密码
✓ 密码强度很高。
✓ 白底上的 #198038:轻松易读
同一个输入框,同一条消息,两种绿色。正确的是 Carbon 的 green 60。它依然明显是绿色,而且是你的眼睛真正读得清的那个,尽管左边那个才是「更绿」的绿。
每一处成功文字都用这种更深的绿色:输入框下方的提示行、变绿的标签、行内的「已验证」标记,还有对勾图标本身。文字里完全不要出现 #00FF00。如果你的品牌绿接近纯绿,就把它留给插图和大号展示字体,在那里靠字号完成小字号文字靠深色完成的工作。
修复 2:横幅用浅色底,再配深色文字
✕ #00FF00 上的白字:很吵,还是难读
✓ #A7F0BA 上的 #044317:轻松易读
一条纯荧光绿的横条配白字,是页面上最吵的东西,却依然难读,因为 #00FF00 上的白字和白底上的 #00FF00 对比度一样弱。颜色互换了位置,问题却没有消失。
柔和的绿色容器配深绿文字,通过颜色传达「成功」,又让文字能被读清。成功是好消息,不该大喊大叫。Shopify 的 Polaris 系统也得出了同样的结论:它的成功表面色 #CDFED4 搭配深绿文字 #014B40。
横幅、Toast 和行内提示框都用浅色容器。纯绿填充只留给一件事:确认操作的那一个按钮,并在足够深、能承载标签的绿色上(例如 #198038)放深色或白色标签。
修复 3:深色屏幕上要柔化
站点状态
✓ 部署完成。
✕ 深色上的 #00FF00:刺眼
站点状态
✓ 部署完成。
✓ 深色上的 #42BE65:平静清晰
深色模式把建议翻转了过来。近黑底上的纯绿轻松通过对比度下限,所以检查工具不会报错。但它依然是错误的选择。完全饱和的绿色放在深灰上会发光、让眼睛疲劳,一列十个这样的绿更是让人不忍直视。
Carbon 的深色主题用的是更柔和、更浅的绿色,green 40,#42BE65。在 #161616 上它读起来轻松,没有刺眼感。这是深色主题的通用规则:在白底上好用的饱和色,到了深色上要变浅、变柔和。我们关于深色模式色彩系统的文章介绍了色板的其余部分,错误色的对应规则见错误消息的颜色。
修复 4:永远不要只用颜色
付款 1
✕ 只有一个圆点:哪笔成功了?
付款 1
✓ 已成功
✓ 对勾加文字:一目了然
拿一个绿点表示「已成功」,一个红点表示「失败」。用常见的亮度权重(红 0.299、绿 0.587、蓝 0.114)把它们转成灰度,结果几乎一模一样:
灰度下的绿点 #198038
灰度下的红点 #DA1E28
红绿色盲的人看到的状态列就是这样,在阳光下屏幕发白时,大致上任何人看到的也是这样。每个成功状态都需要三样东西:
- 颜色:浅色下用更深的绿,深色下用更柔和的绿。
- 形状:消息前面的对勾,不靠颜色也能看见。
- 文字:发生了什么。「已收到付款」胜过一个绿点。
这就是 WCAG 1.4.1,颜色的使用:颜色可以辅助传达信息,但绝不能是唯一的方式。发布状态列表之前,先把屏幕切到灰度看一次(Mac 上是系统设置、辅助功能、显示器、颜色滤镜;iOS 和 Android 的辅助功能显示设置里也有同样的滤镜)。
8 种成功色,浅色与深色
点击任意色块即可复制色值。
| 角色 | 浅色 | 深色 | 用途 |
|---|---|---|---|
| 成功 | #198038 | #42BE65 | 成功文字、对勾图标、成功边框 |
| 成功之上 | #FFFFFF | #161616 | 纯成功填充上的文字,例如「确认」按钮 |
| 成功容器 | #A7F0BA | #044317 | 横幅、Toast 和行内提示框 |
| 成功容器之上 | #044317 | #A7F0BA | 这些容器内部的文字和图标 |
深色主题不是一套新色板。它是绿色色阶中同样的四个色阶,只是角色对调了:容器色变成文字色,反之亦然。
把这些交给你的开发者
同样的八种颜色写成 CSS 自定义属性,深色值随系统主题切换:
: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 在它的绿色色阶上把这些命名为 green 60、green 40、green 20 和 green 80。不管你用什么系统,这四个角色名都值得偷师:它们能防止下一个人去拿 #00FF00。
还有一个相关的陷阱:iOS 的 systemGreen,#34C759,用在白底文字上太浅。Apple 把它用于开关和填充,那里由形状承载含义。别把它抄进正文文字里。
FAQ
成功消息应该用什么颜色?
一种在小字号下也易读的深绿色,例如白底上的 #198038。再配上对勾和一个说明发生了什么的词。
#00FF00 用作成功文字符合无障碍要求吗?
不符合。白底上的纯绿远远达不到 WCAG 对正文文字的最低对比度要求。请使用更深的绿色,例如 #198038。
成功横幅用什么绿色好?
用 #A7F0BA 这样的浅绿作为底色,再放上深绿文字 #044317。这一对颜色易读,而且不吵。
深色模式下成功应该用什么颜色?
更柔和、更浅的绿色,例如 #161616 上的 #42BE65。纯绿在深色背景上能通过对比度检查,但会刺眼、让眼睛疲劳。
成功状态可以只用颜色表示吗?
不可以。绿点和红点在灰度下看起来一样,而 WCAG 1.4.1 要求颜色绝不能是唯一的信号。请加上对勾和「已成功」或「失败」这样的文字。
来源
- IBM Carbon 设计系统,颜色概览:green 60 #198038、green 40 #42BE65、green 20 #A7F0BA、green 80 #044317 和 gray 100 #161616。
- WCAG 2.2,1.4.3 对比度(最低要求)和 1.4.1 颜色的使用。
- 对比度使用 WCAG 相对亮度公式检查(#00FF00 上的白色与白色上的 #00FF00 均为 1.37:1;白色上的 #198038 为 5.02:1;#A7F0BA 上的 #044317 为 8.69:1;#161616 上的 #42BE65 为 7.57:1;#161616 上的 #00FF00 为 13.19:1)。灰度值使用 0.299、0.587、0.114 的亮度权重。
- Shopify Polaris 的成功表面色 #CDFED4 搭配文字 #014B40,来自
@shopify/polaris-tokens9.4.2。 - iOS systemGreen #34C759 相对白色测得 2.22:1;参见 Apple 的色彩人机界面指南。
- 密码表单、发送至 mia@brainy.ink 的收据、brainy-site 部署以及付款列表,都是为本页专门虚构的示例。
- 最初以轮播图形式发布于 UX Brainy。
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
