操作指南 · 无障碍
如何修复网页上的低对比度文字
简短回答
在 Contrast Checker 弹窗里取到不达标的文字色和背景色,然后调明度——把文字调深或把背景调浅——直到 WCAG 判定翻转:普通文本 4.5:1,大号文本 3:1。把修改落在共享的 CSS token 上,在渲染后的页面复测,压在图片上的文字则垫一层遮罩。
- 1
用弹窗的吸管取到不达标的文字和它的背景,拿到渲染后的颜色。
- 2
记住目标:普通文本 4.5:1,大号文本 3:1(WCAG AA)。
- 3
把文字调深或把背景调浅——调明度,保色相。
- 4
在弹窗里复测新组合,过线留些余量,别停在恰好 4.5:1。
- 5
把修改落在设计 token 或 CSS 变量上,而不只是某一个元素。
- 6
重新加载,从侧边栏复扫整页,确认没有别处回退。
低对比度文字是网页上最常见的无障碍缺陷之一——也是修起来最便宜的一种,因为修复几乎总是一次明度调整,而不是一场重设计。下面讲的是找到低对比度文字之后怎么修:颜色该往哪个方向动、动多远,以及如何在线上页面证明修好了。所有检测都用免费的 Contrast Checker 扩展在 Chrome 本地完成。
改之前先测量
打开弹窗,用吸管取到不达标的文字和它的背景——你要的是浏览器实际渲染的颜色,不是你记忆里样式指南上的那个。弹窗显示比值,并同时按 WCAG AA 和 AAA 打分。你的 AA 目标:普通文本 4.5:1,大号文本(24px 常规,或约 18.7px 加粗)3:1。要是还没定位到问题在哪,先在侧边栏扫描整页,照着那张清单干。
动明度,别动色相
对比度由相对亮度算出,所以明度干了几乎全部的活。灰字白底 3.8:1 不达标,把灰调深就修好了;换成一个同样浅的蓝色几乎什么都不会变。保住品牌想要的色相,调明度直到判定翻转——文字调深、背景调浅,或者两边各让一点。每个候选色先在弹窗里复测,再落进 CSS。
过线要留余量,并且改在 token 上
别停在恰好 4.5:1。留点余量,悬停态、稍有差异的显示器或未来某次背景微调才不会把你压回线下。而且要改在颜色的定义处——设计 token 或 CSS 变量——而不是某一个元素上。同一个过浅的灰通常在图注、提示语和次级标签里被反复使用,改一个 token 能一次清掉一串失败。
压在图片和渐变上的文字
照片或渐变上的文字没有单一背景色,Contrast Checker 会照实告诉你:这类情况被标记为无法测量,而不是配一个编出来的比值。可靠的修法是在文字后面垫一层纯色或近似纯色的遮罩,然后拿文字对遮罩色检测。如果坚持保留裸图,就取图片的最亮点和最暗点,让文字对两者都达标。
在渲染后的页面上证明它
CSS 改动上线后,在线上页面重新取一次这对颜色——主题、不透明度和继承有时会渲染出与样式表承诺不符的结果。再从侧边栏快速复扫一遍,确认没有别处回退。一切都在本地:扩展只在你调用时读取标签页(activeTab),无账号、无跟踪。