颜色对比度检查（WCAG）

功能简介

颜色对比度检查工具按照 Web 内容无障碍指南（WCAG 2.x）判断文字颜色在背景上是否清晰可读。文字和背景可以输入任意 CSS 颜色——十六进制、rgb()、hsl()、颜色名或半透明颜色——工具会显示对比度、每一项 AA 和 AAA 标准是否通过，并实时预览。如果不达标，还会给出色相不变、最接近的达标文字颜色和背景颜色。所有计算都在浏览器里完成。

使用方法

1. 输入或选择「文字颜色」和「背景颜色」，「交换」可以对调两者。
2. 查看「对比度」以及普通文字、大号文字和界面组件的通过/不通过列表。
3. 如果某个级别不通过，看「最接近的达标颜色」：每条建议都显示新颜色、它的对比度、复制按钮，点「使用」即可应用。
4. 打开 APCA 可以同时看到 WCAG 3 草案的亮度对比值（Lc）。

半透明颜色会先混合再检查：文字叠在背景上，背景叠在白色上。

示例

#767676 on #ffffff  →  4.54:1  passes AA normal text
#777777 on #ffffff  →  4.47:1  fails AA normal text, passes AA large text
#000000 on #ffffff  →  21:1    the maximum

对比度是怎么计算的

每个颜色的相对亮度由 sRGB 通道计算（先线性化，再按红 21%、绿 72%、蓝 7% 加权）。对比度等于（较亮者 + 0.05）/（较暗者 + 0.05），范围从相同颜色的 1:1 到白底黑字的 21:1。只和明暗有关，和色相无关：纯红配纯绿看起来很鲜艳，但对比度只有约 1.3:1。

建议颜色只调整颜色的明度（HSL 中的 L），并选择变化更小的方向（变暗或变亮）。有时任何明暗都达不到要求：中灰色背景上，无论什么文字颜色都到不了 7:1。