什么是高对比度模式？
测试您的网页内容在不同高对比度设置下的显示效果。粘贴 HTML 或 URL 截图，预览符合 WCAG 标准的对比度模式，包括 Windows 高对比度、反色以及自定义对比度主题。
可以选预设主题(Windows 高对比度、反相、黄底黑字),也可以自定义前景和背景色。对比度实时显示,并告诉你这组配色在 WCAG 哪些等级(AA、AAA、正文、大字)合格或不合格。预览中的 HTML 可以连同行内样式一起导出。
使用方法
- 第一步 — 将 HTML 或纯文本粘贴到编辑区域。
- 第二步 — 从预设中选择对比度模式：Windows 高对比度（黑/白）、反色、黑底黄字或自定义颜色。
- 第三步 — 查看实时预览以检查可读性，使用对比度比率检测器验证文本元素是否符合 WCAG AA/AAA 标准。
何时使用
- 营销页面上线前,先做一轮 WCAG AA 对比度审查。
- 检查焦点指示和只有图标的按钮在 Windows 高对比度下是否还能看见。
- 挑一个能跟品牌背景达到 4.5:1 对比度的正文颜色。
结果
一位开发者将导航栏 HTML 粘贴进来，切换到 Windows 高对比度模式后发现，纯图标按钮在黑色背景下完全不可见，于是为其添加了可见的文字标签。
常见问题
- WCAG AA 要求多少对比度?
- 正文 4.5:1,大字号(18pt 常规或 14pt 粗体以上)3:1。AAA 把要求提到 7:1 和 4.5:1。检测器会标出每种组合通过或不通过的等级。
- 为什么图标按钮在 Windows 高对比度下会消失?
- Windows 会把颜色替换成系统色,并忽略背景图片。用 background-image 或者只有 fill 的 SVG 做的图标就会变隐形。建议用内联 SVG 并把 stroke 设为 currentColor,或加上可见的文字标签。
- 黄底黑字真的是无障碍主题吗?
- 是。它是最早的 Windows 高对比度主题之一,至今仍被很多弱视用户使用——因为黄色即使在黄斑变性的情况下也很容易被辨认。一些用户觉得它比纯白底黑字更易读。
- 通过 WCAG AA 是否就意味着页面无障碍?
- 对比度只是 WCAG 的一部分。还需要键盘可导航、语义 HTML、alt 文本、表单标签、焦点指示器,以及尊重「减少动效」的偏好。本工具只检查颜色这一项。
- 为什么我们的品牌橙色在白底上不达标?
- 高饱和度的中间色(橙、黄、青柠)在白底上通常对比度低于 3:1,因为它们的亮度太高。正文请把橙色调深,或者只把橙色用在背景、大标题上,只要满足 3:1 就行。