对比度

对比度衡量两种颜色——通常为文字与其背景——之间亮度感知差异。比值范围从1:1（完全无对比度——白底白字）到21:1（纯黑底纯白字）。WCAG规定了文字易读性的最低比值要求。

WCAG阈值

WCAG 2.x成功准则1.4.3（最低对比度，AA级）和1.4.6（增强对比度，AAA级）设定了以下下限：

文字类型	AA级	AAA级
普通文本（<18pt或<14pt粗体）	4.5:1	7:1
大号文本（≥18pt或≥14pt粗体）	3:1	4.5:1
图形对象 + 用户界面组件（1.4.11）	3:1	—

WCAG 2.x使用基于亮度比值的WCAG公式计算对比度。WCAG 3正在研究一种感知均匀的替代方案（“APCA”——无障碍感知对比度算法），该算法在极暗或极亮背景下表现不同；APCA目前尚未成为规范标准。

常被忽略的情形

对比度是少数工具能够可靠检测的WCAG规则之一，因此自动扫描器能发现大多数纯文字背景对比度问题。但以下情形仍可能遗漏：

• 输入框的占位符文字。 通常为白底上的#999或更浅的颜色——不符合AA要求。设计师倾向于使用低对比度占位符以区别于已填写内容，但实际最佳做法是在输入框上方使用独立的<label>，并提高占位符的对比度（或完全不使用占位符）。
• 悬停和聚焦状态。 默认状态下对比度合格的按钮，可能在悬停时不符合要求（例如白色背景上的浅灰悬停状态）。应在每种视觉状态下对交互元素进行审计。
• 禁用控件。 禁用控件正式豁免于AA对比度要求，但仅通过低对比度将其置灰，会使色觉障碍用户无法判断该控件已被禁用。应将颜色与其他线索配合使用——图标、标签变化，或aria-disabled属性以便屏幕阅读器播报。
• 图片和渐变背景上的文字。 英雄区叠加文字在背景图片明亮区域和暗色区域上同时出现时，往往在较亮区域不符合对比度要求。
• 仅用图标作为标签。 24像素图标无文字说明时，需与其背景保持3:1的对比度（1.4.11），且所测量的是图标中有意义的像素——即轮廓描边。

实际测试流程

三种工作流程有助于在早期发现对比度问题：

1. 设计阶段检测。 Stark、Able和Adobe XD的无障碍检查工具可在设计工具内部评分对比度，在编写代码之前解决问题。
2. 标记化调色板。 将每对文字/背景颜色定义为一个令牌，统一检测其对比度，禁止在承载文字的组件上使用随意的颜色值。
3. 自动化CI检查。 axe-core、Pa11y或Lighthouse会因对比度违规而导致构建失败，接入成本低，跳过代价高。

超越最低标准

4.5:1是最低要求，而非审美目标。对于患有轻度色觉缺陷、与年龄相关的视力下降或使用低质量显示器的用户，正文字体的对比度最好达到7:1或以上。每个元素都恰好通过AA对比度要求的网站，即便对没有正式视觉障碍的用户来说，整体感觉通常也偏低对比度。