对比度检查工具：即时 WCAG 比率及 AA/AAA

为任意两种颜色计算 WCAG 对比度比率并显示 AA/AAA 通过或失败的对比度检查工具。

你输入的颜色值在浏览器中本地处理，不会上传到任何服务器。

由 Udit Agarwal 开发和维护

在处理颜色代码？试试 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 通过/失败
• 为前景和背景提供原生颜色选择器色块
• 以你所选颜色渲染示例文本的实时预览
• 无法解析某个颜色值时给出清晰的校验消息

如何使用 对比度检查工具

1. 在前景（文本）字段中输入你的文本颜色，或用颜色色块选取。
2. 在背景字段中输入你的背景颜色，或使用其色块。
3. 查看判定徽章上方显示的对比度比率。
4. 查看普通文本和大文本的 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 值，因此请先将任何半透明颜色叠加到其实际背景上，再在对比度检查工具中检查。

我在对比度检查工具中输入的颜色会被发送到任何地方吗？

不会。对比度检查工具完全在你的浏览器中运行，因此你输入的颜色留在你的设备上，不会上传到任何服务器。

相关工具

• CSS 颜色转换工具 — 在 HEX、RGB 和 HSL 之间转换，并实时显示色样。
• CSS / SCSS 格式化工具 — 美化或压缩 CSS/SCSS/LESS，排序属性并去除重复项。
• SVG 优化工具 — 压缩 SVG：移除注释、元数据和编辑器残留，并合并空白。
• HTML 格式化工具 — 美化或压缩 HTML，格式化内联 CSS/JS 并预览结果。
• 图片优化工具 — 重新编码并缩小图片（JPEG/WebP/PNG），可选调整尺寸。
• Open Graph 生成器 — 生成 Open Graph 和 Twitter 元标签，并预览社交卡片。
• Markdown 预览 — 将 Markdown 渲染为 HTML 并实时预览。

更多代码格式化工具

• Mermaid 图表渲染器 — 在浏览器中将 Mermaid 图表（流程图、时序图、甘特图）渲染为 SVG。
• SVG 优化工具 — 压缩 SVG：移除注释、元数据和编辑器残留，并合并空白。
• MongoDB 查询美化工具 — 在浏览器中美化并缩进 MongoDB 查询和 find() 语句。
• MongoDB 聚合美化工具 — 在浏览器中美化并缩进 MongoDB 聚合管道。
• MongoDB 浏览器 — 浏览 MongoDB 文档或集合样本，并推断其字段架构和类型。
• OpenAPI / Swagger 格式化工具 — 格式化并验证 OpenAPI / Swagger 规范（JSON 或 YAML），并统计路径与操作数量。
• CSS 单位转换器 — 在 px、rem、em、pt 和 % 之间实时转换 CSS 长度单位。
• Glob 转 Regex — 将 glob 模式转换为 JavaScript 正则表达式并测试路径。
• HTML 转 Markdown — 将 HTML 转换为整洁的 Markdown，支持 GFM 表格。
• TOML 格式化 — 格式化 TOML 并在它与 JSON 之间互相转换。
• logfmt 转 JSON — 把 logfmt key=value 日志转为 JSON 并可反向转换。
• dotenv 转 JSON 转换器 — 在浏览器中把 .env 文件转成 JSON 对象并可转回 .env。

查看全部代码格式化工具 (32) · 全部工具