怎么用
- 在「颜色」里输入或粘贴一个颜色，也可以点旁边的色块按钮直接取色。支持 3、4、6、8 位 HEX，rgb()、rgba()、hsl()、hsla()，「51, 102, 153」这样的三个数字，以及 148 个 CSS 颜色名。
- 从 HEX、RGB、HSL 三行里复制需要的格式。输出采用新版 CSS 语法（空格分隔），目前所有主流浏览器都支持。
- 在「对比度检查」里分别填入文字色和背景色。预览区会用两种字号显示真实文字，下方列出这组颜色达到了哪些 WCAG 等级。
- 点「互换」可以检查反过来的情况，比如彩色按钮上的白字，而不是白底上的彩色字。
格式转换与对比度的原理
HEX、RGB 与 HSL
HEX 和 RGB 是同一种东西的两种写法：红、绿、蓝三个通道，各自取值 0 到 255，HEX 用十六进制写（33 就是 51），RGB 用十进制写。HEX 的第四组数字，或者 rgb() 里斜杠后面的数，表示透明度：#33669980 是同一个颜色、大约 50% 不透明。这些写法都定义在 CSS Color Module Level 4 里。
HSL 用色相、饱和度、亮度三个量描述同一个颜色：色相是色环上的角度，0° 红、120° 绿、240° 蓝。它更适合手动调色，比如想要 #336699 的浅一档，只需把 hsl(210 50% 40%) 的亮度调到 60%，色相不变。由于 HSL 数值保留一位小数，来回转换时某个通道可能相差 1。
对比度怎么算
WCAG 用每个颜色的「相对亮度」来定义对比度。先把每个通道从 sRGB 换算成线性光强：不超过 0.04045 的除以 12.92，更大的加偏移后取 2.4 次方；再按红 0.2126、绿 0.7152、蓝 0.0722 加权求和。绿色权重最大，是因为人眼对绿光最敏感。对比度等于（L1 + 0.05）÷（L2 + 0.05），L1 是较亮的那个颜色，取值从 1:1（两色相同）到 21:1（白底黑字）。
第 1.4.3 条成功准则要求：AA 级普通文字至少 4.5:1，大号文字至少 3:1；AAA 级分别提高到 7:1 和 4.5:1。「大号」指至少 18 点（约 24 像素），或者 14 点粗体（约 18.5 像素）。第 1.4.11 条要求图标、输入框边框等界面元素至少 3:1。WCAG 明确说明，计算出的比值不得先四舍五入再比较，4.499:1 就不满足 4.5:1。所以本工具显示对比度时直接截断，而不是四舍五入。
文字色如果带透明度，会先按透明度和背景色混合，再计算对比度，因为读者实际看到的就是混合后的颜色。
为什么要关心对比度
对比度不够的文字，在阳光下的手机屏幕上、在老年人或视力较弱的读者眼里，都很难看清。很多设计稿喜欢用浅灰色的说明文字，看起来精致，实际上常常达不到 4.5:1。网站和 App 的无障碍要求越来越多地写进法规和采购标准，按 WCAG AA 级检查一遍文字颜色，是成本最低的改进之一。
算例
| 白底上的文字色 | 对比度 | 结论 |
|---|---|---|
#767676 | 4.54:1 | 各种字号都达到 AA；普通文字达不到 AAA |
#777777 | 4.47:1 | 普通文字达不到 AA，大号文字可以 |
#595959 | 7:1 | 达到 AAA |
#ff0000（纯红） | 3.99:1 | 只适合大号文字和图标 |
#000000 | 21:1 | 最大值 |
#767676 是白底上仍能通过 AA 的最浅灰色，所以很多设计规范都用它；再浅一档的 #777777 就不合格了。50% 透明的黑色放在白底上，混合成一种中灰，对比度是 3.97:1。
格式转换：#336699 = rgb(51 102 153) = hsl(210 50% 40%)，简写 #369 展开后是同一个颜色。#33669980 等于 rgb(51 102 153 / 0.502)，因为 0x80 是 128，128 ÷ 255 = 0.502。CSS 颜色名 rebeccapurple 就是 #663399。
局限
- 只支持 sRGB。 oklch()、lab()、display-p3 等新的 CSS 色彩空间不会被解析，请先在浏览器开发者工具里换算。
- 对比度不是全部。 WCAG 2 的对比度只是最低要求。字体太细、字号太小，或者某些色盲组合，即使对比度达标也可能难以阅读。正在为下一版指南研究的 APCA 新方法，本工具没有采用。
- 忽略背景的透明度。 对比度只对不透明背景有定义，所以背景色的透明度一律按完全不透明处理。
常见问题
HEX 怎么转 RGB？
把六位数字分成三组，每组按十六进制换算：#336699 分成 33、66、99，也就是 51、102、153。粘贴到工具里即可直接得到。
文字对比度至少要多少？
WCAG AA 级要求普通文字 4.5:1，大号文字和界面元素 3:1；AAA 级要求普通文字 7:1。
4.49:1 四舍五入是 4.5，为什么不合格？
WCAG 规定比较前不得四舍五入，低于 4.5 就是不合格。
白底上最浅能用什么灰色字？
#767676，对比度 4.54:1。#777777 已经略低于 AA 标准。
颜色会上传吗？
不会，所有计算都在你的浏览器里完成。