AA 级 4.5:1 和 AAA 级 7:1 该选哪个？

消费级产品 AA 够用，覆盖绝大多数视力人群；政府、教育、医疗、老年用户多的产品要 AAA，法规通常强制。设计新产品建议预留余量——目标 AA 的实际做到 5:1 以上，既安全又不牺牲设计美感。

暗色模式更难做到对比度达标吗？

不难，但容易被忽视。暗背景（#1a1a2e）配浅字（#e4e6f0）对比度约 13:1，天然过 AAA。真正的坑是彩色文字——暗紫背景配紫色文字、深蓝背景配蓝色强调文字，容易掉到 3:1 以下。做暗色主题时要对每组彩色组合都检查。

不是。对比度合格 ≠ 色盲友好——红绿色盲看不出红绿的色相差，但如果两者明度对比都足够，他们能看到按钮本身。WCAG 的互补规则是"不要只用颜色区分信息"，配图标、文字、位置等冗余标识。

不一样。正文文字 AA 要求 4.5:1；大字（≥ 18pt 或 ≥ 14pt 粗体）降到 3:1；UI 组件（按钮边框、图表的图形）要求 3:1。所以按钮背景色和页面背景对比度 3:1 就行，但按钮上的文字对按钮背景仍要 4.5:1。

“正文对比度至少 4.5:1”——这是 WCAG 2.1 AA 级的要求，也是 iOS/Android/Web 设计规范的通用底线。很多漂亮的设计栽在这条上：浅灰字 #888 配白底只有 3.5:1，老年人或阳光下根本看不清。

WCAG 用相对亮度对比度公式：

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

其中 L1 是浅色的相对亮度，L2 是深色的相对亮度。范围从 1:1（完全相同）到 21:1（纯黑对纯白）。

相对亮度 不是简单 RGB 平均，而是：

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

绿色权重最大，因为人眼对绿色最敏感。所以同样的 “#808080” 中灰对白的对比 ≈ 3.95:1，而用同 L 值的其他颜色略有差异。

实战建议：

以下组合都通不过 AA 4.5:1，设计里很常见：

记住最低线：白底上灰色文字至少要 #767676 才刚过 AA。实际建议 #666 起步，留点余量。

1. 不是前景越深越好 #000 纯黑配白，对比度 21:1，但看久了眼睛疲劳。很多产品用 #1a1a1a 或 #333（约 12-16:1），既过 AAA 又更柔和。

2. 暗色模式更难达标 #1a1a2e 暗背景配 #e4e6f0 浅字，对比度约 13:1，过 AAA。但如果用”暗紫色背景 + 紫色文字”这种视觉主题，很容易掉到 3:1 以下。

3. 配色工具的”颜色柔和”和”对比足够”冲突 漂亮的浅粉、浅紫 UI 常常对比度不足。解决办法是在彩色之外保留一个高对比文字层级，避免所有文字都用品牌色。

对比度合格 ≠ 色盲友好。红绿色盲看不出红色按钮和绿色按钮的区别，但如果两者对比度都足够，他们能看到按钮本身。所以 WCAG 的互补规则是：

输入前景色和背景色，立刻看出对比度数值、AA/AAA 是否通过，还能生成满足规范的配色方案——调色阶段就能排除低对比度组合。