颜色对比度检查器
输入前景色和背景色以通过 AA 和 AAA 通过/失败徽章检查常规和大字号文本的 WCAG 对比度。
21.00:1
AA
正常字体
AA
大字体
AAA
正常字体
AAA
大字体
APCA Lc（WCAG 3）
—
前景亮度
—
背景亮度
—
预览
天地玄黄，宇宙洪荒。日月盈昃，辰宿列张。
天地玄黄，宇宙洪荒。日月盈昃，辰宿列张。
使用方法
颜色对比度检查器根据 WCAG 2.1 准则测量文本颜色和背景颜色之间的亮度对比度——这是全球组织使用的无障碍标准。
以 HEX、RGB 或 HSL 格式输入文本和背景颜色。工具立即计算每种颜色的相对亮度及其对比度。
结果根据 WCAG 级别测试：AA 要求普通文本 4.5:1 以上，大文本 3:1 以上；AAA 要求 7:1 和 4.5:1 以上。视觉预览显示文本在该背景上的实际外观。
低对比度使视力障碍用户难以阅读内容，尤其是色盲用户。
实战示例
检查白底上的灰色文字 #767676：对比度恰好 4.54:1 —— 普通文本通过 WCAG AA（要求 4.5:1），但过不了 AAA（7:1）；结果卡片把每个阈值分开展示，包括大号文字的宽松规则。对数刻度条显示这对颜色在 1:1 到纯黑白 21:1 之间的位置。APCA 卡片预览 WCAG 3 的新指标，交换按钮立刻回答”前景背景对调会不会更好”。实时预览渲染真实文字，让你亲眼判断。
使用场景
- 在发布网站重新设计之前检查品牌调色板是否符合无障碍性
- 选择在深色或浅色主题下仍然可读的按钮和链接颜色
- 满足 Section 508、EN 301 549 或 ADA 合规性的 WCAG 2.1 AA 或 AAA 要求
- 在开发开始前审查设计师发送的原型以标记不可读文本
- 通过展示小的亮度差异如何导致大的对比度失败来教授无障碍性概念
常见问题
- 什么是 WCAG？
- Web 内容无障碍指南——由 W3C 发布的无障碍标准，越来越多地被法律要求。
- 应该达到什么最低对比度？
- 大多数网站最低达到 AA（普通文本 4.5:1）；关键内容达到 AAA。
- 大文本有不同的要求吗？
- 有——18pt 或 14pt 粗体以上文本只需 3:1（AA）或 4.5:1（AAA）。
- 检查器是否考虑色盲？
- 亮度分数基于感知数学，自然涵盖了最常见的色盲类型。
- 可以直接粘贴 HEX 代码吗？
- 可以，粘贴 #RRGGBB 或仅 RRGGBB——工具两种格式都接受。