操作指南 · 无障碍
网页颜色对比度检测:在 Chrome 里做 WCAG 合规检查
简短回答
打开 Contrast Checker 弹窗,输入两种颜色或直接从页面取色,立即读到对比度数值和 WCAG AA/AAA 的通过与否。要做全页审计,就在侧边栏扫描整页。所有计算都在本地完成——没有任何颜色离开你的浏览器。
- 1
在要测试的页面上点击 Contrast Checker 图标,打开弹窗。
- 2
输入前景色和背景色,或用吸管从页面上取色。
- 3
读取对比度,以及普通/大号文本的 AA、AAA 通过与否。
- 4
如果不达标,调整明度直到判定翻转,然后复测。
- 5
打开侧边栏扫描整页,揪出漏掉的不达标组合。
不用把十六进制色值抄进某个对比度检测网站。在 Chrome 里,Contrast Checker 直接在你正在测试的页面上给颜色打分:在弹窗里选一对颜色、从实际页面上取色,或在侧边栏扫描整页。每个比值都在本地计算,你检查的内容不会被发送到任何地方。
选择或从页面取两种颜色
点击 Contrast Checker 图标打开弹窗,输入前景色和背景色——或者用吸管直接从页面上取色。审计不是你自己写的网站时,取色尤其重要:你拿到的是浏览器真正渲染出来的颜色,不用去 DevTools 里翻计算样式。
读取比值和 AA/AAA 判定
弹窗显示对比度数值(量程从 1:1 到 21:1,白底黑字是 21:1),并同时按两档 WCAG 标准打分。普通文本 AA 要求至少 4.5:1,AAA 要求 7:1;大号文本——18pt(24px)常规字重,或 14pt(约 18.7px)加粗——阈值分别降到 3:1 和 4.5:1。每种情况过没过一目了然,不用自己做算术。
修正不达标的配色,然后复测
对比度主要由明度决定,而不是色相。如果一对颜色不达标,把文字调深或把背景调浅,直到判定翻转——小幅调整色相几乎救不回一个不及格的比值。改完先在弹窗里复测再写进 CSS,并把达标的色值记在设计 token 旁边,下次改动就能从已知达标的配色出发。
在侧边栏审计整页
一对一对地查,对单个组件够用,对整页太慢。打开侧边栏扫描当前标签页:它会遍历可见文本,报告不达标的颜色组合,让你直接从真正的问题下手,而不是逐个元素去找。
渐变会得到诚实的“无法计算”
文字压在渐变、照片或多层半透明图层上时,不存在单一的背景色,硬给一个比值就是虚构。Contrast Checker 会把这些情况标记为无法测量,而不是编造一个数字。遇到这种情况,手动取背景的最亮点和最暗点,分别与文字做对比——两个极端都通过,中间任何位置就都通过。
只在你主动调用时才读取页面
这个扩展对任何站点都没有常驻访问权。它使用 activeTab,只有你在某个标签页上调用它之后才能看到该页面,而且每个比值都在你的机器上计算。无账户、无上传、无跟踪。