为什么你的界面配色显得很初级:6个修正方法与精确色值
六个让界面显得初级的配色错误,以及资深设计师的修正方法和精确色值:只用一个强调色、颜色加图标加文字、浅色调区域、更深的强调色文字、黄底用深色文字、每个状态一个色阶。
初级的配色很少是撞色问题。它其实是六个小习惯:强调色太多、让颜色单独承担任务、到处都是满强度填充、用浅色品牌色写文字、黄底配白字,以及所有状态共用一个色阶。资深设计师的配色之所以看起来沉稳,是因为每一条都有规则。下面是这六条,附上色值。
1. 一个强调色,只用于操作
红色
绿色
琥珀色
紫罗兰
中性色
中性色
中性色
强调色 #6440E0
当每个元素都有自己的颜色,颜色就不再代表任何意义。视线无处落脚,真正的操作还得和装饰抢注意力。
选一个强调色,只花在用户可以操作的东西上:主按钮、选中的标签页、链接。其余全部中性化。如果你能指着一个有颜色的元素说“这个不能点”,那就把它的颜色拿掉。60-30-10 法则说的是同一个道理,只是用比例表达:强调色就是那小小的 10。
2. 颜色、图标和文字
邮箱
✕ 初级:只有一圈红边框
邮箱
请填写完整地址,例如 sam@mail.com。
✓ 资深:颜色、图标加文字
邮箱
✕ 初级:哪个输入框有问题?
邮箱
请填写完整地址,例如 sam@mail.com。
✓ 资深:依然一目了然
北欧裔男性中约有 8% 分不清红色和绿色,也就是常说的“每 12 个男性里有 1 个”。对他们,以及在阳光下用手机的任何人来说,红色边框就是灰色边框。
所以一个状态需要三种信号:颜色、前面的图标,以及告诉用户该怎么做的文字。这就是 WCAG 1.4.1 颜色的使用:颜色可以辅助传达信息,但绝不能是唯一的方式。完整的错误色板见我们的文章错误提示的颜色。
3. 大面积用浅色调
$4 升级 Pro
离线地图、无广告、行程分享。
升级✕ 初级:整张卡片都是满强度色
$4 升级 Pro
离线地图、无广告、行程分享。
升级✓ 资深:浅色调底,完整色彩给按钮
一大块满强度的颜色很吵,还会耗光你的强调色。里面的按钮就没东西可用来突出自己了,因为周围已经是同一种颜色。
改为给大面积区域上浅色调,把完整色彩留给真正干活的部分。这里卡片用的是 #E6DDFF,同一紫色的浅色阶,按钮则是完整的 #6440E0。横幅、选中行和高亮区块都可以这么做。我们的文章品牌色板讲了如何从一个色相构建浅色阶。
4. 加深强调色文字
白底浅紫
白底深紫
浅色品牌色用作填充没问题,用作文字就弱了。#9A79FC 放在按钮上很亲切,但作为白底上 14 px 的链接就会糊掉。修正方法是保留色相、降低明度:#6440E0 还是同一种紫,只是深到足够好读。
给需要为这个选择辩护的人:白底上 #9A79FC 的对比度是 3.22 比 1,低于 WCAG 对文字要求的 4.5 比 1,而 #6440E0 是 6.27 比 1。我们的文章无障碍色彩对比度解释了这些数字以及如何检查。
每个品牌色都准备两个版本:明亮的用于填充和插画,更深的用于文字和细线图标。
5. 黄底用深色文字
黄底白字
黄底深字
黄色和浅色天生明亮,所以在上面放白字,亮度几乎没有差别。#FED480 上的白字是 1.41 比 1。同样的黄色上放 #161513 这样的近黑色,则是 12.99 比 1。
这条规则适用于所有浅色填充:淡黄、薄荷绿、天蓝、桃色。背景浅,文字就深。对习惯了品牌色配白字的设计师来说这有点反直觉,但它是让按钮显得专业的最快方法之一。
6. 每个状态一个色阶
默认
按下
禁用
一个按下时和静止时看起来一样的按钮没有任何反馈,而一个禁用状态却涂着和可用状态相同颜色的按钮则像是坏了。给每个状态同一色相的专属色阶:默认 #6440E0,按下 #4422B2,禁用时用浅色调如 #E6DDFF,搭配可读的 #9A79FC 文字标签。
禁用是唯一可以接受低对比度的状态,WCAG 也对此豁免,但文字标签仍应足够清晰,让人明白这个按钮本来能做什么。同样这三个色阶也适用于链接、标签页和开关。
一张表看完六个修正
| 初级 | 资深 | 色值 |
|---|---|---|
| 多个强调色 | 一个强调色,用于操作 | #6440E0 只给唯一该点的东西 |
| 只靠颜色 | 颜色、图标加文字 | 绝不作为唯一信号 |
| 满色区域 | 浅色调区域 | 背景 #E6DDFF,按钮 #6440E0 |
| 浅色品牌色当文字 | 更深的强调色文字 | #6440E0,而不是 #9A79FC |
| 黄底白字 | 黄底深字 | #161513 配 #FED480 |
| 所有状态一个色阶 | 每个状态一个色阶 | #6440E0、#4422B2、#E6DDFF 配 #9A79FC 标签 |
FAQ
什么会让界面配色显得业余?
强调色太多、单靠颜色传达含义、大面积满强度填充,以及用浅色品牌色写文字。修好这四点,通常比换色板本身更重要。
一个界面应该有多少个强调色?
一个。只用在用户可以点击或操作的地方,其余保持中性。像错误用红色这样的状态色是另外的,而且始终要配图标和文字。
黄色背景上应该用什么文字颜色?
深色。#161513 配 #FED480 约为 13 比 1,而同一黄色上的白字约为 1.4 比 1。任何浅色背景都是如此。
如何让浅色品牌色作为文字也清晰可读?
保留色相,降低明度。#9A79FC 在白底上约为 3.2 比 1,而同一种紫色的 #6440E0 约为 6.3 比 1。
按下状态的按钮应该是什么颜色?
比默认色更深的色阶,例如相对 #6440E0 的 #4422B2。它让用户知道点击已被识别,同时不改变色相。
禁用按钮需要满足对比度要求吗?
WCAG 对禁用控件豁免了最低对比度要求,但仍要保持文字标签清晰,让人看得出按钮的作用。
Sources
- WCAG 2.2, 1.4.3 Contrast (Minimum)(文字 4.5 比 1,禁用组件豁免)以及 1.4.1 Use of Color。
- 对比度按 WCAG 相对亮度公式计算:#FFFFFF 上的 #9A79FC 为 3.22 比 1,#FFFFFF 上的 #6440E0 为 6.27 比 1(两者色相均约 254 度),#FED480 上的 #FFFFFF 为 1.41 比 1,#FED480 上的 #161513 为 12.99 比 1。
- 据 National Eye Institute,红绿色觉缺陷影响约 8% 的北欧裔男性。
- 状态色阶(按下 #4422B2,禁用 #E6DDFF 配 #9A79FC 标签)是我们自己的色板。第 1 节中的筛选项颜色仅作示意。
- 最初作为轮播图发布于 UX Brainy。
Want a palette that guides the eye across your whole product? Our team designs and builds UI and design systems with color decided once.
Get Started
