WCAG 颜色对比度修复器, 输入前景/背景色, 看当前对比度 + 自动给 4 个既保留色相又达到 AA/AAA 的修复方案, 不再瞎猜。
- 本地处理
- 分类 颜色设计
- 适合 把视觉想法转成可复用的颜色值。
| 正常视觉 | 色对 | 比值 | AA |
|---|---|---|---|
| 正常视觉 | Aa | 2.56:1 | 不过 |
| 红色盲 (Protanopia, 约 1%) | Aa | 2.72:1 | 不过 |
| 绿色盲 (Deuteranopia, 约 1%) | Aa | 2.77:1 | 不过 |
| 蓝黄色盲 (Tritanopia, 罕见) | Aa | 2.33:1 | 不过 |
| 全色盲 (Achromatopsia) | Aa | 2.58:1 | 不过 |
这个工具能做什么
不止于"判定不过"的 WCAG 工具。前景背景支持 5 种输入: 十六进制 (#334155)、rgb()、hsl()、oklch()、英文色名 (slategray、steelblue、aliceblue), 实时给出 WCAG 2.1 比值、 WCAG 3 草案 APCA Lc 值、五档判定 (AA 普通 / AA 大字 / AAA 普通 / AAA 大字 / 1.4.11 非文本 UI), 再加一段真实文字预览 (标题 / 正文 / 说明文三种字号), 让你不靠数字, 用眼睛判 "失败到底有多失败"。 失败时不再只给一个建议。每个目标 (AA / AAA) 给 4 套方案: 把文字调暗、把文字调亮、把背景调暗、把背景调亮。每套都只 沿 HSL 明度走, 色相和饱和度全程不动, 你的品牌蓝还是同一种 蓝, 只是更深或更浅, 红还是同一种红, 不会被改成黑白凑数。 每套修复后会再过四种主要色盲滤镜 (红色盲 / 绿色盲 / 蓝黄色盲 / 全色盲), 在滤镜后的颜色上重算 WCAG 比值, "WCAG 数字过了但 色盲看不清"的暗坑会提前暴露, 男性约 8% 受影响。 批量检测可以一次粘十几对色, 一张表同时打 AA / AAA 两档。 前景/背景色对接 URL state, 复制地址栏粘进群里, 同事看到的 就是你看到的那对色 + 那 8 套修复方案 + APCA + 色盲网格。100% 浏览器本地运算, 不上传、不登录、不打点。
工具细节
- 输入
- 文本 + 数值
- 页面会根据工具类型展示文本框、数值控件、文件选择或结构化输入。
- 输出
- 即时结果 + 预览
- 结果区优先给出可操作结果，支持项会显示复制、下载或可视化预览。
- 隐私
- 浏览器本地处理
- 主工具逻辑未发现外部 API 调用，输入通常留在当前标签页内处理。
- 保存 / 分享
- 可分享链接状态
- 关键设置会进入 URL，复制链接后别人能复现同一组参数。
- 性能预算
- 首屏 JS ≤ 24 KB
- 没有声明 WASM 依赖，适合快速打开和移动端使用。
- 适用场景
- 颜色设计 · 设计师
- 分类和职业标签用于推荐相关工具、组织内链，并帮助用户快速判断是否适合当前任务。
怎么用
-
1. 输入
把内容粘贴或拖入工具面板。
-
2. 处理
点击按钮,在浏览器内本地处理,文件不上传。
-
3. 复制 / 下载
一键复制结果或下载到本地。
WCAG 颜色对比度修复器 适合怎么用
适合在真实界面工作中选色、查色、转色值或整理配色。
适合颜色任务
- 把视觉想法转成可复用的颜色值。
- 界面上线前检查对比度和可访问性。
- 让品牌、设计和前端实现的颜色决策对齐。
颜色检查项
- 对比度要按真实背景检查,不要只看色块。
- 有深浅主题时,两套都要单独看。
- 复制设计系统或代码库真正需要的格式。
下一步可以接着做
这些入口会把当前任务接到更完整的工具链里。
真实使用场景
设计评审前一晚审一遍品牌色配对
设计师评审前一晚扔过来 v2 的 token 文件。你把每对前景/背景 色从 `tokens.json` 复制到批量框里 (12 对、每行一对), 表 一秒出来, 哪三对 AA 不过一目了然。每个不过的, 点修复卡片 上的"把背景调暗", 建议色还在原本浅色的色相家族里, 设计师 反推"你把我的暖奶油色搞死了"时, 截一张图证明奶油色还是 奶油色, 只是深了 6%。评审从"还要再要两天"变成"过审, 周 一发"。
用数字说服 PM 一个深色模式色对"看起来怪"
品牌想做 #38bdf8 青色 + #0f172a 深底的 hero 区。WCAG 2.1 算下来 7.4:1, AAA 一路畅通。但 PM 一直说"小字读起来飘"。 把色对粘进来, 看 APCA Lc: 大概 -68, 在"够看"档但正文边缘 通过。再扫色盲网格, 绿色盲那一行还是绿的, 问题不在色盲。 拖"把青色调暗"那个杠杆, APCA |Lc| 推到 ≥ 75 的"出色"档, 新色明显还是品牌青。PM 看的是数字不是感觉, 立刻批了。
修一个不过的 CTA 按钮, 不动品牌红
主 CTA 是 #ef4444 红 + 白底, 检测器说 4.0:1, AA 普通不过 (只勉强过 AA 大字)。销售说"红不许动"。打开修复器, 目标 AA, "把文字调暗"给你一个更深的红 (差不多 #dc2626), 直接 过 4.5:1, 而修复卡上的色相还是稳稳在红色 5-15° 的色相区 内, 没飘到紫、也没飘到粉。点套用、截图、上 patch。品牌红 沉了一档, 客服信箱里"按钮上的字看不清"的工单就没了。
给暗色主题做一遍红绿色盲对照
要上一版暗色主题, 想确认状态色 (成功绿 / 错误红) 不会在 约 8% 的男性绿色盲用户那里塌掉。把绿色 + 底色那一对粘进 来, 扫色盲网格里的"绿色盲"那行: 比值从 5.2:1 掉到 2.9:1, AA 远远不过。只看 WCAG 2 这个版本就发出去了。把成功色换 成修复卡上的"把背景调亮", 新色对在正常视觉和绿色盲模拟下 都过 4.5:1。错误红那对本身没问题, 但绿色这对必须重审。
常见踩坑
以为 WCAG 2 比值 ≥ 4.5 就一定色盲安全。约 8% 男性绿色盲用户那里可能塌到 3:1 以下, 上线前先扫一眼色盲那行再说。
工具给的第一个建议就用。把文字调亮经常顺手把色推到"色盲不安全"那一侧; 把背景调暗通常能在同色相下同时保住 WCAG 和色盲安全。
把 APCA Lc 当合规依据。APCA 用来辅助设计判断很好用, 但官司、合同、审计认的还是 WCAG 2.x 比值。先按 WCAG 2 过, APCA 当第二意见。
隐私说明
你输入的前景色和背景色全程在浏览器 tab 内处理:sRGB 解析、 WCAG 2 亮度计算、APCA Lc、保留色相的修复搜索、色盲矩阵乘法, 都是本页 JS 完成。唯一跟网络相关的是 URL: 前景/背景色会同步 到 `?fg=...&bg=...`, 这样分享出去的链接能在对方屏幕上还原同 一对色, 但 URL 是 `history.replaceState` 本地改的, 不发任何 POST 给我们服务器, 也没有埋点带颜色值上报, 批量框的内容更 不会发到任何地方。DevTools 的 Network 面板可以自己验证: 输 入、改色、粘批量, 我们 origin 的请求数始终是 0。
常见问题
类似工具组合
做你这行的人, 还会一起用这些。