网页颜色对比度入门：WCAG 标准与实操

做过无障碍检测的开发者多半遇到过这种困惑：页面上一段浅灰色文字，自己看着清清楚楚，检查工具却提示”对比度不足”。这不是工具太挑剔，而是人眼对”能不能看清”的判断非常不可靠——它受屏幕亮度、环境光、年龄甚至当天疲劳程度影响。WCAG（Web 内容无障碍指南）用一套可计算的公式取代了主观感受，这篇文章就把这套公式和它的实际用法讲清楚。

相对亮度：一切计算的起点

WCAG 衡量对比度的基础是相对亮度（relative luminance）。它不是简单的 RGB 平均值，而是一套模拟人眼感知的公式：先把 R、G、B 三个通道各自的值（0–255）归一化到 0–1，再做一次”线性化”处理（小于等于 0.04045 时除以 12.92，否则套用指数 2.4 的幂运算），最后按权重加权：

L = 0.2126 × R + 0.7152 × G + 0.0722 × B

权重差异很大：绿色占 71.5%，红色占 21.3%，蓝色只占 7.2%。这对应人眼对不同波长光的敏感度——我们对绿色最敏感，对蓝色最不敏感。所以同样”深浅”的纯蓝和纯绿，相对亮度差了近十倍，这也是为什么深蓝色背景配黑字看着还行，纯绿色背景配黑字却刺眼。

对比度比值怎么算

拿到前景色和背景色的相对亮度 L1、L2（亮者为 L1）之后，对比度比值的公式是：

ratio = (L1 + 0.05) / (L2 + 0.05)

结果范围是 1:1（两个颜色完全相同）到 21:1（纯黑配纯白）。公式里的 0.05 是环境光补偿项，避免在极端暗色下比值发散。这个比值与字号、字体无关，只取决于颜色本身——门槛是另外定的。

AA 与 AAA：两档门槛

WCAG 2.1 把合规等级分成 A、AA、AAA 三档，涉及对比度的是后两档：

等级	普通正文	大字文本
AA（主流要求）	4.5:1	3:1
AAA（增强级）	7:1	4.5:1

绝大多数法规和商业标准（包括欧盟 EN 301 549、美国 ADA 相关的判例实践）要求达到 AA 级。AAA 是更高追求，通常只在对可读性要求极高的场景（如医疗、政务）强制。实务中合理的策略是：正文文字确保 AA，标题、关键按钮文字争取 AAA。

有几个例外情况不需要满足对比度要求：纯装饰性元素、不可见的元素、禁用状态的控件，以及 logo 和品牌标识中的文字。但”例外”不等于”推荐”，能让禁用文字也清晰总是更好的。

正文和大字的门槛为什么不同

大字文本（large text）的定义是：常规字重下不小于 18pt（约 24px），或粗体下不小于 14pt（约 18.66px）。字越大、笔画越粗，人眼分辨它需要的对比度就越低，所以 AA 级对大字只要求 3:1。

这个规则的实际意义是：设计稿里的超大标题可以更大胆地用浅色，而正文必须保守。反过来，一个 13px 的浅灰小字是重灾区——它既要满足 4.5:1，又往往是设计师最容易随手调淡的地方。

灰色文字为什么总是不达标

#777777 配白底是多少？4.48:1——差一点点不到 4.5。这个著名的”擦边失败”案例说明了一件事：设计师凭感觉调的灰色，经常落在门槛附近的危险区。常见的失败组合还有 #999999（2.85:1，只能用于大字）、#CCCCCC（1.6:1，基本不可读）。

灰色文字流行是因为它能让界面显得”轻”，但亮度空间里浅灰到白色的距离本来就短，可选区间很窄。如果你的设计需要弱化的辅助文字，正确做法是先定背景色，然后从深灰开始往上试，找到刚好过线的那个值，而不是拍脑袋填一个。拿不准的组合直接丢进颜色对比度检查工具，它会同时给出 AA 和 AAA 两档在正文、大字下的四项判定，比心算可靠得多。

品牌色不达标怎么办

品牌色是最常见也最棘手的冲突来源：市场部定的主色对比度只有 3.8:1，改色需要走品牌审批，不改又不合规。处理这个问题有几个经过验证的思路，按代价从低到高排列：

品牌色只用于大字和图形。3:1 以上的品牌色可以合法地用在标题、图标、按钮边框上，只是不用于正文。
派生一个”文本版”品牌色。保持色相和饱和度不变，只把明度压暗，得到一个通过 4.5:1 的变体，专门用于文字。视觉上用户仍然认得出这是同一个品牌色。可以用取色器在保持色相的前提下微调明度，边调边看对比度。
换背景而不是换前景。深色品牌色在浅灰背景（如 #F5F5F5）上的对比度略高于纯白，有时这一点差距就够过线——注意方向是反直觉的：稍微调暗背景能提升深色文字的比值。
用深色文字叠加品牌色底。如果品牌色本身很亮，黑字压在品牌色上往往比白字好得多。

最差的做法是把品牌色原样用在 14px 正文上然后假装看不见检测报告。

设计系统里的对比度检查流程

零散的检查救不了系统性问题。如果你的团队维护一套设计系统，建议把对比度检查做成流程而不是靠自觉：

建 token 表时就测。设计系统的颜色通常以 token（如 text-primary、surface-muted）管理。列出所有”文字色 × 背景色”的合法组合，逐个测对比度，把不达标的组合从规范里直接禁掉。
给每个文字 token 标注用途。明确这个颜色是”正文级”（必须 4.5:1）还是”仅大字/装饰”（3:1），防止有人把 caption 灰用到正文上。
在组件库里固化。按钮、输入框、卡片这些组件的默认配色在组件层面测过一次，业务方就不需要再测。
改版回归测试。品牌升级、暗黑模式上线时，把所有组合重新跑一遍。暗黑模式尤其容易翻车——纯白文字在浅灰卡片上的问题比浅色模式更隐蔽。

配色阶段如果需要一套天然协调的色板，可以从配色方案生成器生成候选色，再逐个过对比度筛选，比在失败的品牌色上修修补补效率高。

小结

对比度不是玄学：相对亮度公式 + 两档门槛（AA 4.5/3，AAA 7/4.5）就是全部规则。灰色文字是失败重灾区，品牌色要靠派生变体或改变用法来合规，而设计系统层面把检查前置，比事后逐个页面修要省一个数量级的时间。下次再有”我觉得能看清”的争论，直接把两个色值输进检查工具，用数字说话。