链接颜色:为什么 #0000FF 不行,以及该用的 8 种链接颜色
纯蓝是所有人选的第一个链接颜色,但放在正文旁边和深色屏幕上都是错的。加下划线,深色模式下调亮,标出已访问链接,保留焦点环。附 8 个色值。
正确的链接颜色是一种稍柔和的蓝色,而且要加下划线,而不是单靠 #0000FF。纯蓝是所有人选的第一个链接颜色,它在两个地方会失败:黑色正文旁边,以及深色屏幕上。下面是四个修复方法,以及可以直接交给开发的八种颜色。
为什么 #0000FF 不行
没人会特意决定用 #0000FF。它是自己冒出来的。它是 CSS 里的 blue 关键字,也是每个取色器里第一个饱和的蓝色。
浏览器自己的默认值略有不同:链接是 #0000EE,已访问链接是 #551A8B,而且两者都带下划线。下划线本来就是这个约定的一部分。设计师为了看起来干净把它去掉,却保留了蓝色。
于是蓝色只能独自扛下整个任务。纯蓝非常暗。把它放进一段近乎黑色的文字里,对于分辨颜色有困难的人来说,两者几乎一样。在深色屏幕上更糟:#0000FF 会沉进背景里。
链接由三样东西组成:颜色、线条和状态。
修复 1:加下划线
仅靠颜色
加下划线
背后的规则是 WCAG 1.4.1,颜色的使用。
仅靠颜色标记的链接,必须与周围文字明显区分开。纯蓝挨着纯黑做不到,而 #0F62FE 挨着 #161616(我们这里用的文字颜色)就可以。下划线彻底消除了这个问题,因为链接不再依赖颜色。
连续文本中的链接要加下划线。导航栏、按钮和卡片则不同:它们的位置和形状本身就在说“可点击”,所以那里的下划线是可选的。
仅靠颜色,灰度
加下划线,灰度
修复 2:深色模式下调亮
深色上的 #0000FF
深色上的 #78A9FF
差距不是一点半点。#0000FF 在 #161616 上对正文字号来说太暗,读不出来,而 #78A9FF 在同样的背景上一目了然。在白底上好用的饱和色,到了深色上要变得更浅更柔和,和我们处理错误颜色的做法一样。
保留两种蓝色并随主题切换:浅色屏幕用 #0F62FE,深色屏幕用 #78A9FF。悬停状态再进一步:浅色用 #0043CE,深色用 #A6C8FF。
修复 3:标出人们去过的地方
每个链接看起来都是新的
已访问变成紫色
Nielsen Norman Group 自 2004 年起就在强调:当已访问和新链接共用一种颜色时,人们会迷路并原地打转。紫色是约定俗成的选择,浏览器从一开始就在用。浅色屏幕用 #8A3FFC,深色屏幕用 #BE95FF。它只需要一条 CSS 规则:a:visited。
修复 4:保留焦点环
outline: none
2px #0F62FE 环
键盘用户、开关设备用户,以及任何鼠标手累了的人,都依赖焦点环。
用 outline: none 把它去掉又不放任何替代物,会违反 WCAG 2.4.7,焦点可见。如果浏览器默认的环和你的设计冲突,就替换它。不要删除它。
一个与链接同色、带小偏移的 2px 环是稳妥的版本。WCAG 2.2 把最强的形式描述为至少 2 个 CSS 像素的周边轮廓。
8 种链接颜色,浅色与深色
点击任意色块即可复制色值。
| 角色 | 浅色 | 深色 | 用途 |
|---|---|---|---|
| 文字 | #161616 | #F4F4F4 | 链接周围的正文 |
| 链接 | #0F62FE | #78A9FF | 所有静止状态的链接 |
| 悬停 | #0043CE | #A6C8FF | 指针悬停在链接上 |
| 已访问 | #8A3FFC | #BE95FF | 已打开过的链接 |
这些是 IBM Carbon 的链接 token,取自其公开发布的主题值。
把这个交给你的开发
:root {
--color-text: #161616;
--color-link: #0F62FE;
--color-link-hover: #0043CE;
--color-link-visited: #8A3FFC;
}
@media (prefers-color-scheme: dark) {
:root {
--color-text: #F4F4F4;
--color-link: #78A9FF;
--color-link-hover: #A6C8FF;
--color-link-visited: #BE95FF;
}
}
a { color: var(--color-link); text-decoration: underline; text-underline-offset: 0.15em; }
a:visited { color: var(--color-link-visited); }
a:hover { color: var(--color-link-hover); }
a:focus-visible { outline: 2px solid var(--color-link); outline-offset: 3px; }
顺序很重要::link、:visited、:hover、:focus、:active 是经典顺序,放在 visited 规则之前的 hover 规则,在已访问链接上永远不会生效。:focus-visible 选择器会为键盘用户显示焦点环,鼠标点击时则跳过,所以没人有理由去移除它。
“易读”背后的数字
| 组合 | 对比度 |
|---|---|
| 白底上的 #0000FF | 8.6 比 1,通过,但仍然和黑色文字太接近 |
| #161616 上的 #0000FF | 2.1 比 1,不通过 |
| 白底上的 #0F62FE | 5.0 比 1 |
| 白底上的 #0043CE | 7.8 比 1 |
| 白底上的 #8A3FFC | 5.0 比 1 |
| #161616 上的 #78A9FF | 7.7 比 1 |
| #161616 上的 #A6C8FF | 10.6 比 1 |
| #161616 上的 #BE95FF | 7.7 比 1 |
第一行就是检测工具不够用的原因。纯蓝在白底上从数字上看是通过的。但它没通过真正的测试:链接是否与旁边的黑色文字看起来不同。
FAQ
链接应该是什么颜色?
浅色背景上用 #0F62FE 这样的中等蓝色,深色背景上用 #78A9FF 这样更浅的蓝色,正文中还要加下划线。
#0000FF 是好的链接颜色吗?
单独用不是。它在白底上看起来没问题,但对于看不到蓝色的人来说它和黑色正文太接近,而在深色背景上它几乎消失。
链接应该加下划线吗?
应该,在段落内部。WCAG 1.4.1 规定,除非链接与周围文字明显区分,否则不能只靠颜色来标记链接,而下划线消除了这种依赖。
已访问链接应该是什么颜色?
紫色。浏览器默认是 #551A8B,而 IBM Carbon 这样的设计系统在浅色屏幕上用 #8A3FFC,深色屏幕上用 #BE95FF。
深色模式下什么链接颜色好用?
更浅的蓝色。#78A9FF 在 #161616 上很容易读,而 #0000FF 在正文字号下太暗,看不清。
可以移除链接的焦点轮廓吗?
只有在用另一个可见的指示器替换它时才行。移除后不放任何替代物,会违反 WCAG 2.4.7,焦点可见。
来源
- HTML Living Standard, Rendering:默认样式表把
:link设为 #0000EE,:visited设为 #551A8B,并给链接加下划线。#0000FF 是 CSS 命名颜色blue。 - IBM Carbon color tokens,取自 @carbon/themes 11.40.0:白色主题下 link-primary 为 #0F62FE,hover 为 #0043CE,visited 为 #8A3FFC;g100 主题下为 #78A9FF、#A6C8FF、#BE95FF。
- WCAG 2, 1.4.1 Use of Color 以及技术 G183。
- WCAG 2.4.7 Focus Visible 和 2.4.13 Focus Appearance。
- Nielsen Norman Group,Change the Color of Visited Links(Jakob Nielsen,2004)。
- 对比度按 WCAG 相对亮度公式计算。示例文字为本页虚构。
- 最初作为轮播图发布于 UX Brainy。
Want links, 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
