4.5 和 7 从何而来
WCAG 2.0 于 2008 年 12 月成为 W3C 推荐标准。作者以 ISO 9241-3 标准中的 3:1 最低值为起点，并将其提高，以弥补视力约为 20/40 的人群在对比敏感度上的损失，这在 80 岁左右较为常见。由此得到 AA 级的 4.5:1。AAA 级的 7:1 则针对约 20/80 的视力做同样的补偿。
相对亮度
公式先把每个 sRGB 通道还原为线性光，再以 0.2126、0.7152 和 0.0722 分别加权红、绿、蓝，这与电视标准 ITU-R BT.709 的权重相同，因为人眼对绿色最敏感。对比度等于较亮的亮度加 0.05，除以较暗的亮度加 0.05。这里的 0.05 代表屏幕反射的光，并把范围限定在 1:1 到 21:1，即白底黑字。
不只是文字
大号文字至少 24 px，粗体至少 18.66 px，在较低对比度下仍然可读，因此 AA 只需 3:1。2018 年 6 月发布的 WCAG 2.1 新增了成功标准 1.4.11 非文本对比度：输入框边框、焦点框、图标以及理解图表所需的部分，都必须与相邻颜色达到 3:1。
色盲与未来
约每 12 名男性中有 1 人、每 200 名女性中有 1 人存在色觉缺陷，多数涉及红色和绿色。对比度基于亮度计算，因此达标的配色依然可读，但仅在色相上不同的颜色可能看起来很像。这里的模拟采用 Machado、Oliveira 和 Fernandes 于 2009 年提出的模型。WCAG 3 草案正在研究 APCA，这种较新的方法还会考虑字号以及深色字配浅色底或浅色字配深色底。
常见问题
对比度够好就算无障碍了吗？
不是。这只是众多要求之一。WCAG 还要求颜色不能是传达含义的唯一方式，例如为链接或错误提示加上图标或下划线。
模拟能准确显示一个人看到的样子吗？
它是对完全二色视觉的良好近似。许多人的情况较轻，每个人的感知也略有差异，因此请把它当作参考。
我应该用 APCA 代替 WCAG 2 的对比度吗？
就目前的合规而言，请使用 WCAG 2 的对比度。2023 年 10 月发布的 WCAG 2.2 沿用同一公式，EN 301 549 等法规和标准也引用它。APCA 仍在开发中。
相关工具
颜色对比度检查器
免费的 WCAG 颜色对比度检查器：以 HEX、RGB 或 HSL 输入文字和背景颜色，查看对比度及 AA 和 AAA 结果，获取最接近的达标颜色，并模拟色盲效果。
调色板生成器
在浏览器中创建、锁定并打乱调色板。复制 HEX、CSS 变量或 JSON，导出 PNG 或 SVG，并从照片提取颜色。
色轮
在交互轮上选择一种颜色，生成互补色、类似色、三色色和其他调色板，并复制 HEX、RGB、HSL、HSV 或 CMYK。
渐变编辑器
在浏览器中制作线性和径向 CSS 渐变。拖动色标、设置角度，并复制 CSS、HEX、RGB、HSL、HSV 或 CMYK。
了解更多色彩知识
色彩在屏幕与印刷中如何工作：RGB、CMYK、HSL、十六进制、色轮、渐变、对比度，以及 PictorX 工具。
准备好尝试了吗？
在浏览器中打开 PictorX — 无需安装，无需信用卡即可启动。
打开颜色对比度检查器