原创 邹咿ZoeYZ 2026-03-16 08:20 广东
能用的话早用了…
经常看到一些主题色比较浅的产品设计，白底页面上文字链接用主题色，导致文本链接还不如普通文本显眼，看得很累。
QQ音乐
活动行
有些聪明一点的，会给普通文字用浅灰色，这样文本链接可以体现出来。但是由于文字的颜色整体偏浅，导致可读性还是较差。
朴朴
文字链接的颜色要怎样才合理？如果主题色不适合做文本链接，又该怎么办？
接下来，我会先给大家介绍一个验证文字色彩对比度的方法，然后再来看看大厂有哪些处理方式。
怎样的颜色才方便阅读？
Web Content Accessibility Guideline（网页内容无障碍指南，简称WCAG）是由万维网联盟（W3C）下属的无障碍网页倡议组织（WAI）发布的国际网页无障碍标准，旨在通过规范网页内容的设计与开发，确保所有用户（包括残障人士、老年人、色盲用户等）都能平等访问网页信息。
WCAG对色彩对比的要求基于文本类型（普通文本/大文本）和 conformance level（合规等级），分为AA级（最低推荐标准）和AAA级（增强标准）两个层级。
底线：普通文本≥4.5:1（AA级），大文本≥3:1（AA级）——这是全球公认的“最低可读”门槛；
理想：普通文本≥7:1（AAA级），大文本≥4.5:1（AAA级）——兼顾舒适性与包容性；
WCAG采用相对亮度公式计算文本与背景的对比度，具体步骤如下：
- 将文本颜色（前景色）和背景颜色的RGB值转换为sRGB空间（即归一化到0-1范围）；
- 对每个颜色通道（R/G/B），若其值≤0.03928，则除以12.92；否则按公式((value + 0.055) / 1.055) ^ 2.4计算；
- 计算相对亮度（L）：L = 0.2126R + 0.7152G + 0.0722*B（其中R/G/B为步骤2的结果）；
- 计算对比度比值：(L1 + 0.05) / (L2 + 0.05)（L1为较亮颜色的相对亮度，L2为较暗颜色的相对亮度）。
按照这个公式，以下文本色都是不合格的：
以下文本色作为大文本是符合的，但是作为普通文本不合格：
我发现，即便是大厂设计，文字颜色的对比度达到理想等级的非常少。可能是为了平衡美观性吧，能够达到 3 : 1 就算不错了。
Google的A/B测试
谷歌搜索引擎在2019年其实尝试过另一个色彩的文字链接，但是很快下线了。
虽然没有谷歌官方的消息来源，但按照常理来分析，主题色文字链接被下线的原因可能是可读性的问题。
尽管这个颜色以 WCAG的标准来看，算是合格：
现在他们的文本链接颜色明显比主题色偏紫一些：
这个颜色的对比度就更高了，数值接近前者的2倍：
元宝选择把主题色加深
腾讯的AI元宝的主题色是挺亮的绿色，如果直接用在文字上，可读性是不够的：
于是，他们选了一个明显更深的绿色，把对比度一下子拉到了一个很客观的数值：
微信选择灰蓝色
众所周知，微信的主题色是绿色，这个颜色的对比度也不足以用在文本上：
微信比较特别的做法是，选了一个偏灰的蓝色给文本链接用，看起来跟主题绿毫无关联。这个灰蓝色的对比度，确实是够格给文本用的。
为什么要用偏灰的蓝色呢？可以看看下图的对比：
如果用亮蓝色的话，会比按钮的主题绿还抢眼。只有用灰蓝色，才能确保当主题绿出现时，依旧能够很好地引导用户视线。
头条选择亮蓝色
今日头条的主题色是红色，但它的文本链接有些是红色，有些又是亮蓝色。
总结一下规律，用蓝色的文本链接，主要是不想引起注意的地方。所以，我才头条设计师是觉得有些文本链接用红色太过抢眼，所以才用亮蓝色的。
那为什么不像微信那样用灰蓝色呢？看看下图对比就知道了：
因为页面上的主题红已经很显眼了，文本链接就算用亮蓝色，也不会喧宾夺主。
反倒是如果改用灰蓝色，会让文本链接太不起眼，看起来还有点像是无效链接。
总结一下
当主题色相对于背景色的对比度较低时，可能就不适合给文本用了，具体可以用在线工具来测试。
主题色为红色、橙色，有警示含义时，也可能不适合作为文本链接。
如果主题色不适合给文本用，那么千万不要勉强用，也没必要为此改主题色。
可以学习大厂的处理方法，例如：
主题色调整色相（Google）、主题色加深（元宝）、灰蓝色（微信）和亮蓝色（今日头条）。
你在做设计时有没有遇到过类似的问题？是怎样处理的？欢迎留言分享～