颜色对比度检测器,按 WCAG 2.2 标准实时判定 AA/AAA 是否过(普通文本 / 大文本)。
- 本地处理
- 分类 颜色设计
- 适合 把视觉想法转成可复用的颜色值。
| 组合 | 比值 | 等级 | |
|---|---|---|---|
| Black on White | 21.00:1 | AAA | |
| White on Black | 21.00:1 | AAA | |
| Slate-700 on White | 10.35:1 | AAA | |
| Slate-500 on White | 4.76:1 | AA | |
| Slate-400 on White | 2.56:1 | FAIL | |
| Blue-600 on White | 5.17:1 | AA | |
| Cyan on Slate-900 | 7.35:1 | AAA | |
| Pink on Slate-900 | 5.06:1 | AA | |
| Amber on Slate-900 | 8.31:1 | AAA | |
| Red-500 on White | 3.76:1 | AA-large |
点击任意行即可加载 — 这是真实产品中最常见的 WCAG 不过配色。
| 组合 | 比值 | 为什么不过 | |
|---|---|---|---|
| 灰色说明文在白底 | 2.56:1 | 2.8:1 — AA 普通 (4.5) 和 AA 大字 (3.0) 都不过。灰色说明文是设计系统里最常见的审计不过项。 | |
| 红色报错文在白底 | 3.76:1 | 4.0:1 — AA 普通 (4.5) 不过,仅过大字 (3.0)。图标下方的红色错误提示通常都太浅了。 | |
| 琥珀色按钮文字在白底 | 2.15:1 | 2.6:1 — 全部 WCAG 标准都不过。黄/琥珀色配白对低视力用户几乎不可见。 | |
| 浅蓝色链接在白底 | 2.54:1 | 3.1:1 — 仅过大字。经典"浅蓝链接"的 AA 普通文本差距悬殊。 |
这个工具能做什么
免费 WCAG 2.2 颜色对比度检测器。粘贴或拾取前景与背景 HEX, 立刻看到精确的对比度比值 (1.00 ~ 21.00),以及对所有相关 WCAG 标准的过/不过判定:1.4.3 普通文本 (4.5:1)、1.4.3 大字 (3:1)、1.4.6 AAA 普通 (7:1)、1.4.6 AAA 大字 (4.5:1)、1.4.11 非文本 UI 元素 (3:1);同时给出实时预览:用你选的这对颜色 渲染一段标题 + 正文 + 说明文,亲眼判断可读性,而不只看数字。 如果不过, 工具会沿前景色的明度往背景亮度对面那一极 (黑或白) 逐步走, 找出"色相和饱和度都不变、刚好过 AA 或 AAA"的最接近 颜色 (品牌色不被改飞)。下面内置 10 组常见配色 (黑/白、 Slate-700/白、青/Slate-900...) 的对比度对照表, 一眼扫完整套 设计系统是否经得起 WCAG 审。100% 浏览器本地运算,不上传、 不登录、不打点。
工具细节
- 输入
- 文本 + 数值
- 页面会根据工具类型展示文本框、数值控件、文件选择或结构化输入。
- 输出
- 即时结果 + 复制 + 预览
- 结果区优先给出可操作结果，支持项会显示复制、下载或可视化预览。
- 隐私
- 浏览器本地处理
- 主工具逻辑未发现外部 API 调用，输入通常留在当前标签页内处理。
- 保存 / 分享
- 可分享链接状态
- 关键设置会进入 URL，复制链接后别人能复现同一组参数。
- 性能预算
- 首屏 JS ≤ 18 KB
- 没有声明 WASM 依赖，适合快速打开和移动端使用。
- 适用场景
- 颜色设计 · 设计师
- 分类和职业标签用于推荐相关工具、组织内链，并帮助用户快速判断是否适合当前任务。
怎么用
-
1. 输入
把内容粘贴或拖入工具面板。
-
2. 处理
点击按钮,在浏览器内本地处理,文件不上传。
-
3. 复制 / 下载
一键复制结果或下载到本地。
颜色对比度检测器 适合怎么用
适合在真实界面工作中选色、查色、转色值或整理配色。
适合颜色任务
- 把视觉想法转成可复用的颜色值。
- 界面上线前检查对比度和可访问性。
- 让品牌、设计和前端实现的颜色决策对齐。
颜色检查项
- 对比度要按真实背景检查,不要只看色块。
- 有深浅主题时,两套都要单独看。
- 复制设计系统或代码库真正需要的格式。
下一步可以接着做
这些入口会把当前任务接到更完整的工具链里。
真实使用场景
工程师赶在 Section 508 合同验收前修无障碍审计的不过项
政府客户的审计员标出 14 对文字/背景低于 4.5:1。你把每对粘进来看精确比值,再套用 那个不改品牌色相的改色建议。slate-500 (#64748B) 说明文配白底在这读出 4.76:1,你 当场知道它本就过关,省下一次白改。真正卡住你的是那几对读出 3.9:1 的,改完当天下午 就能交一份干净的报告。
设计师在把 token 交给开发前先验深色模式配色
你做了套深色主题,正文 #E2E8F0 配 #0F172A 面板。两个色丢进来,确认它打到 14.3:1, 远超 AAA 的 7:1。接着测同一面板上的灰阶 #64748B 元信息,读出 4.9:1,你往白色方向 推一步让次要文字也过 7:1。交给开发的是一套每对都已经评过级的 token,而不是让他们 在 QA 阶段才撞见不过的坑。
内容创作者发布前检查缩略图上字幕清不清楚
你的视频缩略图在一张被你压成均值 #1E293B 的杂乱背景上放了 #FACC15 黄字。粘进来读出 9.1:1,手机举远点看也舒服。再把同一种黄放到更亮的 #94A3B8 区域,眼看跌到 1.6:1, 这就解释了为什么有一版标题老是糊掉看不见。你选定深色背景,不用再凭感觉猜。
开发给表单聚焦圈调到满足 1.4.11 非文本对比
表单输入框的 2px 聚焦圈用了品牌青 #14B8A6,衬在白底字段上。你把青配白粘进来,读出 2.4:1,这才发现它没过键盘用户依赖的 3:1 非文本要求。你把圈加深到 #0D9488,复检读出 3.4:1,聚焦指示既保住品牌色又合规,组件其余部分一行不用动。
常见踩坑
因为旁边有大标题,就拿大字的 3:1 去量正文。15px 的说明文照样要 4.5:1 (AA);#94A3B8 配白读出 2.8:1 直接不过,哪怕挨着它的 H1 是过的。
深色模式只信那个 WCAG 数字。#38BDF8 配
忘了聚焦圈和图标边框也算数。2.4:1 的青色聚焦圈过不了 1.4.11 (要 3:1),哪怕你全部文字都过了,键盘用户唯一靠的那个提示也就没了。
隐私说明
所有计算都在你的浏览器里跑。你填的前景和背景 HEX 值全程由客户端 JavaScript 处理,不离开 你的设备,也不发往任何服务器。这对颜色会被编进 URL,方便你分享一条能重新打开同一结果的链接, 也就是说你把链接发给谁,谁就能看到这两个颜色。把 URL 当成可分享的,而不是机密的。工具不上传、 不登录,也不对你的输入做任何打点。
常见问题
类似工具组合
做你这行的人, 还会一起用这些。