颜色对比度检测。

输入文字颜色和背景颜色，马上看到它们的对比度，以及是否达到 WCAG 2.2 的 AA 和 AAA 标准。全程在浏览器里运行，你输入的内容不会上传。

怎么检测颜色对比度

1. 输入文字颜色：填 HEX 色值，比如 #1F2A22 或 #333，也可以点色块直接选。
2. 用同样的方法输入背景颜色。 两个输入框中间的交换按钮可以把两种颜色对调。
3. 查看结果。 对比度随输入实时更新，示例区会用你的颜色显示 24px 和 15px 的文字，每一项 WCAG 标准都会标出通过或未通过。

输入框支持三位或六位 HEX 色值，带不带 # 都行。半透明的颜色，要先换算成它叠在背景上之后的实色再输入。对比度是向下取整显示的，所以显示 4.50:1 的组合是真的达标。

WCAG 2.2 对比度标准

文字的要求来自成功标准 1.4.3（AA）和 1.4.6（AAA）。图标、输入框边框、焦点指示和控件的其他组成部分属于 1.4.11，只有 AA 一级。Logo 和禁用状态控件上的文字不受限制。对比度从 1:1（没有对比）到 21:1（白底黑字），按 WCAG 2 的相对亮度公式计算。

用 Codex 做一套无障碍的设计系统

挑颜色的时候，一组一组检查就够了。要让整个产品都看得清，就得检查设计系统依赖的那几组颜色，再把规则写进 Codex 遵循的文件里：

1. 检查核心组合：页面背景上的文字、卡片上的文字、主色按钮上的文字，还有次要文字用的浅灰色，最容易不达标的就是它。
2. 把规则写进 DESIGN.md。 DESIGN.md 生成器会在 on-primary 配 primary、on-surface 配 surface 或 neutral 低于 4.5:1 时提醒你，并在文件里写上「要保证文字对比度达到 WCAG AA（4.5:1）或更高」。
3. 用 lint 检查文件。 npx @google/design.md lint DESIGN.md 也会检查对比度，详见 DESIGN.md 指南。
4. 让 Codex 检查做好的界面，新的颜色组合往往出现在这里：图片上的文字、徽标和占位文字。

按 WCAG 2.2 AA 检查 [screen.html] 里每一组文字和背景颜色：正文至少 4.5:1，24px 及以上（或粗体 18.66px 及以上）的文字至少 3:1，图标、输入框边框和焦点框至少 3:1。列出每一组不达标的颜色和它的对比度，并在保持色相的前提下，给出最接近、又能达标的颜色。只用 DESIGN.md 里的颜色；如果需要改某个 token，告诉我是哪个。

常见问题

对比度多少才算合格？

正文至少 4.5:1，大号文字、图标和控件的组成部分至少 3:1，这就是 WCAG AA，也是大多数无障碍规范要求的级别。正文达到 7:1 或更高就满足 AAA，21:1 是最高值。

多大的字算大号文字？

24px（18pt）及以上，或者粗体 18.66px（14pt）及以上。

支持 APCA 吗？

不支持。这里用的是 WCAG 2 的对比度公式，也就是衡量是否符合 WCAG 2.2 时用的公式。APCA 是为未来的 WCAG 3 讨论过的另一种算法，不属于 WCAG 2.2。

免费吗？

免费，不用注册，你输入的颜色只留在浏览器里。

继续阅读

• 从图片提取配色把任意图片的主色提取成 HEX 色值，直接复制。
• DESIGN.md 生成器把颜色、字体和间距变成给 Codex 用的 DESIGN.md。
• DESIGN.md 是什么，怎么用DESIGN.md 格式、一个完整示例，以及怎样让 Codex 遵循它。
• Codex 前端设计 skill 推荐让 Codex 有审美的 skill，以及怎么为你自己的设计系统写一个。