操作指南 · 无障碍
WCAG AA 与 AAA 对比度标准:你的配色到底要达到多少
简短回答
AA 要求普通文本对比度 4.5:1、大号文本 3:1;AAA 提高到 7:1 和 4.5:1。多数产品和法规以 AA 为目标。Contrast Checker 可在 Chrome 本地一次性按两档标准给任意配色打分。
- 1
先定目标等级:多数产品和所有主要法规用 AA;阅读密集或面向低视力用户的界面考虑 AAA。
- 2
打开 Contrast Checker 弹窗,输入或从页面取文字色和背景色。
- 3
读判定:普通文本需要 4.5:1(AA)或 7:1(AAA);大号文本需要 3:1 或 4.5:1。
- 4
按 3:1 的非文本规则检查输入框边框、图标和焦点态——这条只有 AA。
- 5
在侧边栏扫描整页,揪出你没想到要测的组合。
WCAG 为颜色对比度定义了两个符合性等级,差别就是几个数字:普通文本 AA 要 4.5:1,AAA 要 7:1。下面讲清每一档的具体要求、“大号文本”的分界线在哪,以及如何同时按两档标准测试你自己的配色。
AA 要求什么
AA 级(成功标准 1.4.3)要求文本与背景的对比度至少达到 4.5:1,大号文本只需 3:1。AA 覆盖的不只是文字:标准 1.4.11 要求 UI 组件中需要被感知的部分——输入框边框、焦点指示、承载含义的图标——达到 3:1。
AAA 要求什么
AAA 级(1.4.6)把文本阈值提高到普通文本 7:1、大号文本 4.5:1。非文本对比没有 AAA 标准——控件和图标始终只受 3:1 的 AA 规则约束。在整套界面上维持 AAA 确实很难:7:1 会把大多数中间调品牌色排除在正文用色之外,所以 W3C 自己也说,整站做到 AAA 符合性往往并不可行。
“大号文本”从哪算起
大号文本指常规字重至少 18pt(24px),或加粗至少 14pt(约 18.7px)。24px 的标题 3:1 就能过 AA;它下面 16px 的段落却需要 4.5:1。同一个灰色完全可能这一行通过、下一行不通过——这是规则本来的设计,不是前后矛盾。
该以哪一档为目标?
除非有明确要求,否则以 AA 为目标。让无障碍具有强制力的法规——欧盟的 EN 301 549、美国的 Section 508、多数采购规范——引用的都是 WCAG AA 级,而不是 AAA。对阅读密集的界面或面向低视力用户的产品,AAA 值得作为约束;在那里把它当作正文文字的设计目标,而不是套在每个标签和按钮上的一刀切要求。
一次按两档标准测试一对颜色
Contrast Checker 显示任意两种颜色的对比度,并同时按 AA 和 AAA、普通与大号文本给出判定,一屏看全——在弹窗里选色,或直接从线上页面取色。想主动找问题而不是逐个验证,就打开侧边栏扫描整页。
所有计算都在本地完成,扩展只在你调用它的那个标签页读取内容(activeTab);无法解析的背景——渐变、照片、混合图层——会被报告为无法测量,而不是给出一个假比值。