先给一个直接回答
普通文字与背景可先按WCAG 2.2 AA的4.5:1阈值检查,符合大文本定义的文字为3:1。状态、链接或图表不能只用颜色传达意义。对比度检查是可读性工作的一部分,单个色对通过不代表整个页面符合WCAG。
先明确检查的是哪一对颜色
依据W3C对SC 1.4.3的说明,一般文字最低对比度为4.5:1;大文本为3:1,大文本通常指至少18pt,或至少14pt的粗体。临界值不能向上四舍五入后宣称通过。Logo、纯装饰等有特定例外,但不能据此豁免普通正文。原文链接列在文末。
检查时应读取文字的实际颜色和它正后方的背景色。带透明度、渐变或照片背景时,先确认最终合成颜色,并检查文字经过的较弱区域。给一张颜色很多的照片只取一个平均色,无法证明叠在它上面的整段文字都清楚。
六组可复算的数字示例
下表由sRGB色值按WCAG相对亮度公式计算,对比度展示保留两位小数;判断使用未四舍五入的结果。这些是纯色、不透明前景与背景的教学示例,没有测量读者设备,也不代表所有字号、字重和环境下的实际阅读体验。
前四组与本站可读性信息图使用同一色卡:墨色、米白、深青与赭橙。后两组来自文章中的阅读卡示例,便于比较不同配色在同一用途下的表现。
| 前景 / 背景 | 对比度约值 | 普通文字4.5:1 | 使用建议 |
|---|---|---|---|
| #17212B / #F3EBDD | 13.76:1 | 达到 | 浅底长文可用的候选 |
| #FFFFFF / #243F4A | 11.14:1 | 达到 | 深青按钮白字候选 |
| #C47742 / #F3EBDD | 2.92:1 | 未达到 | 赭橙不用于浅底普通文字 |
| #FFFFFF / #C47742 | 3.46:1 | 未达到 | 换深底或另选普通文字色 |
| #2F5D50 / #F4EBDD | 6.34:1 | 达到 | 浅底标题或正文候选 |
| #6A73B6 / #F4EBDD | 3.75:1 | 未达到 | 不用于普通正文 |
让颜色承担辅助表达
W3C的SC 1.4.1要求,颜色不能成为传达信息或区别元素的唯一视觉手段。原创示例:把“红色为未完成”改成“○ 未完成”,把“绿色为完成”改成“✓ 已完成”;颜色保留,但文字和形状也表达同样意思。折线图可直接标注名称并使用不同线型。
对于识别控件、状态和理解图形所必需的视觉信息,SC 1.4.11通常要求与相邻颜色达到3:1,并有非活动控件等例外。不是每条装饰线都必须达到该阈值,也不应只检查按钮文字就忽略必要的状态标记。具体适用范围见W3C原文。
按真实页面检查四种状态
先列出正文、次级说明、链接、按钮和表单提示,再检查默认、悬停、键盘聚焦与选中状态。选择一处浅色标签作为练习:若字太浅,可先加深文字,或换到较深底色;不要仅把字加粗就假定问题已解决。修正后重新计算相应色对。
- 记录前景和最终背景色,确认是否存在透明叠加。
- 按实际字号和字重选择对应阈值,用完整精度比较。
- 给分类、状态与错误信息补上可见文字、图标或线型。
- 在手机尺寸和放大文字的情况下阅读;用键盘检查聚焦位置是否清楚。
常见问答
一个颜色本身能被称为无障碍颜色吗?
不能脱离背景和用途判断。相同暖金在深底上可读,在白底上可能不足;还需要知道字号、状态和信息是否仅靠颜色区分。
灰度截图看得清就一定合格吗?
不能。灰度预览是观察明暗层级的辅助方法,不能替代对比度计算、语义标记、键盘操作及其他适用的可访问性检查。
参考资料
下列资料支持文中的标准说明;站内色卡、版式与练习为七色堂原创示例。