WCAG 对比度：别让用户眯着眼才能看清你的按钮
一次”灰色小字看不清”的投诉
之前做了个后台，表单的辅助说明文字用了 #999 灰，背景是白色。上线后真有用户邮件反馈：“那段说明我得把脸凑到屏幕上看”。我第一反应是”你显示器调亮点啊”，后来用对比度工具一量——#999 对白底只有 2.85:1，连 WCAG AA 大文本的 3:1 都没到，普通文本要求的 4.5:1 更是差得远。
那次之后我养成了习惯：任何出现在界面上的文字，上线前先用对比度工具过一遍。本文把 WCAG 对比度这件事一次讲清。
对比度比值到底是什么
对比度不是”颜色差多大”，而是一个基于相对亮度的公式。WCAG 先把每个颜色转成 0–1 的相对亮度 L（考虑人眼对不同颜色的敏感度，绿色最亮、蓝色最暗），再算：
对比度 = (L亮 + 0.05) / (L暗 + 0.05)
比值越大越清晰。纯黑对纯白是 21:1（上限），而上面那个 #999 对白底只有 2.85:1。本工具会实时算出这个比值，并同时给出前景和背景各自的相对亮度，方便你理解”差在哪”。
AA 和 AAA：两套及格线
WCAG 2.1 把达标分了两级，每级又按文本大小分门槛：
| 等级 | 普通文本（< 18pt 或 < 14pt 粗体） | 大文本（≥ 18pt 或 ≥ 14pt 粗体） |
|---|---|---|
| AA（最低合规） | ≥ 4.5:1 | ≥ 3:1 |
| AAA（增强合规） | ≥ 7:1 | ≥ 4.5:1 |
几个要点：
- 大文本门槛更低，因为它本来就大，稍微糊一点也认得出。
- AA 是大多数法规的底线（比如欧盟 EN 301 549、美国 Section 508 基本都按 AA 要求）。AAA 更严格但很多场景做不到，属于”加分项”。
- 本工具会用 ✓/✗ 徽标逐项标出：AA 普通文本、AA 大文本、AAA 普通文本、AAA 大文本，一目了然。
别漏了”非文本对比”
很多人只检查文字，但 WCAG 2.1 的 1.4.11 非文本对比 要求：图标、边框、输入框轮廓、图表线条这类，和相邻颜色的对比度也要 ≥ 3:1。比如：
- 一个”提交”按钮的边框如果和背景几乎同色，键盘聚焦时用户可能根本看不到焦点在哪。
- 表单输入框的 1px 灰边，对白底可能只有 2:1，不达标。
本工具也内置了”非文本对比 ≥ 3:1”的判定，专门覆盖这类元素。
配色不达标，怎么救
最直接的办法是调整较暗那一方的亮度（保持色相和饱和度，视觉上还是同一种颜色）。本工具提供「自动调整」按钮：
- 选目标——AA 普通文本(4.5)、大文本/非文本(3.0)、或 AAA 普通文本(7.0)。
- 工具会在固定另一方颜色的前提下，对较暗一方做亮度二分搜索，找到刚好达标的最小值。
- 调整后给出新的 HEX 和达标后的比值，复制即可用。
注意：自动调整只在”保留色相”的前提下工作。如果当前色相本身怎么调都达不到（比如深蓝对深红），那就得换另一方颜色，工具也会提示你。
常见速查
| 前景 / 背景 | 对比度 | 结论 |
|---|---|---|
#000 / #FFF | 21:1 | 满分，随便用 |
#767676 / #FFF | 4.54:1 | 刚好过 AA 普通文本 |
#999999 / #FFF | 2.85:1 | 不及格，普通文本不可用 |
#0050B3(蓝) / #FFF | 7.4:1 | 过 AAA 普通文本 |
#FFD700(金) / #FFF | 1.2:1 | 灾难级，千万别用 |
一个实用经验值：正文文字想稳过 AA，灰底上的灰至少要 #767676 或更深；白底上的灰至少 #595959 才稳。
常见问题
Q：为什么我眼睛看着还行，工具却说不达标？ 人眼在不同环境光、不同设备上差异很大，尤其显示器偏亮或老年人、低视力用户根本看不清。WCAG 是给”最差情况”兜底的标准，别靠自己眼睛判断。
Q：大文本具体指多大？ WCAG 定义：≥ 18pt（约 24px）的常规字，或 ≥ 14pt（约 18.66px）的粗体。低于这个尺寸一律按”普通文本”要求 4.5:1。
Q：半透明文字（rgba）怎么算？ 先把半透明颜色和它下方的背景混合成一个实色，再算混合色与真正背景的对比度。本工具输入的是实色，遇到半透明请先在脑中（或借助颜色转换工具）合成后再测。
Q：深色模式下要不要重新测？ 必须。同一段文字在浅色和深色背景上的对比度完全不同，两套主题要分别达标。
Q：图片里的文字、视频字幕也要管吗？ 要。WCAG 对图片中的文字、字幕也建议达到 4.5:1（字幕至少 3:1）。纯装饰性文字（无意义）可以不管。
Q：对比度达标了是不是就无障碍了？ 对比度只是无障碍的一小块（WCAG 1.4.3）。还有颜色不能是唯一信息载体（别只用红绿区分）、键盘可达、屏幕阅读器友好等，需综合考虑。