首页 /配色指南 /主色能做按钮,却不一定是合格的链接色

主色能做按钮,却不一定是合格的链接色

按钮和链接常常用同一个颜色,但它们面对的是两套门槛。按钮底色属于非文本元素,3:1 就够;正文里的链接属于小字,要 4.5:1。这一条差距,让将近一半的主色在「当链接」这件事上直接不合格。

最后更新:2026-11-03

一半的主色过不了正文链接这道线

库内 34 套 Web 配色,主色对自身底色的对比度中位是 5.02:1,最低 3.09:1。按 4.5:1 算,16 套不合格,接近一半。没有一套低于 3:1。

这个分布不是巧合。3:1 是生成时的下限,低于它的主色在按钮上就看不见了,所以被挡掉了。问题在于 3:1 到 4.5:1 这一段:它够按钮,不够正文链接。而「主色」这个词很容易让人以为它哪儿都能用。

口径要求库内不合格
按钮底色、图标、图形边界3:10 套
正文里的链接文字4.5:116 套

最紧的几套都落在中间明度:#a88a6b 是 3.09:1,#b8860b 和 #2698ba 都在 3.2 附近。这些颜色当按钮很舒服,因为按钮上的字通常又白又粗又大;把它们直接做成正文里的一行链接,字变小变细,同一组色值就撑不住了。

解法不是另挑一个更深的颜色,是压明度

库里的链接色不是手挑的,是由主色算出来的:色相不变,饱和度加 6,明度减 15,再夹在 20 到 60 之间,避免压成黑。

实测结果:34 套链接色全部比主色暗,明度落差中位 14.9 点,最小 4.7、最大 16.3(落差小的那些是主色本来就很深,被 20 的下限夹住了)。色相偏移中位只有 0.2 度,肉眼不可能看出来。

效果:不足 4.5:1 的从 16 套降到 1 套,中位从 5.02:1 升到 8.15:1。剩下那一套是 3.23:1,不是规则错了,是它的主色本来就深,明度被 20 的下限夹住,压不下去。

主色派生链接色对比度变化
#a88a6b#8364433.09:1 → 5.20:1
#b8860b#7353033.20:1 → 6.96:1
#2698ba#15667f3.20:1 → 6.20:1

为什么不干脆另选一个深的蓝或深灰?因为一旦换色相,链接色和品牌色就成了两个颜色。用户看到的是一套界面里出现两种蓝,而设计稿上写的是「链接用主色压暗版」。压明度保住色相,是让「同一个品牌色」这件事在视觉上继续成立的最低成本做法。

只有 Web 端有链接色这个角色

三端各十个角色,但 link 只在 Web 的角色表里。2 个端没有链接色:APP 和小程序。

这不是疏漏。手机上正文里很少有内联链接,位置被整行可点的列表项和按钮占走了,所以这两端不需要单独一个链接色。代价是:这两端的主色没有派生出来的替身,它要么够用,要么不够用。

也别指望用别的角色顶替。小程序的 price 是价格语义(暖色、和主题刻意拉开),APP 的 accent 是强调色,它们的职责是「让人注意」,不是「让人点」。拿它们当链接色,语义和可点性都会错。

所以移动端只有两条路:主色对底色达到 4.5:1,就直接用在可点文字上;达不到,就把主色限定在装饰与按钮,文字链接改用主文字色加下划线,别硬撑。

还有一个独立门槛:链接要和正文区分得开

上面测的都是「链接色对底色」够不够。还有一条门槛同时存在,而且更少有人查:链接色对正文色的对比。WCAG 1.4.1 管的是「别只靠颜色传达信息」,它说得很具体:如果链接与周围文字的差别只有颜色,那两者的对比必须到 3:1,否则就得另加线索,通常是下划线。

实测:34 套里 33 套不到 3:1,中位只有 1.79:1,最低 1.00:1。这些都是上一节里合格了的链接:对底色 4.5:1 以上,可一旦和正文并排放,颜色差异小到多数人分不出来。

原因不难理解。链接色是从主色压暗来的,正文色本来就接近纯黑,两者都落在深色区,而明度差在深色端会被压缩。指望靠颜色把链接从正文里挑出来,越往深色走越不成立。

所以「链接用品牌色」这个做法,几乎一定要配下划线。这不是审美偏好,是别把可点性押在颜色识别上。

实际排版我会这样分:正文里的内联链接一律带下划线;导航项、卡片标题这种靠位置和形状就已经表明「可点」的地方,才可以只用颜色。

怎么用这几条

  1. 先量主色对底色的比值,别信「看起来够深」。4.5:1 是正文链接的线,3:1 只是按钮的线。这两个数经常被当成一个。
  2. 不够就压明度,不要换色相。本库的经验值是 −14.9 点,配合饱和度小幅上调,色相保持不动。压到 4.5:1 为止即可,不必一次压 15 点。
  3. 压的时候给个下限。明度低于 20 之后颜色开始发黑,色相就看不出来了,链接会变成「比正文还重的黑块」,同样错。
  4. 深色主题要反向。同一套推导在白底上是压暗,在深底上要提亮,否则链接会沉进背景里。

这四条里第三条最容易被忽略:为了凑对比度一路压暗,最后得到一个看起来像标题的链接。对比度达标和可读性是两件事,前者能算,后者还得看。

数字怎么来的

以上比值全部在构建期由 src/lib/guide-stats.mjs 用 WCAG 2.1 相对亮度公式现算,取 34 套 Web 配色的 primary 与 link 对各自 bg 的比。明度与色相偏移用 HSL 直接相减,色相差按 180 度取短边。

派生规则不是这次为了写文章编的,它就是 src/lib/generate.mjs 里 refineRoles() 的实际实现(同色相、饱和度 +6、明度 −15、夹 20~60)。所以正文里的经验值和线上产物是同一套。

相关:次级文字那一层讲的是正文内部的两级对比度,卡片与分割线讲的是低于 3:1 的那类角色,编辑标准记录了这些门槛的来源。