数字
库内有次级文字层（textSub）的配色共 69 套，分布在 Web 与小程序两端。按这一层压底色的对比度排序：
- 低于 4.5:1 的有 27 套，占 39%
- 最低 3.25:1，中位 4.76:1，最高 7.34:1
作为对照，同样这些配色的主文字层（textMain）共 69 个，低于门槛的有 0 个，最低 12.96:1，中位 14.66:1。
这个对比是本文全部论点的起点：同一个库、同一批配色、同一个设计师，主文字层零缺陷，次级文字层四成不合格。
为什么主文字没问题
因为主文字被当成硬指标。每一套配色在入库前都要过正文对比度 4.5:1 这道闸门，不过就丢弃。库里主文字最低 12.96:1，中位 14.66:1，几乎是近黑压近白，这不是设计手法，这是闸门的产物。
次级文字没有这道闸门。它属于「辅助信息」，在很多设计系统里被当成排版细节，而不是可读性问题。于是它按视觉效果定，不按对比度定：设计师在明亮的显示器上打开设计稿，选一个淡一点的灰，「层级感更好」，看上去确实更好。
问题在于设计稿的灰是在屏幕上看的，而实际使用场景不是。同一块灰，在室内屏幕上够淡雅，在户外的手机屏幕上就是一片模糊。这一层承载的又恰恰是最需要确认的信息：时间戳、单位、说明、字段名。
最差的几套长什么样
库内最低的五套全部是小程序端，全部低于 3.7:1：
| 配色 | 次级文字 | 底色 | 对比度 | 同套主文字 |
|---|---|---|---|---|
| 生鲜橙 | #8a8a8a | #f7f8fa | 3.25:1 | 15.5:1 |
| 商务蓝 | #7a879b | #f5f7fa | 3.39:1 | 15.3:1 |
| 美妆粉 | #9a8089 | #fdf8fa | 3.43:1 | 15.1:1 |
| 茶饮绿 | #7c8b82 | #fafcfa | 3.47:1 | 14.4:1 |
| 宠物紫 | #857e9c | #f8f7fd | 3.61:1 | 15.4:1 |
第一行的 #8a8a8a 值得单独说。这个值在设计工具里几乎是一个默认的「辅助灰」，随手就用了。它压纯白大约 3.5:1，压任何带一点色调的浅底都会更低，压到 #f7f8fa 就是 3.25:1。
而且这五套的主文字都在 14 到 15.5:1，说明设计者并不是不会做对比度，是把「正文」和「辅助」当成两件不同的事在处理，只对前者用了标准。
3.25:1 到底能不能用
能，但只能用于大字。WCAG 的分档是这样：
- 4.5:1，普通字号正文的及格线。14px、16px 的说明文字都在这一档。
- 3:1，大字号的门槛。指 18.66px 加粗，或 24px 常规。
所以 3.25:1 意味着：这段文字必须至少 24px，或者 18.66px 加粗。时间戳、单位、表单提示如果按这个尺寸排，界面会失去层级，那这个「次级」也就没有意义了。
换言之，次级文字的淡，和次级文字的小，是同一个预算的两笔支出，不能同时花。想让它颜色淡，就得让它足够大；想让它小，就得让颜色够深。绝大多数出事的设计，是两笔都花了。
三条改法，按代价从低到高
- 把次级文字压深到 4.5:1，层级靠字号和字重区分。代价最低，改一个色值。层级感确实会弱一点，但换来的是这一层在所有屏幕上都能读。上面五套如果把
textSub往主文字方向压，基本都能过线，视觉差别比想象中小。 - 保留淡色，但把字号提到 16px 以上并锁定用途。适合少量确实可以牺牲可读性的场合，比如纯装饰的英文小标题。前提是这一层不能承载任何必须读到的信息。
- 删掉这一层。如果一套界面里次级文字只用到两三处，不如直接用主文字色，靠间距和分组表达层级。少一个角色，少一处将来会翻车的地方。
这三条里第一条在绝大多数项目上是对的。原因很简单：辅助信息之所以是辅助，是因为它不重要，不是因为它可以看不清。这两件事经常被混为一谈。
同一类问题的另外三个位置
次级文字只是最容易出问题的那一处。下面三处和它同源：都是「按视觉效果定的颜色」，都没有被当成可读性指标。
- 输入框的占位文字（placeholder）。很多实现直接用次级文字色，于是 3.25:1 的问题被原样复制到用户要填的第一个位置。更麻烦的是占位文字常常是表单里唯一的提示：用户一旦开始输入它就消失，读不清等于没有提示。
- 按钮上的小字。主色底上的白字，字号一小就出问题。主色压白底 4.5:1 只说明白字压主色也差不多，但 12px 的按钮文字需要的是同一档对比度加上足够的字重，很多实现只做了字号缩小。
- 图表里的标签。坐标轴刻度、图例文字，通常比正文小两号，用的还是次级灰。屏幕上看还行，投到会议室投影上基本消失。
这三处和次级文字的共同点：它们都不是「内容」，所以没进入内容可读性的检查范围，但它们都是用户必须读到的字。做可读性检查时按「用户要读到什么」列清单，而不是按「哪些是正文」列清单，这一批问题会一起浮出来。
设计稿阶段的一次自查，比改代码便宜得多
上面这些错误进了代码再改，要动设计令牌、重新截图、走一轮评审。在设计稿阶段发现，只是调一个色号。两个动作，各一分钟：
- 把设计稿截图，亮度调到三成。模拟户外或低亮度屏幕。次级文字如果在这时候糊成一片，它在真实场景里也会糊。这个测试比盯对比度更接近用户的处境，因为它同时压低了所有颜色。
- 把截图转成灰度。如果转灰度之后层级全没了，说明这套配色靠的是色相差异而不是明度差异。色相差异对色觉障碍用户不成立（约 8% 的男性有某种色觉障碍），所以灰度之后仍然要能分出主次。
这两个动作测的是同一件事：不是数字达不达标，而是信息还在不在。数值达标是必要条件，不是充分条件。一张对比度全部合规但层级混乱的界面，用户照样找不到主按钮。
数据怎么来的
上面每个数字都由本站库内的配色现算，对比度按 WCAG 2.1 的相对亮度公式计算，不是目测。原文提到的 69 套次级文字层里，27 套低于 4.5:1。库内的阈值与计算方式写在编辑标准，全库按对比度排列的清单在无障碍总览。
如果你手上有一套配色想核对，各端详情页上会直接列出这套自己的次级文字对比度，不用手算。