对比度检查回答的是哪一个问题
W3C WCAG 2.2的文字最低对比要求中,通常文字与背景至少达到4.5:1;符合大号文字条件时至少3:1。大号不是凭视觉随意判断,需依据字号、字重与规范定义。装饰、标志等有各自例外,不能把正文都归为装饰。
这些阈值回答可辨认性的一部分问题,不评价一套配色是否优美,也不单独证明整个网站已经符合无障碍标准。字号、行距、内容结构、键盘使用等仍需分别考虑。
逐对检查,而不是只测主色
本站建议先列出真正相邻的文字与背景组合,再用对比度工具输入最终颜色。渐变与图片背景不能只检查最容易通过的一角;应查看文字实际覆盖位置。
- 列出正文、次级说明、导航、按钮及悬停等状态的颜色组合。
- 记录前景色、背景色、字号与字重,再计算对比度。
- 对不够清晰的组合优先调整明暗,也可改变背景或文字承载方式。
- 用实际内容再次查看,避免只在短示例里看起来合适。
只靠颜色传信息为什么不够
WCAG的颜色使用准则要求颜色不能成为唯一视觉信息渠道。一个错误框仅从绿变红,可能无法清楚告诉所有人发生了什么;加上“格式有误”等文字和图标,才有更完整的提示。
| 场景 | 脆弱做法 | 更清楚的做法 |
|---|---|---|
| 超链接 | 仅把文字换成另一种颜色 | 配合下划线或其他可辨线索 |
| 折线图 | 系列只用红绿区分 | 增加点形、线型与直接标签 |
| 状态提示 | 仅显示红点或绿点 | 添加“待处理”“已完成”等文字 |
| 表单错误 | 只改变输入框颜色 | 给出具体错误说明与关联位置 |
把审美试验与信息检查分开
你可以保留柔和的背景和丰富的装饰色,同时让主要文字拥有清晰对比。不要因为喜欢淡色就把所有字都调淡;也不要把高对比误解为只能使用纯黑与纯白。
这套检查适合网页、屏幕演示和数字阅读内容。印刷品可借鉴明暗与非颜色线索的思路,但屏幕WCAG数值不应被直接当成所有印刷条件的合格证明。
常见问题
把页面转灰度就算检查通过了吗?
灰度预览有助于发现层级问题,但不能替代规范中的颜色数值计算,也不能覆盖全部色觉差异。
两个颜色对比强就能不用文字标签吗?
如果信息依赖准确识别某一种颜色,仍应添加文字或其他线索;尤其不要让读者必须记住红绿各自代表什么。
来源与延伸阅读
- W3C WAI:Understanding SC 1.4.3 Contrast (Minimum)
WCAG 2.2 AA的普通文字4.5:1、大号文字3:1阈值及适用条件。
- W3C WAI:Understanding SC 1.4.1 Use of Color
说明不能只靠颜色传递信息,需要文字、形状等补充线索。