确保所有人都能看清您的文本
白底浅灰字、柔和按钮上的白字，或是深色背景上的蓝色链接，在设计稿中可能看起来很优雅，但对真实用户来说却往往难以阅读。这款色彩对比度检查工具可以测量任意文本与背景色之间的对比度，并即时告诉您它是否符合 Web 内容无障碍指南 (WCAG) 的 AA 和 AAA 级别标准。如果不符合，它还会为您推荐最接近的合规颜色。
功能特点
- 对比度范围从 1:1 到 21:1。
- 针对普通文本、大号文本和 UI 组件的 WCAG 2 AA 和 AAA 测试结果。
- 支持任意颜色格式：HEX、RGB、HSL 或 CSS 颜色名称。
- 包含标题、正文和小号文本的实时预览。
- 保持原有色调的无障碍颜色建议。
- 反转按钮，一键切换并检查深色背景版本。
WCAG 标准一览
| 内容 | AA | AAA |
|---|---|---|
| 普通文本 | 4.5:1 | 7:1 |
| 大号文本（≥ 24 px，或 ≥ 19 px 粗体） | 3:1 | 4.5:1 |
| UI 组件和图形 | 3:1 | — |
| Logo 和装饰性文本 | 无要求 | 无要求 |
常见颜色组合
| 文本 | 背景 | 对比度 | AA 普通文本 |
|---|---|---|---|
| #000000 | #FFFFFF | 21:1 | 通过 |
| #767676 | #FFFFFF | 4.54:1 | 通过（能通过的最浅灰色） |
| #999999 | #FFFFFF | 2.85:1 | 未通过 |
| #FFFFFF | #0EA5E9 | 2.77:1 | 未通过 |
| #FFFFFF | #0369A1 | 5.93:1 | 通过 |