WCAG 对比度检测工具

在您的网站上使用某种文字颜色和背景颜色之前,根据 WCAG 无障碍标准的阈值检查两者之间的对比度。

示例:

标题示例

这是一段使用上方所选文字颜色和背景颜色的示例段落,除了 WCAG 分数外,也可用于直观判断可读性。

工作原理

WCAG 建议规定了文字与背景之间的最低对比度,以确保网站对视力较弱的人群或在不利的显示条件下(屏幕亮度低、反光)仍然可读。在确认 Figma 或视觉规范中选定的配色方案之前,该工具会计算两种颜色之间的实际对比度,并指出是否满足 AA(建议的最低级别)和 AAA(增强级别)的标准。

「普通文字」和「大号文字」有什么区别?

所要求的对比度阈值取决于文字大小:大号文字(约 18pt 起,或加粗时 14pt 起)在对比度较低的情况下仍然保持可读,因为字母形状更大、更容易辨认。

我应该追求 AA 还是 AAA?

AA 级别是通常建议的标准,对大多数网站来说已经足够(在某些司法辖区甚至是法律要求)。AAA 级别更严格,建议用于无障碍访问优先的内容,但有时在不大幅修改品牌配色的情况下很难达到。

100% 本地处理:对比度的计算直接在您的浏览器中通过 WebAssembly 完成,不会调用任何外部服务器。