WCAG 对比度检查通过几个简单的步骤完成。没有任何信息离开你的浏览器。
- 你输入一个前景色和一个背景色。工具将 hex、rgb()、hsl() 或命名 CSS 颜色解析为红、绿、蓝通道值。
- 每个 RGB 通道通过 sRGB 传递函数进行线性化，将经过伽马编码的显示值转换为线性光强度。
- 线性值按照人眼对每个通道的敏感度加权——红色 0.2126、绿色 0.7152、蓝色 0.0722。其总和即为该颜色的相对亮度。
- 对比度计算公式为 (L1 + 0.05) ÷ (L2 + 0.05)，其中 L1 是较亮颜色的亮度，L2 是较暗颜色的亮度。额外的 0.05 确保公式对纯黑色同样有效。
- 将计算出的比值与 WCAG 阈值比较：AA 普通文本需要至少 4.5:1，AA 大号文本需要 3:1，AAA 普通文本需要 7:1，AAA 大号文本需要 4.5:1。大号文本指至少 18pt 或 14pt 粗体。
FAQ
关于 WCAG 对比度检查的常见问题。
AA 和 AAA 有什么区别？
AA 是大多数 Web 内容的最低合规级别。它要求普通文本的对比度至少为 4.5:1，大号文本为 3:1。AAA 是更高的标准，要求普通文本 7:1，大号文本 4.5:1。你可能会针对新闻网站正文等关键内容瞄准 AAA，同时在整个设计中采用 AA。由于品牌颜色很难在所有地方都满足 AAA，许多团队的目标是全平台达到 AA，并在可能的地方将关键文本提升至 AAA。
WCAG 中什么是「大号文本」？
WCAG 2.x 将大号文本定义为常规字重至少 18 点（24px），或粗体字重至少 14 点（约 19px）。属于字体的符号和图标遵循相同的阈值。如果你不确定 UI 应使用哪个阈值，请同时检查两者——AA 大号的标准较低（3:1），因此大多数未通过 AA 普通的颜色对在文本足够大时实际上能通过 AA 大号。
为什么我的颜色对通过了 AA 大号却未通过 AA 普通？
因为 AA 大号只需要 3:1 的比值，而 AA 普通需要 4.5:1。WCAG 为大号文本设置了较低的阈值，因为较大的字符即使对比度较低也更容易阅读。例如，比值为 4.0:1 的颜色对可以通过 AA 大号（3:1 阈值），但无法通过 AA 普通（4.5:1 阈值）。这在白色背景上使用较浅的品牌色作为前景时非常常见。
我可以仅依赖此工具进行无障碍审计吗？
本工具只检查一项内容——两种纯色之间的 WCAG 2.x 对比度。真正的无障碍涉及更多方面：焦点指示器、字体大小和字重、仅通过颜色传达信息，以及屏幕阅读器和缩放工具的兼容性。请将本对比度检查与其他审计方法结合使用，以全面了解你应用程序的无障碍状况。
输入支持哪些颜色格式？
你可以粘贴 3、4、6 或 8 位 hex 代码（带或不带 #）、使用传统逗号语法或现代空格分隔语法的 rgb() 和 rgba() 值、使用任意标准色相单位（deg、rad、grad、turn）的 hsl() 和 hsla()、hsv()、hwb()，以及 CSS Color Module Level 4 规范中的任意 150 个命名 CSS 颜色。颜色完全在你的设备上解析。