← 返回工具箱

工具

颜色对比度检查器

输入文字色和背景色，检查 WCAG AA / AAA 对比度，快速判断按钮、正文、标签和深色界面是否易读。

常用组合

对比度结果

18.88:1

通过

普通文字 AA

要求 4.5:1

通过

大号文字 AA

要求 3:1

通过

普通文字 AAA

要求 7:1

Preview

海豹工具箱

这是一段正文预览，用来检查普通字号的可读性。颜色对比不足时，按钮、链接、正文和提示信息都会变得吃力。

文字按钮大标题文本

建议 AA 文字色

推荐颜色

#111111

18.88:1 · 目标 4.5:1
rgb(17, 17, 17)

建议 AAA 文字色

推荐颜色

#111111

18.88:1 · 目标 7:1
rgb(17, 17, 17)

CSS

.text-on-surface {
  color: #111111;
  background-color: #ffffff;
}

/* WCAG contrast: 18.88:1 */

USE & REVIEW

颜色对比度检查器常见问题

查看全部工具指南 →

「颜色对比度检查器」主要解决什么问题？

检查文字色和背景色的 WCAG AA / AAA 对比度，预览可读性并生成通过建议。 适合先完成计算、转换或检查，再根据实际使用场景复核输出。

使用「颜色对比度检查器」前，输入内容要怎样准备？

先确定目标容器尺寸、品牌色、字体和交互状态。只看单一桌面尺寸容易遗漏移动端、键盘操作、对比度和长文本问题。

使用「颜色对比度检查器」时，数据会被保存或上传吗？

颜色对比度检查器不会把输入内容自动发布成公开页面。标明“本地处理”的步骤只在浏览器内运行；涉及实时数据、IP、外部网址或在线查询时可能需要联网，因此不要输入与任务无关的敏感资料。

「颜色对比度检查器」的结果应该怎样核对？

在目标屏幕尺寸和浏览器中预览，并检查对比度、可读性和响应式变化。复制出的样式适合作为起点，仍要结合现有设计系统调整。

什么情况下不应该只依赖「颜色对比度检查器」？

它适合快速试验和生成基础样式，不会自动符合你的完整设计系统、品牌规范或所有无障碍要求。