颜色对比检查器

让每个人都可以阅读您的文字

通过实时预览和十六进制或 RGB 输入，根据 WCAG AA 和 AAA 标准检查文本和背景颜色之间的对比度。

低对比度文本是最常见的辅助功能失败之一。该检查器使用官方 WCAG 相对亮度公式计算文本和背景颜色之间的精确对比度，然后告诉您它是否通过 AA（普通文本为 4.5:1，大文本为 3:1）和更严格的 AAA（7:1 和 4.5:1）。实时预览显示您选择的颜色的真实文本。

特征

WCAG AA 和 AAA 通过/失败结果
实时对比度计算
带颜色选择器的十六进制和 RGB 输入
颜色的实时文本预览
正常和大文本阈值
在您的浏览器中本地运行

如何使用颜色对比检查器

1
选择文字颜色
选择或输入前景色。
2
选择背景
选择或输入背景颜色。
3
读取比例
查看对比度和 AA/AAA 结果。
4
调整
调整颜色直到它们通过。

常见用例

验证 UI 文本符合 WCAG 可访问性
检查按钮和链接对比
审核品牌调色板
修复低对比度营销文案

详细指南

随心所欲地输入颜色

使用颜色选择器或直接输入十六进制代码和 rgb() 值，该工具会解析两者。当您调整任一颜色时，比率和通过/失败徽章会立即更新，因此您可以微调颜色直到其符合要求。一切都在本地运行，使其成为设计 UI、主题和营销页面时的快速伴侣。

WCAG 对比度水平的含义

WCAG 2 以从 1:1（无对比度）到 21:1（黑底白字）的比率来测量对比度。 AA 级是通常的法律和行业基线，要求普通文本至少为 4.5:1，大文本至少为 3:1，即 24 像素常规文本或约 18.66 像素粗体及以上。 AAA 级将比例提高到 7:1 和 4.5:1。用户界面部分（例如输入边框、对焦环和带有含义的图标）与周围环境的比例至少需要 3:1。该比率是根据每种颜色的相对亮度计算的，因此，如果两种颜色看起来不同，但它们的亮度相同，则它们仍然会失败，这在红绿搭配中很常见。

修复失败的颜色对

当一对失败时，改变亮度而不是色调：逐步调暗文本或调亮背景，直到比例通过，并且颜色仍然感觉像您的品牌。中间色调的品牌颜色（例如中橙色或青色）通常不能在 AA 上带有白色文字。在这种情况下，请对大标题、边框或背景使用品牌颜色，并将正文设置为较深的阴影。还要测试占位符文本和禁用状态，因为它们通常太微弱。请记住，该比率不考虑图像上的细字体或文本，因此在这些情况下请留出额外的边距。

常见问题

我需要多少对比度才能通过 WCAG？

对于 AA，普通文本需要 4.5:1，大文本需要 3:1。对于更严格的 AAA，普通文本需要 7:1，大文本需要 4.5:1。大文本大约为 18 磅，或 14 磅粗体。

对比度是如何计算的？

它对两种颜色使用 WCAG 相对亮度公式，然后将较亮的亮度（加上 0.05）除以较暗的亮度（加上 0.05），得出 1:1 到 21:1 之间的值。

我可以输入 RGB 和十六进制吗？

是：输入十六进制代码，如 #1e293b 或 rgb(30, 41, 59)，或使用颜色选择器。两种格式都会立即解析。

免费吗？

是的，完全免费，无需注册，完全在浏览器中运行。

如何检查两种颜色是否可以一起访问？

输入文本和背景十六进制值；检查器计算对比度并显示其是否通过正常文本和大文本的 WCAG AA 和 AAA。

为什么颜色对比对于可访问性很重要？

低对比度使得视力低下或色盲的人难以阅读文本。满足 WCAG 比率可以使内容对每个人都清晰易读，并且是常见的可访问性和 SEO 要求。

让每个人都可以阅读您的文字

特征

如何使用颜色对比检查器

选择文字颜色

选择背景

读取比例

调整

常见用例