色彩对比度检测器
检查文本色与背景色之间的 WCAG 对比度——查看普通文本、大号文本及 UI 组件的 AA/AAA 合规等级，附实时预览与无障碍颜色建议。
文本颜色
色调
背景颜色
色调
对比度
--:1
普通文本
18px 以下正文（或 14px 以下粗体）
AA
AAA
大号文本
18px 以上普通字体，或 14px 以上粗体
AA
AAA
UI 组件
图标、边框、表单控件及图形元素
AA
AAA
实时预览
敏捷的棕色狐狸
对比度充足时，大号文本阅读起来更舒适。
这是一段普通正文示例。良好的色彩对比度让所有人都能轻松阅读你的内容，包括低视力或色盲用户。 示例链接.
小号文字和图注是最难阅读的——它们需要最高的对比度。
示例按钮
示例按钮
建议
该组合已满足普通文本的 WCAG AA 标准，做得好！
最接近且通过 AA（4.5:1）的无障碍文本颜色：
:1
此文本颜色的任何变体均无法在该背景下达到 AA 标准——请尝试更换背景颜色。
所有计算均使用 WCAG 2.x 相对亮度公式在浏览器中实时完成——无需上传，无需注册，完全免费。
关于 色彩对比度检测器
颜色对比度检查器可测量文字颜色与背景颜色之间的 WCAG 对比度,并根据 AA 和 AAA 无障碍等级对普通文字、大号文字和界面组件进行评级。调整任一颜色时,对比度数值和每项通过/未通过结论都会实时更新。
真实预览面板会用你选定的配色渲染标题、正文、小字说明、按钮和链接,让你可以基于真实内容而非抽象色块来判断可读性。当某个配色组合未通过时,工具会建议最接近的、能达到 4.5:1 的 AA 达标文字颜色,一键即可应用。
计算遵循 WCAG 2.x 的相对亮度公式,完全在浏览器中运行——不会上传任何内容,检测也是免费的。你还可以复制一份简明的文字报告,列出对比度和评级结果,粘贴到无障碍审查或 Pull Request 中。
如何使用 色彩对比度检测器
- 用取色器或直接输入数值设定你的文字颜色和背景颜色。
- 查看对比度数值,以及普通文字、大号文字和界面组件的 AA/AAA 评级结果。
- 查看实时预览,观察你所选颜色下真实的标题、段落、按钮和链接效果。
- 如果未通过,可应用建议的无障碍达标文字颜色,或互换两种颜色。
- 点击"复制报告"以分享对比度和达标结果。
常见问题
WCAG AA 要求普通文字达到 4.5:1,大号文字及图标、表单边框等界面组件达到 3:1。更严格的 AAA 等级要求普通文字达到 7:1,大号文字达到 4.5:1。
常规字重下 18px 及以上,或加粗字重下 14px 及以上的文字。由于较大的字形更容易辨认,WCAG 允许它们在 AA 等级下采用更低的 3:1 对比度要求。
是的。每次检测都使用 WCAG 相对亮度公式在浏览器中即时完成,无需注册、没有使用次数限制,也不收取任何费用。
使用内置建议功能:工具会找到你文字颜色中最接近的、能在当前背景下通过 AA 标准的变体,并让你直接应用。如果文字颜色的任何变体都无法通过,则应转而调整背景色。
它涵盖了颜色对比这一最常见的无障碍问题之一,但并非全部。你仍应检查焦点状态、信息是否不依赖颜色单独传达、字体大小,以及配色在色盲模拟下的表现。
不会。两种颜色、对比度数值和建议都在你的浏览器本地计算完成——你使用工具时页面不会发出任何服务器请求。
热门搜索
颜色对比度检查
wcag 对比度
无障碍对比度检查
文字对比度检查
aa aaa 对比度测试
在线检查颜色对比度
需要帮助？
使用此工具时遇到问题？请告诉我们的团队。