对比度检查工具
检查两种颜色之间的 WCAG 对比度以及是否通过 AA/AAA。
你输入的颜色值在浏览器中本地处理，不会上传到任何服务器。
在处理颜色代码？试试 CSS 颜色转换器。
关于 对比度检查工具
这款对比度检查工具会测量任意两种颜色之间的 WCAG 颜色对比度比率，并立即告诉你它们是否通过 AA 或 AAA 无障碍级别。以十六进制或 rgb/rgba 输入前景（文本）颜色和背景颜色，或用内置的颜色色块选取它们，工具会计算精确的比率，外加针对普通文本和大文本的通过/失败判定。它专为在构建无障碍界面、设计系统或营销页面时需要快速检查颜色对比度比率的开发者、设计师和 QA 工程师打造。实时预览会以你所选的颜色渲染示例文本，让你一眼判断可读性并尽早发现无障碍对比度问题。所有处理都在你的浏览器本地完成，因此你的颜色值在你的设备上处理，不会上传到任何服务器。
功能特性
- 计算两种颜色之间精确的 WCAG 2.x 对比度比率
- 接受十六进制（3 或 6 位）、rgb() 和 rgba() 颜色格式
- 显示普通文本（4.5:1）和大文本（3:1）的 AA 通过/失败
- 显示普通文本（7:1）和大文本（4.5:1）的 AAA 通过/失败
- 为前景和背景提供原生颜色选择器色块
- 以你所选颜色渲染示例文本的实时预览
- 无法解析某个颜色值时给出清晰的校验消息
如何使用 对比度检查工具
- 在前景（文本）字段中输入你的文本颜色，或用颜色色块选取。
- 在背景字段中输入你的背景颜色，或使用其色块。
- 查看判定徽章上方显示的对比度比率。
- 查看普通文本和大文本的 AA 与 AAA 通过/失败徽章。
示例
输入
前景（文本）: #777777
背景: #ffffff
输出
对比度比率: 4.48
AA · 普通文本 (4.5:1): 失败
AA · 大文本 (3:1): 通过
AAA · 普通文本 (7:1): 失败
AAA · 大文本 (4.5:1): 失败
白底上的中灰色对普通正文字号勉强未通过 AA。
常见错误与故障排除
- 粘贴像 “red” 或 “rebeccapurple” 这样的 CSS 颜色名称返回无效颜色错误。 — 请使用十六进制值（例如 #ff0000）或 rgb()/rgba()，而非命名颜色。
- 带 alpha 的 8 位十六进制（#rrggbbaa）被拒为无效颜色。 — 去掉 alpha 通道并提供 6 位十六进制；检查工具仅读取不透明颜色。
- 文本通过 AA 大文本但未通过 AA 普通，你不确定适用哪个。 — 大文本大致指 18pt 以上（或 14pt 以上加粗）；正文必须满足更严格的 4.5:1 普通阈值。
- rgba() 的 alpha 值不会改变对比度比率。 — 比率仅基于 RGB 通道计算，因此请先将透明度叠加到真实背景颜色上再检查。
常见问题
- 什么是对比度检查工具，WCAG 比率为何重要？
- 对比度检查工具比较两种颜色并报告它们之间的 WCAG 对比度比率，该比率可预测文本的可读性。ArrayKit 对比度检查工具会显示精确比率，外加 AA 和 AAA 判定，让你确认文本对低视力用户是否易读。
- 我需要多少对比度比率才能通过 WCAG？
- WCAG AA 要求普通文本至少 4.5:1、大文本至少 3:1，而 AAA 要求普通文本 7:1、大文本 4.5:1。对比度检查工具会一次显示所有四个判定。
- 如何检查我的文本和背景的对比度比率？
- 在前景字段输入你的文本颜色、在背景字段输入你的背景颜色（十六进制、rgb 或 rgba），或使用色块。对比度检查工具会随你输入实时更新比率和 AA/AAA 徽章。
- 什么算作满足 3:1 阈值的大文本？
- 大文本通常约为 18pt 及以上，或加粗时 14pt 及以上。更小的文本被视为普通文本，必须满足更高的 4.5:1 比率。
- 对比度比率会考虑不透明度吗？
- 不会。比率基于实心 RGB 值，因此请先将任何半透明颜色叠加到其实际背景上，再在对比度检查工具中检查。
- 我在对比度检查工具中输入的颜色会被发送到任何地方吗？
- 不会。对比度检查工具完全在你的浏览器中运行，因此你输入的颜色留在你的设备上，不会上传到任何服务器。
相关工具
全部 ArrayKit 工具