logologo
中文
无障碍工具

面向 WCAG 的颜色对比度检查器

快速测试文字与背景颜色的对比度,直接查看 AA 与 AAA 可读性结果,把对比度检查、配色组合和色盲模拟放在同一条工作流里完成。

  • 检查文本、按钮、卡片和界面背景的颜色对比度。
  • 在设计稿上线前获得清晰的通过或失败反馈。
  • 完成对比度测试后,直接继续查看组合色与色盲模拟结果。
对比度检查

即时测试文字和背景颜色

把最核心的结果放在首屏,方便直接判断是否达到无障碍标准。

#
#
对比度
6.18
AA
良好
小文本
大文本
AA: 普通文本的最小对比度为4.5:1,大文本为3:1。大多数网站都需要。
AAA: 普通文本的增强对比度为7:1,大文本为4.5:1。推荐用于最佳可访问性。
这是一个示例文本,用于测试颜色对比度。
这是一个示例文本,用于测试颜色对比度。

无障碍标准

把 AA 与 AAA 的意义放在工具附近,减少跳转查资料的成本。

AA

适用于大多数网站、应用和产品界面的基础对比度标准。

AAA

适合内容密集型产品和强调可访问性的更高可读性目标。

适用场景

可用于按钮、标签、导航、仪表盘、卡片和任何有文字的彩色界面。

推荐可读配色

给出几组实用搭配,测试后可以直接继续设计。

主界面搭配

适合按钮、标签和首页主视觉的高对比度组合。

安静背景搭配

适合卡片、后台面板和阅读型界面,视觉压迫感更低。

高注意力搭配

适合提醒、警示和需要更高识别度的界面状态。

颜色组合延展

从对比度测试自然过渡到配色规划,不需要离开当前页面。

互补色

更强烈的视觉对比,适合强调操作和高关注区域。

分裂互补

在保留反差的同时更柔和,适合次级操作和辅助色。

邻近色

更平滑的过渡,适合图表、仪表盘和连续界面背景。

色盲模拟提示

检查你测试过的颜色在常见色觉条件下的表现。

原始颜色

#2596BE 在标准视图下足够明亮,适合作为主色使用。

绿色盲

蓝色仍然较易识别,但偏绿色的辅助色可能更容易聚成相似视觉层级。

红色盲

暖色警示更容易失去区分度,因此不要只依赖红色本身传达状态。

蓝黄色盲

蓝黄差异会减弱,适合搭配文本与图标双重提示一起验证。

常见问题

WCAG AA 需要多少对比度?

普通文字至少需要 4.5:1,大号文字至少需要 3:1。

AAA 标准要求是多少?

普通文字需要 7:1,大号文字需要 4.5:1。

为什么上线前必须做对比度检查?

它能提前发现按钮、标签、卡片和内容区域的可读性问题,避免发布后再返工修复无障碍缺陷。

相关工具