无障碍配色查找工具

选择前景色和背景色，此工具将检查这对颜色是否符合 Web Content Accessibility Guidelines (WCAG) 对比度要求 —— 这是无障碍审计、Lighthouse 以及大多数法律规定的数字无障碍要求（ADA、EN 301 549、Section 508）所采用的标准。

什么是 WCAG 颜色对比度？

WCAG 2.x 定义了两个公式。首先是相对亮度 —— 一种颜色的明暗程度，按人眼对红、绿、蓝的感知进行加权（使用线性化的 sRGB 通道计算，L = 0.2126×R + 0.7152×G + 0.0722×B）。其次是两种颜色之间的对比度比例 —— (L1 + 0.05) / (L2 + 0.05)，即较亮亮度除以较暗亮度 —— 范围从 1:1（颜色相同）到 21:1（纯黑底纯白）。

WCAG 规定了文本的最低对比度比例，以确保低视力或色觉缺陷人群能够阅读：

• AA，普通文字： 4.5:1
• AA，大号文字（≥18pt，或 ≥14pt 加粗）：3:1
• AAA，普通文字： 7:1
• AAA，大号文字： 4.5:1

AA 是大多数网站追求的标准 —— 无障碍审计和大多数法律标准要求的正是这一等级。AAA 更为严格，主要适用于政府产品或对无障碍要求较高的产品。

如何使用

1. 选择你的前景（文字）颜色 —— 输入 hex 值或使用取色器。
2. 选择你的背景颜色。
3. 结果表格会即时更新，显示准确的对比度比例以及四个阈值（AA/AAA × 普通/大号）的通过/失败徽标。
4. 如果你的配色在普通文字上未达到 AA，工具还会计算一个建议的无障碍前景色 —— 与你原色最接近的亮度调整（变深或变浅，取视觉变化较小者），在保持相同色相和饱和度的情况下达到 4.5:1。

常见问题

为什么同一对颜色有时大号文字通过、普通文字却不通过？ 更大更粗的文字在较低对比度下也更容易阅读，因此 WCAG 对至少 18pt、或 14pt 加粗的文字将比例放宽到 3:1（AA）或 4.5:1（AAA）。

色盲会影响这一点吗？ 对比度比例是亮度计算，而不是颜色差异计算，因此它在常见的色觉缺陷形式下依然表现良好 —— 但它并不能取代对"信息是否仅靠色相传达"的检查（例如"红色 = 错误"还需要图标或文字标签）。

为什么建议的前景色和我输入的色相不一样？ 色相和饱和度完全相同 —— 只是亮度改变，朝哪个方向（靠近黑色或靠近白色）能以最小偏离你的原色达到 4.5:1，就朝哪个方向调。

如果我想要 AAA 合规怎么办？ 查看结果表格中的 AAA 行。建议颜色功能目前针对的是普通文字 AA（4.5:1），这是大多数审计采用的阈值；满足 AA 的颜色不一定满足 AAA。

我的颜色数据会被发送到任何地方吗？ 不会 —— 所有计算都完全在你的浏览器中进行。不会上传或存储任何内容。