Contrast Checker：WCAG颜色对比度工具

什么是 Contrast Checker？

Contrast Checker 计算前景色与背景色之间基于亮度的对比度比率，以确定该颜色组合是否符合 WCAG 2.1 无障碍标准。它针对所有四个合规阈值进行测试：普通文本的 AA 和 AAA，以及大文本的 AA 和 AAA。该工具显示实时文本预览，让您确切地看到读者将会看到的内容。无障碍审核员、UI 设计师和前端开发人员在发布任何新颜色组合之前使用它，以避免生产环境中的对比度失败。所有处理均在浏览器中运行——无服务器调用，无需登录。

主要功能

• WCAG 2.1 对比度比率计算 — 使用标准相对亮度公式（采用 0.03928 线性化阈值和 (L1 + 0.05) / (L2 + 0.05) 比率公式），产生与官方 WCAG 工具一致的结果。
• AA 和 AAA 合规性检查 — 四个合规徽章实时更新：普通 AA（≥ 4.5:1）、普通 AAA（≥ 7:1）、大文本 AA（≥ 3:1）和大文本 AAA（≥ 4.5:1）。带对勾的绿色徽章表示通过；带 X 的红色徽章表示未通过。
• 普通文本和大文本阈值 — 该工具按照 WCAG 2.1 成功准则 1.4.3，分别对普通文本和大文本（定义为 18pt 或 14pt 粗体）应用不同的阈值。
• 带示例文本的实时预览 — 预览卡片使用您选择的颜色渲染标题、正文段落、小文本和按钮，让您一目了然地评估可读性。
• 将对比度比率复制到剪贴板 — 点击比率显示旁边的复制图标，将比率字符串（如 4.53:1）写入剪贴板，并将检查记录到历史记录中。
• 加载后可离线使用 — 所有比率计算均在 JavaScript 中实现，无需外部 API 调用。

如何使用 Contrast Checker

第一步：设置前景色

导航至 Contrast Checker。该工具以黑色（#000000）作为前景色、白色（#FFFFFF）作为背景色打开——21:1 的比率通过所有四个 WCAG 级别。

通过以下任一方式设置前景色（文本颜色）：

• 点击颜色色块（彩色方块）打开浏览器原生颜色选择器
• 在色块旁的文本输入框中直接输入十六进制代码（如 #1E293B）

色块和文本输入框保持同步。输入框下方的预览色块显示颜色及自动对比的标签文本。

第二步：设置背景色

使用颜色输入卡片右侧的相同控件设置背景色。该工具采用三列布局：左侧为前景色，中间为交换按钮，右侧为背景色。

第三步：读取对比度比率和合规徽章

对比度比率卡片显示在输入框下方，包含：

• 以大号像素艺术字体显示的计算比率（如 7.23:1）
• 用于复制比率字符串的复制图标
• 四个合规徽章：普通 AA（≥ 4.5:1）、普通 AAA（≥ 7:1）、大文本 AA（≥ 3:1）、大文本 AAA（≥ 4.5:1）

带对勾图标的绿色徽章表示该组合通过该级别。带 X 的红色徽章表示未通过。所有正文文本至少应达到普通 AA 级别。

第四步：检查实时预览

滚动到预览卡片。它使用您选择的颜色渲染四个元素：

• 大标题（text-2xl）
• 正文文本（text-base）
• 小文本（text-sm）
• 颜色互换的按钮（前景色变为背景色，反之亦然）

此预览让您在编写任何代码之前就能判断颜色的可读性。

第五步：交换颜色或尝试无障碍调色板建议

点击两个颜色输入框之间的交换按钮（双箭头图标），即可立即翻转前景色和背景色。这对于测试浅色背景深色文字和深色背景浅色文字两种变体非常有用。

滚动到页面底部的无障碍颜色组合面板。它显示 20 种带有对比度比率的颜色组合。点击任意组合将这两种颜色加载到工具中。大多数组合通过 AA（4.5:1），以对勾标示。少数组合仅通过大文本 AA（3:1）并标有 X——这些适用于标题和大型 UI 元素，但不适用于普通正文文本。

实际示例

检查按钮标签与背景的对比度

您的设计在蓝色 #3B82F6 按钮上使用白色 #FFFFFF 文字。将 #FFFFFF 作为前景色，#3B82F6 作为背景色输入。工具计算出约 3.7:1。普通 AA 徽章未通过（需要 4.5:1），但大文本 AA 通过。需要加深蓝色——尝试 #1D4ED8，可产生约 6.7:1，通过普通 AA。

验证深色模式文本颜色

您的深色模式设计在 #0F172A（slate-900）背景上使用 #94A3B8（slate-400）文本。输入这些值，比率约为 6.96:1，通过普通 AA、大文本 AA 和大文本 AAA。勉强未达到普通 AAA（需要 7:1）。您可以放心地在 AA 级别将此组合用于正文文本。

将品牌颜色作为文本颜色测试

您的品牌橙色是 #F97316。您想在白色 #FFFFFF 背景上将其用作链接颜色。比率约为 2.8:1——普通 AA 未通过。预览确认文本对某些用户来说看起来可读，但无障碍审核会失败。切换到较深的色调，如 #C2410C（≈ 5.2:1），即可通过 AA。

技巧和最佳实践

同时测试前景色覆盖背景色和背景色覆盖前景色两种情况。 交换按钮让您一键反转角色。某些 UI 模式（按钮、高亮选择）将前景色用作小面积背景。

无障碍颜色组合面板以一位小数显示比率。 这些实际计算的比率显示在每张预设色块卡片上。点击任意色块加载两种颜色——需要快速获得可用调色板时，以此为起点。

大文本阈值适用于 18pt（24px）或 14pt 粗体（约 18.67px 粗体）。 该工具显示大文本 AA 和大文本 AAA 结果，提醒您标题具有更宽松的阈值。未通过普通 AA 的组合仍可能适用于专门的大标题。

通过 URL 分享结果。 当前的前景色和背景色已编码在页面 URL 中。输入颜色后复制地址栏 URL，即可将特定对比度检查发送给同事或包含在设计审查文档中。

将常用颜色组合保存为预设。 支持者账户可以将前景色和背景色的十六进制值保存为命名预设。这对于反复检查相同品牌颜色组合的团队很有用。

常见问题和故障排除

无论输入什么，比率都显示 1:1。 这通常意味着两个颜色字段具有相同的值。检查您是否在前景色和背景色中输入了不同的颜色。如果您将相同的十六进制代码粘贴到两个字段中，需要更改其中一个。

合规徽章显示未通过，但我认为我的颜色没问题。 WCAG 公式比视觉上看起来更严格。黑色背景深灰色文字的组合，如 #555555 背景上的 #333333 文本，只产生约 1.7:1，远低于 AA。请使用工具的结果，而不是依赖视觉判断。

历史记录恢复不会重新加载我的颜色。 历史记录恢复功能解析 FG: #XXXXXX / BG: #XXXXXX 格式的条目。在此工具之外记录的条目（或具有损坏数据的条目）可能无法正确解析。在这些情况下，请手动重新输入颜色。

复制比率按钮没有反应。 剪贴板 API 需要 HTTPS 或 localhost。在普通 HTTP 上，剪贴板写入失败。此时工具会显示错误提示。右键点击比率显示文本，使用浏览器的原生复制选项作为备用方案。

预览卡片显示意外的文本颜色。 预览在背景色上以前景色渲染标题和正文文本。预览中的按钮故意交换两种颜色，以展示反向组合。

隐私和安全

Contrast Checker 在您的浏览器中本地执行所有计算。相对亮度公式和对比度比率计算在您设备上的 JavaScript 中运行。没有任何颜色值被发送到任何服务器。该工具不需要账户，不设置跟踪 Cookie，也不记录您测试了哪些颜色组合。页面加载后可完全离线工作，因此可以安全地用于评估机密设计系统或未发布品牌指南中的颜色。

常见问题解答

Contrast Checker 免费吗？

是的。完整的 WCAG 对比度检查功能——包括四个合规徽章、实时预览、交换按钮和无障碍调色板面板——完全免费，无需账户。预设、历史记录跟踪和工具备注等支持者功能可通过 Ko-fi 支持者订阅获得。

Contrast Checker 可以离线使用吗？

是的。页面加载后，所有对比度计算、预览渲染和合规徽章更新均可在没有网络访问的情况下工作。相对亮度公式和 WCAG 阈值比较是在您的浏览器中运行的纯 JavaScript。

使用 Contrast Checker 时我的数据安全吗？

是的。没有任何颜色数据传输到任何服务器。该工具在对比度检查期间不发出任何网络请求。您的前景色和背景色仅存在于浏览器内存中，如果您使用分享功能，则编码在您选择复制的 URL 中。

此工具遵循哪个 WCAG 版本？

该工具实现了 WCAG 2.1 成功准则 1.4.3（对比度——最低）和 1.4.6（对比度——增强）。AA 级别要求普通文本的比率至少为 4.5:1，大文本为 3:1。AAA 级别要求普通文本为 7:1，大文本为 4.5:1。这些阈值与合规徽章中显示的值一致（普通 AA ≥ 4.5:1，普通 AAA ≥ 7:1，大文本 AA ≥ 3:1，大文本 AAA ≥ 4.5:1）。

WCAG 中"大文本"是什么？

WCAG 将大文本定义为正常字重下至少 18 点（约 24px）的文本，或粗体字重下至少 14 点（约 18.67px）的文本。该工具将第三和第四个合规徽章标记为"大文本 AA"和"大文本 AAA"。预览以 text-2xl 渲染标题，通常属于大文本范围。

对比度比率是如何计算的？

该工具使用 WCAG 公式将每个十六进制颜色转换为相对亮度：每个 RGB 通道进行线性化（除以 255，然后应用 sRGB 伽马校正：如果 s <= 0.03928，则为 s / 12.92，否则为 ((s + 0.055) / 1.055) ^ 2.4）。亮度为 0.2126 R + 0.7152 G + 0.0722 * B。对比度比率为 (L_较亮 + 0.05) / (L_较暗 + 0.05)。

我可以测试十六进制代码以外的颜色吗？

颜色输入框接受以文本形式输入的十六进制代码（带或不带 #）。您也可以使用原生颜色选择器色块。如果您有 RGB 或 HSL 值，请使用 Color Picker 先将其转换为十六进制，然后在此处粘贴。

最高可能的对比度比率是多少？

最大对比度比率为 21:1，即纯黑色（#000000）和纯白色（#FFFFFF）之间的比率。该工具默认以这两种颜色打开，以展示可达到的最大比率。

我可以将其用于文本以外的 UI 元素吗？

WCAG 2.1 在成功准则 1.4.11 中也涵盖了非文本对比度，要求 UI 组件和图形对象的比率为 3:1。该工具的大文本 AA 徽章（≥ 3:1）对应此阈值，可用于评估图标颜色、焦点指示器和表单控件边框，即使预览渲染的是文本。

如何与团队分享对比度检查结果？

输入前景色和背景色后，页面 URL 会编码这两个值。复制地址栏 URL 并直接分享。打开链接的接收者会看到相同颜色已预加载，并显示"从分享链接加载"通知。您也可以使用页面底部的分享按钮发布到 Twitter、LinkedIn 或 Reddit。

相关工具

• Color Picker — 在此处测试之前，从您的屏幕或现有设计中提取精确的十六进制值。
• Color Converter — 在对比度检查器中输入之前，将颜色从 RGB、HSL 或 CMYK 转换为十六进制。
• 即将推出: Palette Generator — 生成完整调色板，然后在 Contrast Checker 中检查每个组合，确保无障碍合规性。

立即试用 Contrast Checker：Glyph Widgets Contrast Checker