对比度检查器 — WCAG AA/AAA 合规判定
选定前景色和背景色, 即时计算 WCAG 对比度比率, 显示 4 种合规判定(AA/AAA × 普通/大文字), 同时提供文字渲染预览。
工作原理
对比度比率的计算原理
WCAG (Web Content Accessibility Guidelines) 把对比度定义为两色相对亮度的比率。公式: 把 sRGB 的 R/G/B 通道线性化, 按视觉敏感度加权(R 0.2126、G 0.7152、B 0.0722), 再用 (亮+0.05)/(暗+0.05) 计算。结果范围 1:1 (相同色)到 21:1 (黑底白字)。
本工具使用官方 WCAG 2.x 公式, 在浏览器内计算。4 个徽章分别对照 AA(普通 4.5:1, 大 3:1) 与 AAA(普通 7:1, 大 4.5:1)。「大文字」指 24px(18pt) 或 18.66px(14pt) 粗体。
为何至少要满足 AA
AA 在多个司法辖区是法律要求(美国 ADA、欧盟 EN 301 549、英国 Equality Act 数字服务)。正文文字未达 AA 是最常见的可访问性问题, 设计阶段修复成本最低。
AAA 推荐用于长文阅读、政府服务、高风险界面。基准较严格 — 设计师常见的「白底浅灰」很容易跌出 AAA。短停留站点目标 AA, 出版/重要信息站点目标 AAA。
常见错误
「我的屏幕看着没问题」: 校准过的显示器、办公室荧光灯、户外手机使用都会改变知觉对比度。用比率而非肉眼判断。
通过反转 HEX 实现暗模式: 反转改变色相并破坏对比度。切换主题后, 每对颜色都要重新测试。
盲目相信品牌指南: 许多品牌色板早于 WCAG 意识。如果品牌粉白底跌出 AA, 提议略深的粉用于正文, 原色保留装饰用途。
常见问题
›AA 与 AAA 的区别?
AA 普通 4.5:1、大 3:1。AAA 紧到 7:1、4.5:1。AAA 推荐但不一定可达成。
›「大文字」的定义?
WCAG 定义为 18pt(24px) 或更大, 或 14pt(18.66px) 粗体。
›支持透明度吗?
暂不支持。请使用合成后用户实际看到的颜色。透明度支持后续考虑。
›我的品牌色不通过怎么办?
许多品牌色板基于美感而非可访问性。常见修复: 文字使用更深的派生色, 浅色保留作为背景或装饰。
›WCAG 比率与「知觉对比度」一致吗?
不完全一致 — WCAG 2.x 使用基于亮度的简化公式。WCAG 3 (开发中) 使用 APCA 更贴近知觉但尚未标准化。
›图标和 UI 控件的最低值?
WCAG 2.1 增加了非文字对比度 3:1 最低标准 (图标、表单控件、焦点指示)。在本工具中保持 ≥ 3:1。
›图表上能用吗?
相邻颜色对承担含义时适用相同标准。数据可视化中相邻色 ≥ 3:1 是 WCAG 1.4.11 最低要求。
›数据会上传吗?
不会。计算在本地浏览器内进行。
相关工具
最后更新: