适用于大多数网站、应用和产品界面的基础对比度标准。
无障碍工具
面向 WCAG 的颜色对比度检查器
快速测试文字与背景颜色的对比度,直接查看 AA 与 AAA 可读性结果,把对比度检查、配色组合和色盲模拟放在同一条工作流里完成。
- 检查文本、按钮、卡片和界面背景的颜色对比度。
- 在设计稿上线前获得清晰的通过或失败反馈。
- 完成对比度测试后,直接继续查看组合色与色盲模拟结果。
对比度检查
即时测试文字和背景颜色
把最核心的结果放在首屏,方便直接判断是否达到无障碍标准。
#
#
对比度
6.18
AA
★★★★★
小文本
✓★★★★★
大文本
✓★★★★★
AA: 普通文本的最小对比度为4.5:1,大文本为3:1。大多数网站都需要。
AAA: 普通文本的增强对比度为7:1,大文本为4.5:1。推荐用于最佳可访问性。
这是一个示例文本,用于测试颜色对比度。
这是一个示例文本,用于测试颜色对比度。
无障碍标准
把 AA 与 AAA 的意义放在工具附近,减少跳转查资料的成本。
适合内容密集型产品和强调可访问性的更高可读性目标。
可用于按钮、标签、导航、仪表盘、卡片和任何有文字的彩色界面。
推荐可读配色
给出几组实用搭配,测试后可以直接继续设计。
适合按钮、标签和首页主视觉的高对比度组合。
适合卡片、后台面板和阅读型界面,视觉压迫感更低。
适合提醒、警示和需要更高识别度的界面状态。
颜色组合延展
从对比度测试自然过渡到配色规划,不需要离开当前页面。
更强烈的视觉对比,适合强调操作和高关注区域。
在保留反差的同时更柔和,适合次级操作和辅助色。
更平滑的过渡,适合图表、仪表盘和连续界面背景。
色盲模拟提示
检查你测试过的颜色在常见色觉条件下的表现。
#2596BE 在标准视图下足够明亮,适合作为主色使用。
蓝色仍然较易识别,但偏绿色的辅助色可能更容易聚成相似视觉层级。
暖色警示更容易失去区分度,因此不要只依赖红色本身传达状态。
蓝黄差异会减弱,适合搭配文本与图标双重提示一起验证。
常见问题
普通文字至少需要 4.5:1,大号文字至少需要 3:1。
普通文字需要 7:1,大号文字需要 4.5:1。
它能提前发现按钮、标签、卡片和内容区域的可读性问题,避免发布后再返工修复无障碍缺陷。
