现象：设计评审被要求"对比度达标"
做网页/小程序时，无障碍审查常常报："这段文字对比度 3.2:1，未达到 WCAG AA 的 4.5:1"。这到底在说什么？
WCAG 对比度阈值
WCAG（Web 内容无障碍指南）用对比度比值衡量前景色（文字）和背景色之间的差异：
| 内容类型 | AA（最低合规） | AAA（增强） | |---|---|---| | 普通文本 | 4.5:1 | 7:1 | | 大文本（≥18pt 或 ≥14pt 粗体） | 3:1 | 4.5:1 | | 图形 / UI 组件边界 | 3:1 | — |
简单记：正文至少 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
三个系数就是人眼敏感度权重：绿色贡献超过七成，蓝色不足一成。这也是为什么"把蓝色调深一点"几乎不影响对比度，而"把绿色/黄色调深一点"效果立竿见影。手算很烦，用工具最省事。
常见的不达标场景
- 浅灰正文配白底：
#999999配#FFFFFF只有 2.85:1，正文直接不达标——这是后台系统和文档站最常见的问题； - 品牌色按钮上的白字：很多亮色品牌色（如明黄、亮青）配白字不到 3:1，按钮文字也算文本，同样受 4.5:1 约束；
- 占位符文字（placeholder）：设计上故意做浅，但它是真实文本，审查时同样要达标；
- 半透明遮罩上的文字：文字颜色与"遮罩后的实际底色"叠加计算，而不是与原图计算——遮罩透明度不够时很容易翻车；
- 深色模式照搬浅色模式：深底上用深灰次要文字，往往比浅色模式更容易低于阈值。
怎么调到合格
- 加深背景或提亮文字 —— 最常见有效的办法，比如深灰文字配白底，而非浅灰配白底；
- 优先调 G/B 通道 —— 相对亮度对绿色最敏感，微调明度比换色相更不破坏品牌感；
- 避免纯灰阶弱对比 —— 浅灰文字在白底上极易不达标；
- 对大标题可放宽 —— 大文本只需 3:1，可以用稍淡的颜色；
- 用工具试配色 —— 输入前景/背景，立刻看到比值和达标状态。
打开 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，切换主题后要重新跑一遍检查。
本文由 ToolVault 工具匣 提供。相关工具：颜色对比度检查器、颜色转换器、调色板生成。访问 首页 查看更多开发者工具。