强调色配色方案:16 种强调色,以及每一种需要的文字颜色
16 套强调色配色方案,附精确的十六进制色值,并针对强调色最重要的任务逐一测试:在按钮上承载清晰可读的文字。看看哪些强调色适合白字,哪些适合深色字,哪些两者都不行。
强调色是界面里唯一一个意味着“点这里”的颜色。只有当它上面的文字能被看清,它才管用,所以决定一个强调色好不好的,是文字标签。下面用四项测试检验十六种强调色,附上每个十六进制色值,以及每种强调色适用的标签颜色。
强调色必须通过的考验
判断一个强调色,就看在它上面放一个字会发生什么。标签必须清晰可读,按钮也必须在背后的页面上足够醒目。
由此得出四项测试。它适合白色还是深色标签,还是落在中间两者都不行?它能承载小号标签文字吗?它是否太浅,不适合当按钮,比如 Butterscotch Gold #F7C873?
下面每套配色都由墨色、强调色和底色组成,最后一块色块展示测试结果。
强调色适合哪种标签
青绿、钴蓝和玫瑰红足够深,白色标签隔着一间屋子都看得清。琥珀 #C88A16 就不行。
青绿
深海
青绿
粉笔白
青绿上的白字
一种深青绿,承载白色标签绰绰有余。
钴蓝
海军墨
钴蓝
薄雾
钴蓝上的白字
四者中最强的一个。钴蓝上的白字隔着一间屋子也能看清。
玫瑰红
梅子墨
玫瑰红
贝壳白
玫瑰红上的白字
在三个适合白色标签的强调色里,玫瑰红最浅,所以余量最小。不要再把它调浅了。
琥珀
树皮棕
琥珀
燕麦
琥珀上的树皮棕
琥珀是最诚实的一个。白字在上面不合格,而答案并不是换成更深的琥珀:把标签设为树皮棕,颜色原封不动。
这就是强调色的全部使命:它必须经得起你放在上面的文字。琥珀说明,解决办法很少是换一种颜色。换标签,保品牌。
中间色调的死亡地带
有些强调色落在明度范围的中间:对白字来说太浅,对深色字来说太深。这四种里有两种朝相反方向逃出了死亡地带,另外两种被困住了。
French Winery
French Winery
French Winery 上的白字:通过
French Winery 上的 Midnight Express #1D2433:不通过
Magnolia Petal
深到足以使用白字。French Winery 靠变深离开了死亡地带。
Wild Forest
Wild Forest
Wild Forest 上的白字:不通过
Wild Forest 上的 Nightwalker #2B1A35:不通过
Vintage Porcelain
一种清新的绿色,恰好落在正中间。白字不行,深色字也不行。调深一档,白字就能通过,所以在设计任何一个按钮之前,先微调这个绿色。
Glowing Lantern
Glowing Lantern
Glowing Lantern 上的白字:不通过
Glowing Lantern 上的 Aztec #153023:通过
Silent Snowfall
浅到足以使用深色字。Glowing Lantern 朝另一个方向离开了死亡地带,也就是变浅,所以它的标签是 Aztec,绝不是白色。
Pink Orchid
Pink Orchid
Pink Orchid 上的白字:不通过
Pink Orchid 上的 Royal Neptune #0F2E30:不通过
Snowflake
一种中间色调的粉色,问题和 Wild Forest 一样。调深一档,白字就能通过。
大号文字的标准比小号文字低,所以大标题在这些颜色上可能看着没问题,按钮标签却不合格。检查你要放在强调色上的最小文字。如果你的品牌强调色落在中间,先微调它,再去做按钮组。
按钮不是徽章
徽章通常用约 15% 的强调色做背景,用完整的强调色做文字。这层淡色提亮了背景,于是上面的文字对比度下降。一个强调色可以承载白色按钮标签,却仍会在自己的徽章里不合格。第三块色块就是 15% 强调色叠在底色上的效果。
Peacock Pride
Peacock Pride
白色按钮标签:通过
淡色 #D5E1D2 上的 Peacock Pride:通过
淡色上的 Wood Bark #2A2320:通过
一种深青绿,在 Cosmic Latte #FBF7E6 上两项任务都能胜任。
Furnace
Furnace
白色按钮标签:通过
淡色 #EAD9D1 上的 Furnace:不通过
淡色上的 Elite Teal #13302A:通过
一个强烈的红橙色按钮,当标签时就变弱了。在 White Glove #EEF4F0 上,把标签文字设为墨色,徽章就读得顺了。
Purple Heart
Purple Heart
白色按钮标签:通过
淡色 #E6D3DF 上的 Purple Heart:通过
淡色上的 Black Velvet #1B2838:通过
足够深,在 Vanilla Blush #FDF1EC 上,背后的淡色根本不构成影响。
French Blue
French Blue
白色按钮标签:通过
淡色 #D9E3E3 上的 French Blue:不通过
淡色上的 Nightly Voyager #2A1630:通过
和 Furnace 同一个故事:按钮没问题,徽章不行。在 Powdered #FFF6E8 上,墨色拯救了徽章文字。
如果你的强调色是中间色调,徽章和标签文字请用你的墨色。文字一换成墨色,Furnace 的标签和 French Blue 的徽章都立刻变得好读。
最亮的那个不是按钮
按钮必须从它所在的页面上清楚地跳出来。一个又浅又亮的强调色放在奶油色页面上就做不到,哪怕它是整套配色里最好看的颜色。
所以要交换分工。深色变成按钮,亮色变成标签、徽章和选中状态。这几套里有两套这样做,另外两套的强调色本身就够深,可以直接点按。
Butterscotch
Storm Graphite #434343 按钮,Butter Canvas #FAEBCD 标签:通过
Butterscotch Gold #F7C873 标签:通过
页面上的 Butterscotch Gold:几乎看不见
Butterscotch Gold 看着很美,但在 Butter Canvas 上作为按钮就消失了。交换分工:Storm Graphite 负责点按,金色变成标签。
Ocean Breeze
Midnight Navy #0C2C55 按钮,Vanilla Linen #EDEDCE 标签:通过
Ocean Breeze #629FAD 标签:通过
页面上的 Ocean Breeze:几乎看不见
浅亚麻色上的柔和青蓝。同样的办法:Midnight Navy 当按钮,Ocean Breeze 当标签和选中状态。
Silent Grove
Silent Grove #215E61 按钮:通过
Morning Paper #F5FBE6 上的链接:通过
Blue Monolith #233D4D
这个什么都能做。一种深青色,在 Morning Paper 上既是按钮也是链接,配上白色标签读起来毫不费力。
Wild Berry
Wild Berry #CF4173 按钮:通过
Peach Cashmere #F6D8BD 上的 Wild Berry 链接:不通过
Deep Berry Plum #5D3140 链接:通过
Wild Berry 作为白字按钮只是勉强过关。作为 Peach Cashmere 上的文字就不够了,所以它的链接要用 Deep Berry Plum。
链接是文字,所以它要达到文字的标准,而不只是按钮的标准。当强调色作为按钮只是勉强通过时,链接请用墨色。
十六种强调色一张表
| 配色 | 强调色 | 适用的标签 | 注意事项 |
|---|---|---|---|
| 青绿 | 青绿 #0E7C6B | 白色 | 四项任务都没问题 |
| 钴蓝 | 钴蓝 #2F4BD6 | 白色 | 四项任务都没问题 |
| 玫瑰红 | 玫瑰红 #C2445F | 白色 | 三者中余量最小,不要再调浅 |
| 琥珀 | 琥珀 #C88A16 | 树皮棕 #2C2415 | 白字不合格 |
| French Winery | French Winery #9A0A2C | 白色 | 深色字不合格 |
| Wild Forest | Wild Forest #009041 | 都不行,除非调深一档 | 两种标签都不合格 |
| Glowing Lantern | Glowing Lantern #FFBB40 | Aztec #153023 | 白字不合格 |
| Pink Orchid | Pink Orchid #C157AD | 都不行,除非调深一档 | 两种标签都不合格 |
| Peacock Pride | Peacock Pride #006262 | 白色 | 四项任务都没问题 |
| Furnace | Furnace #D23D20 | 白色 | 徽章文字,请用 Elite Teal #13302A |
| Purple Heart | Purple Heart #652A97 | 白色 | 四项任务都没问题 |
| French Blue | French Blue #0075C9 | 白色 | 徽章文字,请用 Nightly Voyager #2A1630 |
| Butterscotch | Butterscotch Gold #F7C873 | 深色字,用作标签 | 太浅,不能当按钮 |
| Ocean Breeze | Ocean Breeze #629FAD | 深色字,用作标签 | 太浅,不能当按钮 |
| Silent Grove | Silent Grove #215E61 | 白色 | 四项任务都没问题 |
| Wild Berry | Wild Berry #CF4173 | 白色 | 链接,请用 Deep Berry Plum #5D3140 |
数字,留给需要为选择辩护的人
上面的每一组搭配都用 WCAG 2 对比度公式测量过。这是本文唯一带比值的表格。
| 配色 | 测试 | 比值 | 结果 |
|---|---|---|---|
| 青绿 | 强调色上的白色标签 | 5.10:1 | 通过 |
| 钴蓝 | 强调色上的白色标签 | 6.78:1 | 通过 |
| 玫瑰红 | 强调色上的白色标签 | 4.90:1 | 通过 |
| 琥珀 | 强调色上的白色标签 | 2.96:1 | 不通过 |
| French Winery | 白色标签 | 8.5:1 | 通过 |
| French Winery | 深色标签 | 1.8:1 | 不通过 |
| Wild Forest | 白色标签 | 4.1:1 | 不通过 |
| Wild Forest | 深色标签 | 3.8:1 | 不通过 |
| Wild Forest | 白色标签,调深一档 | 4.6:1 | 通过 |
| Glowing Lantern | 深色标签 | 8.4:1 | 通过 |
| Glowing Lantern | 白色标签 | 1.6:1 | 不通过 |
| Pink Orchid | 白色标签 | 4.0:1 | 不通过 |
| Pink Orchid | 深色标签 | 3.6:1 | 不通过 |
| Pink Orchid | 白色标签,调深一档 | 4.6:1 | 通过 |
| Peacock Pride | 按钮标签 / 徽章文字 | 7.1:1 / 5.3:1 | 两项都通过 |
| Furnace | 按钮标签 / 徽章文字 / 墨色徽章文字 | 4.7:1 / 3.4:1 / 10.3:1 | 通过,不通过,通过 |
| Purple Heart | 按钮标签 / 徽章文字 | 9.0:1 / 6.3:1 | 两项都通过 |
| French Blue | 按钮标签 / 徽章文字 / 墨色徽章文字 | 4.7:1 / 3.6:1 / 12.7:1 | 通过,不通过,通过 |
| Butterscotch | 页面上的金色 / 金色标签上的深色文字 | 1.32:1 / 6.34:1 | 不通过,通过 |
| Ocean Breeze | 页面上的强调色 / 强调色标签上的深色文字 | 2.49:1 / 4.7:1 | 不通过,通过 |
| Silent Grove | 强调色上的白色标签 | 7.4:1 | 通过 |
| Wild Berry | 强调色上的白色标签 | 4.51:1 | 刚好通过 |
如何测试你自己的强调色
- 先试白色。 如果白色在强调色上通过,比如钴蓝 #2F4BD6,你的标签就定了。
- 再试你最深的墨色。 如果白色不行而墨色通过,就把所有标签设为墨色,就像琥珀和 Glowing Lantern 那样。
- 如果两者都不行,就移动强调色。 调深或调浅一档,就能离开中间地带。
- 单独测试标签。 做出 15% 的淡色,检查强调色作为文字放在上面的效果。如果不合格,标签就用墨色。
- 检查按钮与页面的对比。 浅色强调色是标签,不是按钮。我们关于无障碍色彩对比度和 UI 配色错误的文章涵盖了相关阈值。
获取每一套的文件
每一套都是 Forge 上的免费配色集,提供点按复制的色值、适用于 Figma 和 Adobe 的色板文件(ASE)、CSS 变量和设计令牌。
免费配色集
墨色、底色、一个可点按的东西:青绿、钴蓝、玫瑰红、琥珀
全部十六进制色值,外加 ASE 色板、CSS 变量和设计令牌。
免费配色集
死亡地带:French Winery、Wild Forest、Glowing Lantern、Pink Orchid
全部十六进制色值,外加 ASE 色板、CSS 变量和设计令牌。
免费配色集
按钮不是徽章:Peacock Pride、Furnace、Purple Heart、French Blue
全部十六进制色值,外加 ASE 色板、CSS 变量和设计令牌。
免费配色集
最亮的那个不是按钮:Butterscotch、Ocean Breeze、Silent Grove、Wild Berry
全部十六进制色值,外加 ASE 色板、CSS 变量和设计令牌。
FAQ
强调色按钮上该用什么颜色的文字?
强调色够深就用白色,够浅就用深色墨色。青绿 #0E7C6B 用白色。琥珀 #C88A16 用树皮棕 #2C2415。如果两者都不行,说明强调色落在中间,需要挪动一档。
为什么白色文字在有些彩色按钮上不合格?
因为按钮太浅了。琥珀、Glowing Lantern #FFBB40 和 Butterscotch Gold #F7C873 都很亮,所以上面的白字很淡。像 Wild Forest #009041 这样的中间色调,白字和深色字都不行。
如何为 UI 配色挑选强调色?
先选标签。决定强调色承载白字还是深色字,然后挑一个明显偏向中间某一侧的颜色。分别检查它作为按钮、作为徽章文字,以及与页面的对比。
为什么我的强调色当按钮看着不错,当徽章却很糟?
徽章是把强调色作为文字,放在它自己的浅色淡色背景上,这会降低对比度。Furnace #D23D20 和 French Blue #0075C9 轻松承载白色按钮标签,却在徽章文字上不合格。徽章文字请用你的墨色。
浅色强调色能当按钮吗?
很少能。它必须从背后的页面上凸显出来,而奶油色页面上的浅色强调色几乎做不到。让深色当按钮,把浅色强调色用作标签或选中状态。
来源
- 颜色名称和十六进制色值来自 Forge 上的 UX Brainy 配色集,第 02、06、07 和 11 卷。对比度按 WCAG 2 公式,对照每种颜色所在的底色计算。
- 文字和图形的对比度阈值遵循 W3C WCAG 2.2:Contrast (Minimum) 和 Non-text Contrast。
- 每个徽章色块中的淡色十六进制值,是强调色以 15% 叠在底色上得出的,由配色推导而来。
- 最初以四组轮播图发布于 UX Brainy:Your accent decides what color the label on it has to be、The dead zone、A button is not a badge 和 The bright one is not the button。
Want an accent and a full UI palette built for your product and tested on your real screens? Our team designs interfaces that hold up in every state.
Get Started
