色板可访问性检查器
检查一组颜色中每一对颜色的 WCAG AA 与 AAA 对比度。
输入色板
#0F172A#FFFFFF#0F766E#F97316#7C3AED
两两对比度
| 前景 | 背景 | 对比度 | 普通文字 | 大号文字 |
|---|---|---|---|---|
| #0F172A | #FFFFFF | 17.85:1 | AA | AA |
| #0F172A | #0F766E | 3.26:1 | 不通过 AA | AA |
| #0F172A | #F97316 | 6.37:1 | AA | AA |
| #0F172A | #7C3AED | 3.13:1 | 不通过 AA | AA |
| #FFFFFF | #0F766E | 5.47:1 | AA | AA |
| #FFFFFF | #F97316 | 2.80:1 | 不通过 AA | 不通过 AA |
| #FFFFFF | #7C3AED | 5.70:1 | AA | AA |
| #0F766E | #F97316 | 1.95:1 | 不通过 AA | 不通过 AA |
| #0F766E | #7C3AED | 1.04:1 | 不通过 AA | 不通过 AA |
| #F97316 | #7C3AED | 2.03:1 | 不通过 AA | 不通过 AA |
输入与输出示例
#0F172A
#FFFFFF
#0F766E三种颜色的两两 WCAG 结果如何使用
- 每行输入一个 HEX、RGB 或命名色。
- 查看任意两色的对比度矩阵。
- 根据 AA、AAA 标记调整色板。
能力与限制
- 浏览器本地处理
- 只判断纯色之间的相对亮度。
- 不包含透明度、背景图与元素尺寸等实际界面因素。
常见问题
- 所有颜色对都需要通过吗？
- 只需检查实际承担文字、图标或关键状态信息的前景和背景组合。
相关指南
颜色格式与对比度：从 HEX 到可读的界面配色 ↗相关工具
更新于 2026-10-17 · 项目与反馈说明