操作指南 · 无障碍
如何在 Chrome 里扫描整页的对比度问题
简短回答
在页面上打开 Contrast Checker 的侧边栏并运行扫描:它会遍历可见文本,在本地计算每个比值,列出所有未通过 WCAG AA 或 AAA 的组合。改完 CSS 在同一标签页复扫;渐变、图片这类解析不了的背景会被标记为无法测量,而不是给一个假数字。
- 1
打开要审计的页面,点击 Contrast Checker 图标,打开侧边栏。
- 2
运行扫描——它遍历可见文本,在本地计算每个比值。
- 3
查看不达标组合;先修低于 4.5:1 的正文,再修低于 3:1 的大号文本。
- 4
被标为无法测量的手动核查:用吸管取背景的最亮点和最暗点。
- 5
调整 CSS,重新加载,在同一标签页复扫,直到清单清空。
一对一对地查颜色,对单个组件行得通,对整页行不通。真实页面混着正文、次级标签、链接、图注和按钮,每个都压在自己的背景上——而不达标的那一对,往往正是你从没想到要测的。Contrast Checker 是一款免费 Chrome 扩展,从侧边栏扫描整页,列出所有未通过 WCAG 的文本组合。每个比值都在本地计算,页面上的任何内容都不会被发送到任何地方。
在被测页面上打开侧边栏
点击 Contrast Checker 图标,打开侧边栏。和弹窗不同,它在你干活时一直停靠在页面旁——这正是审计需要的,因为你会不停地滚动、修改、复扫。扩展使用 activeTab,只有你在某个标签页上调用它之后才能读取该页面;它对任何站点都没有常驻访问权。
运行扫描
启动扫描,扩展会遍历当前标签页的可见文本,把每段文字与浏览器实际渲染在它身后的背景配对,在你的机器上计算对比度。你得到的不是一个要逐元素检查的页面,而是一份不达标组合的清单——审计从问题下手,而不是从一张白纸开始。
按严重程度分诊,而不是按数量
扫描结果是一张待办清单,就按待办清单来排序。低于 4.5:1 的正文伤害的读者最多,也直接不过 WCAG AA——先修它。大号文本(24px 常规,或约 18.7px 加粗)只需要 3:1,所以 4:1 的标题比同样比值的正文段落问题更轻。很多失败共享同一个根源:某个灰色定义在一个 CSS 变量里被到处复用,改一个 token 就能清掉半张清单。
预期会有几个诚实的“算不出”
压在渐变、照片或多层半透明图层上的文字没有单一的背景色,任何单一比值都不成立。Contrast Checker 会把这些情况标记为无法测量,而不是编造一个数字。手动核查它们:用弹窗的吸管取背景的最亮点和最暗点,分别与文字做对比——两个极端都通过,中间就都通过。
修、复扫、重复
调整 CSS 之后——修法几乎总是一次明度调整,见如何修复低对比度文字——重新加载并再次扫描同一个标签页。清单缩到零就是你的证据,而且是在渲染后的页面上,不是在一张设计 token 表格里。无账号、无上传、无跟踪:整场审计都在你的浏览器里跑。