WCAG 对比度怎么算：4.5:1 与 7:1 到底差多少

对比度是一个 1:1 到 21:1 的比值，算法固定：把两个颜色各自算相对亮度，再用 (亮 + 0.05) / (暗 + 0.05)。4.5:1 是普通文本的 AA 门槛，7:1 是 AAA——两者不是「稍微好一点」，是肉眼可辨的差距。

公式的三步

1. 归一化：R、G、B 各自除以 255，得到 0–1 的值。
2. 伽马校正：小于等于 0.03928 的用 c/12.92，其余用 ((c+0.055)/1.055)^2.4。这一步是必须的——直接用原始 RGB 加权会算出错误的亮度。
3. 加权求和：L = 0.2126R + 0.7152G + 0.0722B。绿色权重最高，因为人眼对绿最敏感。

最后 (L亮 + 0.05) / (L暗 + 0.05)。加 0.05 是为了避免纯黑导致除零，也让极暗色的比值不至于爆掉。

四个门槛

• 普通文本 AA：4.5:1
• 普通文本 AAA：7:1
• 大号文本 AA：3:1
• 大号文本 AAA：4.5:1

「大号」指不小于 18pt（约 24px），或不小于 14pt（约 18.66px）的粗体。判断依据是最终渲染尺寸与字重，不是设计稿标注值。

4.5 与 7 的实际差别

4.5:1 大约是「浅灰背景上的深灰文字」，能顺畅阅读但边缘略软；7:1 是「白底黑字」级别，长文阅读明显更省力。

正文建议直接冲 7:1。4.5:1 更适合次要说明、辅助信息；如果用 4.5:1 排长文，在阳光下或老显示器上会明显吃力。

反过来，纯黑纯白（21:1）在大段文字上会显得刺眼，很多设计系统会把正文文字调到 #1f2937 这类近黑，对比度仍在 14:1 以上。

三个常见误判

1. 只看设计稿，不看实际背景：文字下面有渐变、图片、半透明蒙层时，要以最不利的那一处为准。
2. 忽略状态色：禁用态、占位符、边框常被做到 2:1 以下。WCAG 对这些有豁免，但用户是真的看不清。
3. 把「看起来能看清」当达标：对比度是可计算的客观值，不是主观感受。同一组颜色在不同屏幕上差异很大。

工具对普通文本与大号文本分别判定 AA 与 AAA 四项，四项独立给出结论——不要只看其中一个绿勾。