🎨

WCAG 颜色对比度检查器

输入前景色与背景色，秒查是否通过 AA/AAA 无障碍标准，不通过自动推荐安全色

✅ AA/AAA 四级判定 🛠️ 自动推荐安全色 👁️ 实时文字预览 🤖 AI 解读与配色建议

🎛️ 颜色输入 HEX + 拾色器联动

前景色（文字颜色）

支持 #rgb 与 #rrggbb（大小写均可）

背景色

支持 #rgb 与 #rrggbb（大小写均可）

📐

计算口径
对比度按 WCAG 2.x 公式计算：sRGB 通道先做线性化（c/255 ≤ 0.03928 走线性段，否则 ((c+0.055)/1.055)^2.4），相对亮度 L = 0.2126R + 0.7152G + 0.0722B，对比度 = (L亮 + 0.05) / (L暗 + 0.05)，范围 1 ~ 21，结果保留两位小数。
判定标准：AA 正文 ≥ 4.5 · AA 大字/UI ≥ 3 · AAA 正文 ≥ 7 · AAA 大字 ≥ 4.5（大字指 18pt/24px 以上或 14pt 粗体）。
推荐安全色：仅当 AA 正文不达标时触发，把不通过的一侧向纯黑/纯白按 5% 步进混合，取首个 ≥ 4.5 的颜色，改动量最小、结果完全确定。
⚠️ 结果仅作设计参考，正式合规审计请结合真实页面环境复核。

📊 检查结果 AA / AAA 四级判定

🎨

输入前景色与背景色后，这里会实时显示对比度与判定结果

对比度（1 ~ 21）

—

实时预览

示例文字 Aa

#1f2937 on #ffffff

AA 正文（≥ 4.5）

AA 大字（≥ 3）

AAA 正文（≥ 7）

AAA 大字（≥ 4.5）

🛠️ 推荐安全色（点击卡片复制，改动量最小且 ≥ 4.5）

✨ AI 助手 AI 会结合对比度结果给出可读性解读与配色建议，仅供参考

点击下方按钮，AI 将解读当前对比度等级，或给出可落地的配色调整方案。

📖 工具介绍

WCAG 颜色对比度检查器是一款面向设计师、前端与产品经理的在线无障碍配色检测工具：输入前景色与背景色，即刻按 WCAG 2.x 官方公式算出对比度，并给出 AA 正文（4.5）、AA 大字（3）、AAA 正文（7）、AAA 大字（4.5）四档判定。

当颜色组合不达标时，工具会自动推荐一对改动量最小的安全色（前景/背景各一），点击即可复制；右侧实时预览块让你直观看到文字实际效果。对比度结果、颜色值都会保存在本地，刷新不丢失。

还支持 AI 解读（说明当前对比度意味着什么、适合什么场景）与 AI 配色建议（结合品牌色给出可落地的调整方案）。

✅ 严格按 WCAG 2.x 公式计算，与 WebAIM 等主流工具结果一致
🛠️ 不达标时确定性推荐安全色：向黑/白 5% 步进混合，首个达标即采纳
👁️ 实时预览文字效果，支持 HEX 输入与拾色器双向联动
📋 推荐色一键复制，直接粘进设计稿或 CSS
🔒 颜色计算全部在浏览器本地完成，不上传服务器

🎮 使用方法

在「前景色」「背景色」输入框填写 HEX 颜色（支持 #abc 与 #aabbcc），或点右侧拾色器直接选色；
结果区实时刷新：大号对比度数值、四档 AA/AAA 徽标、文字预览一目了然；
若 AA 正文未通过，下方会出现两个推荐安全色卡片（改前景 / 改背景两种方案），点击卡片即可复制 hex；
点「🎁 填示例」可一键填入经典的 #777777 on #ffffff 灰字案例（对比度 4.48，仅差 0.02 未过 AA 正文）；
点「🎓 AI 解读」让 AI 解释当前等级含义；点「🧭 AI 配色建议」获取配色调整方案。

💡 小技巧：大字标题（18pt+/14pt 粗体）只需 ≥ 3 即可过 AA，正文小字务必 ≥ 4.5；做高规格产品（政务/医疗/金融）建议直接对齐 AAA。

📝 更新日志

1.02026-10-15工具上线：AA/AAA 四档判定、确定性安全色推荐、实时预览、拾色器联动、AI 解读与配色建议。

❓ 常见问题

对比度 4.48 和 4.5 差别大吗？

数值上只差 0.02，但合规上是「过」与「不过」的分水岭。经典的 #777777 灰字就是 4.48，未达 AA 正文标准——本工具会推荐 #717171（4.88），微调即可达标。

「大字」的判定标准是什么？

WCAG 定义大字为：≥ 18pt（约 24px）常规字重，或 ≥ 14pt（约 18.5px）粗体。大字及 UI 组件（按钮边框、图标、表单控件）AA 只要求 ≥ 3。

推荐安全色是怎么算出来的？

确定性算法，无随机：前景比背景暗就把前景向纯黑按 5% 步进混合（否则向纯白），每一步重算对比度，取第一个 ≥ 4.5 的颜色；背景同理反向调整。100 步内必有解（纯黑/纯白对任何颜色都 ≥ 4.5）。

支持哪些颜色格式？

支持 3 位（#abc）与 6 位（#aabbcc）HEX，大小写均可、可带首尾空格，内部统一归一化为小写 #rrggbb。RGB/HSL 可先在网上转成 HEX 再粘贴。

AI 解读会消耗什么？结果准确吗？

AI 解读会把当前前景色、背景色、对比度与四项判定发送给服务端大模型生成说明，结果仅作科普与配色参考；WCAG 判定本身由本地公式完成，不依赖 AI，保证准确一致。

💬 留言板 0

全部留言需审核通过后展示

💬

还没有留言，来抢沙发吧！