颜色对比度不达标（WCAG），怎么调才过？

现象：设计评审被要求"对比度达标"

做网页/小程序时，无障碍审查常常报："这段文字对比度 3.2:1，未达到 WCAG AA 的 4.5:1"。这到底在说什么？

WCAG 对比度阈值

WCAG（Web 内容无障碍指南）用对比度比值衡量前景色（文字）和背景色之间的差异：

简单记：正文至少 4.5:1，大字至少 3:1，基本就能过大多数合规审查。

对比度怎么算（简述）

核心是先算每种颜色的相对亮度（考虑人眼对不同色光的敏感度，绿色最亮、蓝色最暗），再用公式：

对比度 = (L1 + 0.05) / (L2 + 0.05)

其中 L1、L2 是较亮和较暗颜色的相对亮度。相对亮度不是简单的 RGB 加权平均，规范要求先把每个 8-bit 通道线性化：

c = 通道值 / 255
线性值 = c ≤ 0.03928 ? c/12.92 : ((c+0.055)/1.055)^2.4
L = 0.2126·R + 0.7152·G + 0.0722·B

三个系数就是人眼敏感度权重：绿色贡献超过七成，蓝色不足一成。这也是为什么"把蓝色调深一点"几乎不影响对比度，而"把绿色/黄色调深一点"效果立竿见影。手算很烦，用工具最省事。

常见的不达标场景

1. 浅灰正文配白底：#999999 配 #FFFFFF 只有 2.85:1，正文直接不达标——这是后台系统和文档站最常见的问题；
2. 品牌色按钮上的白字：很多亮色品牌色（如明黄、亮青）配白字不到 3:1，按钮文字也算文本，同样受 4.5:1 约束；
3. 占位符文字（placeholder）：设计上故意做浅，但它是真实文本，审查时同样要达标；
4. 半透明遮罩上的文字：文字颜色与"遮罩后的实际底色"叠加计算，而不是与原图计算——遮罩透明度不够时很容易翻车；
5. 深色模式照搬浅色模式：深底上用深灰次要文字，往往比浅色模式更容易低于阈值。

怎么调到合格

1. 加深背景或提亮文字 —— 最常见有效的办法，比如深灰文字配白底，而非浅灰配白底；
2. 优先调 G/B 通道 —— 相对亮度对绿色最敏感，微调明度比换色相更不破坏品牌感；
3. 避免纯灰阶弱对比 —— 浅灰文字在白底上极易不达标；
4. 对大标题可放宽 —— 大文本只需 3:1，可以用稍淡的颜色；
5. 用工具试配色 —— 输入前景/背景，立刻看到比值和达标状态。

打开 ToolVault 工具匣 的 颜色对比度检查器：粘入两个颜色，实时显示对比度与 AA/AAA 判定；需要换色可配合 颜色转换器 在 HEX/RGB 间切换；要从截图中取色，可用 图片取色器 直接吸取设计稿里的前景/背景色。

FAQ

4.5:1 是怎么来的，必须严格遵守吗？

它是 WCAG 基于可读性研究定的经验阈值。法律/招标常把它当合规线（如欧盟 EN 301 549、美国 Section 508 引用 WCAG AA）；内部项目至少保证正文可读，别低于 3:1。

我的品牌色对比度不够怎么办？

可在"小面积文字"上用品牌色，正文改用中性深色；或用品牌色的更深的变体做文字，兼顾辨识度与合规。一个实用技巧是保持色相（H）不变，只降明度（V），直到比值过线——这样看起来"还是那个品牌色"。

图片上的文字也要算吗？

要。图片背景复杂时更难达标，建议加半透明遮罩再放文字，保证文字区域对比度。WCAG 对"文字图片"（用图片代替的文字）要求更严——能用真实文本就不要切图。

深色模式下阈值会变吗？

阈值不变，但同样的两色在深底上的观感不同。浅色模式下刚过 4.5:1 的搭配，切到深色模式后经常跌到 3.x:1，切换主题后要重新跑一遍检查。

实现注记

对比度调合格后免不了复制色值去别处用，这里修过一个反馈 bug：打勾图标只在复制真实成功后亮起，失败时交给 toast 报错——图标不能对着失败的操作比钩。否则你带着一个假「已复制」的值去做深浅模式复查，白忙一场。

来自 ToolVault 工具匣 的开发手记。相关工具：颜色对比度检查器、颜色转换器、调色板生成。访问 首页 查看更多开发者工具。