WCAG 对比度检查器

WCAG AA 与 AAA，两种字号分别标注。

免费 - 无需注册 - 在您的设备上运行

在您的浏览器标签页中运行

  • AA与 AAA
  • 2种字号
  • WCAG亮度公式
  • 0次上传
规格

WCAG 对比度检查器 规格一览

输入
文字色与背景色
计算方式
相对亮度，再取比值
报告的级别
AA 与 AAA，两种字号
不在范围内的
一条准则，不是符合性
价格
免费
需要账户
无
处理位置
在您的设备上
使用方法

WCAG 对比度检查器 怎么用

  1. 1

    填入这组配色

    填入前景与背景色。

  2. 2

    读 AA 与 AAA

    读 AA 与 AAA。

  3. 3

    记录或修改

    记录，或改颜色。

问题

常见问题

对比度通过就代表符合 WCAG 吗？

不代表。符合性涵盖很多成功准则，这个面板只回答其中一组配色的对比度那一条，在整份审查里只占一小块。

该做到 AA 还是 AAA？

多数规范写的是 AA；AAA 更严，整套设计不见得做得到。面板两个级别都标，怎么取舍由您决定。

图标和边框也能测吗？

面板比较的是您填进去的两个颜色。非文本对比度另有一条要求、阈值不同，请分开记录。

运算在哪里进行？

在这个浏览器标签页内。两个颜色不会被上传，也没有账户或日志留着您测过什么。

背景说明

把它用在审查里

对比度用 WCAG 的相对亮度公式算出，再对 AA 与 AAA 两个级别、两种字号分别标注，旁边有这组配色的样例可以看。

  • 把配色、对比度和级别一起记下来，后面的人才能重做同一个测试。
  • 测用户真正看到的状态：悬停、已访问和禁用各是一组配色。
  • 文字压在照片上没有单一背景值，测后方最不利的那一块。
  • 在某一个主题下通过的设计 token，换到另一个主题要重测。

完整规格

WCAG 对比度检查器 的完整规格
输入文字的颜色，以及它后方的背景色。
计算方式先取两色各自的 WCAG 相对亮度，再算两者的比值。
报告的级别AA 与 AAA，各自标注普通字号与大字号。
不在范围内的非文本对比度、焦点可见性、结构，以及其他所有成功准则。
价格免费。由工作区外明确标注的广告支持。
需要账户不需要。
处理位置在您的浏览器标签页中。您的输入永远不会上传。
下一步

用同一批文件继续做

全部色彩工具： SPOTTOOLS 的色彩工具