前景色
背景色
预览
普通文本——敏捷的棕色狐狸跳过懒狗。
大文本（24px 常规）
大文本（18.67px 粗体）
UI 组件
—
对比度
| 级别 | 普通文本 | 大文本 | UI 组件 |
|---|---|---|---|
| AA | — | — | — |
| AAA | — | — | 不适用 |
WCAG 2.1 — AA 要求普通文本 ≥ 4.5:1，大文本和 UI 组件 ≥ 3:1。
AAA 要求普通文本 ≥ 7:1，大文本 ≥ 4.5:1。
大文本 = 18pt（24px）常规或 14pt 粗体（18.67px）。
什么是对比度检查？
检查颜色对比度是否符合 WCAG AA 和 AAA 无障碍要求。即时验证普通文本、大文本和 UI 组件的前景色与背景色组合。
如何使用对比度检查
- 输入或选择前景文本颜色。
- 输入或选择其背后的背景颜色。
- 立即查看对比度以及 WCAG 通过或不通过结果。
- 调整任一颜色，直到组合满足你的无障碍目标。
了解颜色对比度 ▾
示例
输入
检查白色背景上的中灰色文本：
输出
结果：大文本通过 AA（≥ 3:1），但普通文本未通过 AA（要求 4.5:1）。将灰色稍微调深即可通过所有 AA 级别。
常见使用场景
- 在发布 UI 更新前检查按钮和链接对比度
- 验证品牌系统和样式指南中的文本颜色
- 检查营销图形是否易读
- 快速测试深色配浅色和浅色配深色组合
常见问题
AA 和 AAA 对比度级别有什么区别？
WCAG AA 要求普通文本的对比度为 4.5:1，大文本为 3:1——这是标准法律要求。AAA 要求普通文本为 7:1，大文本为 4.5:1，为重度低视力用户提供更强的无障碍支持。
此检查会检查非文本对比度（图标、边框）吗？
会——WCAG 1.4.11（非文本对比度）要求 UI 组件和图形元素达到 3:1。表格中的 AA UI 组件结果涵盖此要求。
我的颜色通过 AA 但未通过 AAA——我需要修正它们吗？
并非所有内容都要求符合 AAA。在大多数司法管辖区，WCAG AA 是标准法律要求。尽可能以 AAA 为目标，但 AA 已足以满足法律合规。
什么算大文本？
WCAG 将大文本定义为常规字重 18pt（24px）或更大，或粗体 14pt（约 18.67px）或更大。大文本的对比度要求较低（AA 为 3:1），因为它本身更易阅读。