对比度检查器 — 免费的 WCAG 可访问性对比度比例工具

颜色是设计中最强大的工具之一，但它也可能成为最具有排他性的因素。如果用户无法阅读文本，再美丽的配色方案也毫无意义。差的对比度是网络上最常见的可访问性失败问题，影响了超过 3 亿有色觉障碍的人，以及无数在强光下使用移动设备或屏幕亮度褪色的用户。我们的免费 对比度检查器 可立即计算任意两种颜色之间的对比度比例，并准确地告诉您它们在 WCAG AA 和 AAA 标准中的位置 —— 让您在不猜测的情况下进行包容性设计。

什么是颜色对比度，为什么它很重要？

颜色对比度是两种颜色在感知亮度上的差异。当文本位于背景上时，它们之间的对比度决定了文本是否可读。如果颜色在亮度上过于相似，它们会融合在一起，对视力低下、色盲或在强光下眯眼看屏幕的用户来说变得不可见。

Web 内容可访问性指南（WCAG）使用相对亮度（一种衡量颜色在人眼看来亮度的指标）来数学定义对比度。该公式考虑了人眼对绿色光比红色或蓝色更敏感的事实。即使在 RGB 中亮度数值相同，亮绿色可能看起来比亮红色更亮。WCAG 公式修正了这一点，产生准确反映人类感知的对比度比例。

比例范围从 1:1（完全相同的颜色，无对比度）到 21:1（纯黑在纯白上，最大对比度）。大多数可访问的设计都处于中间范围。在 WCAG AA 标准下，正常文本的最小比例是 4.5:1。7:1 是更严格的 AAA 标准。这些数字并非随意设定 —— 它们基于对各种视觉障碍人士实际能区分内容的广泛研究。

除了可访问性，对比度影响每个人。高对比度设计在小屏幕上、强光环境中以及 40 岁以上用户（其眼睛自然失去对比度敏感度）中更容易阅读。低对比度文本可能在设计师的校准显示器上看起来优雅，但在预算笔记本电脑、碎裂的手机屏幕或明亮房间中的投影仪上却变得无法阅读。

如何使用对比度检查器

测试颜色组合只需几秒钟。选择两种颜色，立即获得结果。

1. 选择前景色。 这通常是您的文本颜色。点击颜色色块打开原生选择器，或直接在输入框中输入 HEX 代码。
2. 选择背景色。 这是文本背后的表面。使用相同的选择器或手动输入 HEX 代码。
3. 阅读对比度比例。 工具会突出显示精确的比例 —— 例如，7.23:1 —— 让您清楚了解自己的位置。
4. 检查 WCAG 合规性。 结果表显示以下内容的通过或失败状态：
   • 正常文本 在 WCAG AA（4.5:1）和 AAA（7:1）下的合规性
   • 大文本 在 WCAG AA（3:1）和 AAA（4.5:1）下的合规性
   • UI 组件 在 WCAG AA（3:1）下的合规性
5. 在上下文中预览颜色。 工具会显示使用您选择的组合渲染的示例正常文本和大标题文本，让您直观判断实际可读性。
6. 交换颜色 使用翻转按钮测试反向组合 —— 例如，将浅色文本放在深色背景上，而不是深色文本放在浅色背景上。
7. 复制比例 通过一次点击将比例复制到剪贴板，用于文档或设计系统说明。

整个过程是即时的。调整任一颜色，实时查看比例、合规性表和预览的更新。

理解对比度比例

比例范围	可访问性级别	含义
1:1 到 2.99:1	未通过任何标准	文本与背景几乎无法区分；对任何可读内容都不可用
3:1 到 4.49:1	仅通过 AA 的大文本和 UI	适合大标题（18pt+）、按钮、图标和边框；正文文本失败
4.5:1 到 6.99:1	通过 AA 的所有文本	满足正常正文文本的最低标准；对大多数用户可读
7:1 到 21:1	通过 AAA 的正常文本	增强可访问性；对有显著视力障碍的用户可读；适合长内容

什么是“大文本”？

WCAG 将大文本定义为 18 点（24 像素）或更大，或 14 点加粗（约 18.67 像素加粗）或更大。标题、行动号召按钮和英雄文本通常属于大文本，这意味着它们可以以比正文文本更低的对比度比例通过测试。然而，无论在哪里，至少达到 4.5:1 的标准仍然是最佳实践，因为它确保一致性，并使您的设计在未来面对缩放和放大时更具前瞻性。

为什么公式使用相对亮度

WCAG 对比度公式不是简单的 RGB 值比较。它首先将每种颜色转换为相对亮度 —— 一种衡量感知亮度的指标，因为人眼对绿色光最敏感，所以绿色的权重比红色或蓝色更高。这就是为什么在 RGB 中亮度值相同的两种颜色可能产生非常不同的对比度比例。纯红色（#FF0000）和纯绿色（#00FF00）在 RGB 中都有一条通道达到最大强度，但绿色在人眼中看起来更亮，因此其相对亮度更高。

主要功能

功能	功能描述	为什么重要
实时对比度计算	在调整颜色时立即计算 WCAG 比例	快速浏览配色方案选项，并立即查看合规性更新
WCAG AA & AAA 测试	显示正常文本、大文本和 UI 组件在两个级别下的通过/失败状态	立即了解您符合哪些标准，无需记忆阈值
实时文本预览	使用您的颜色渲染示例正文文本和大标题	直观判断可读性，而不仅仅是数学计算
颜色交换	一键反转前景和背景	立即测试浅色在深色背景和深色在浅色背景上的变体
HEX 输入	接受直接的 HEX 代码以实现精确颜色匹配	从设计系统中匹配精确的品牌颜色
复制比例	将对比度比例复制到剪贴板	在设计规范和审计中记录可访问性合规性
隐私优先	所有计算在您的浏览器中运行	不会将任何设计数据发送到服务器

与仅显示数字的基本对比度工具不同，此检查器将比例置于上下文中。您不仅看到您的组合得分 4.2:1，还知道它在正文文本中未通过 AA，但在大文本中通过 —— 这是可操作的信息，帮助您决定是加深文本颜色还是增加字体大小。

实际应用场景

创建无障碍界面的网页设计师 一位设计师正在构建一个以深海军蓝背景和浅灰色文本的落地页。组合在他们的显示器上看起来优雅，但对比度检查器显示比例仅为 3.8:1 —— 正文文本未通过 AA。设计师稍微调亮文本，达到 4.6:1，现在页面对低视力用户可读，而不会牺牲深色美学。

实施设计系统的开发人员 一位开发人员维护一个包含数十种颜色标记的组件库。在发布新主题之前，他们运行每对文本和背景通过对比度检查器。早期发现失败可以防止可访问性错误进入生产环境，避免审计后重新设计组件的昂贵返工。

格式化文档的内容创作者 一位市场人员创建一个带有彩色突出框和高亮文本的 PDF 指南。他们使用对比度检查器验证每种背景上的每种文本颜色是否通过 WCAG AA。这确保 PDF 在转换为 HTML 或被屏幕阅读器读取时可访问，并保护组织免受可访问性相关投诉。

运行可访问性审计的产品经理 一位产品经理正在准备 VPAT（自愿产品可访问性模板）审查。他们使用对比度检查器测试其应用程序中的每种颜色组合，记录每个的比率。这创建了审计轨迹，证明尽职调查和合规性。

创建学习材料的教育者 一位教师构建一个包含幻灯片、测验和阅读材料的在线课程。他们检查每种文本和背景的组合，确保视觉障碍学生可以平等参与。高对比度也使学生在手机或平板上观看讲座时在不同光照条件下受益。

移动应用设计师 移动屏幕在任何地方都被查看 —— 户外阳光下、室内荧光灯下、床上启用夜间模式。对比度检查器帮助设计师考虑这些变量条件，确保组合在亮度低、屏幕脏或应用防眩光滤镜时仍可读。

小贴士和最佳实践

• 尽可能追求 AAA。 虽然 AA 是大多数司法管辖区的法律最低标准，但 AAA 为所有人提供更好的体验。如果您的品牌颜色可以达到 7:1 而不冲突，请使用它们。小小的视觉权衡值得巨大的可访问性提升。
• 不要仅依赖颜色。 即使有完美的对比度，颜色对每个人来说并不都是可访问的。色盲用户可能无法区分红色和绿色。始终将颜色与图标、标签、图案或文本结合使用以传达含义。
• 测试您的整个配色方案。 一个设计系统可能有十种文本颜色和十种背景颜色。这是一百种可能的组合。系统地测试每对 —— 或至少最常见的那些 —— 防止可访问性失败悄然出现。
• 检查焦点状态和交互元素。 按钮、链接、表单字段和切换器需要至少 3:1 的对比度与周围区域。一个通过文本测试的按钮可能因为边框过于微妙而作为 UI 组件失败。
• 考虑透明度和叠加层。 如果您的文本位于图像或半透明叠加层上，有效背景是颜色的混合。对比度检查器测试纯色，因此对于叠加层，您需要先计算混合结果或保守测试。
• 在不同缩放级别测试。 低视力用户可能放大到 200% 或更高。在高缩放下，文本看起来更大，这有帮助，但相对对比度保持不变。确保您的比例足够强，以承受放大。
• 记录您的比例。 当您确定一种颜色组合时，在设计系统文档中记录其对比度比例。这有助于未来的设计师和开发人员在产品演变过程中保持可访问性。

常见问题

对比度检查器是否免费使用？

是的。对比度检查器完全免费，无使用限制、无需注册、无广告。您可以测试任意多的颜色组合。

什么是 WCAG？

WCAG 代表 Web 内容可访问性指南。它是由 W3C 发布的国际公认标准，定义了如何使网络内容对残疾人可访问。当前版本是 WCAG 2.1，WCAG 2.2 增加了额外的标准。指南分为三个级别：A（最低）、AA（标准）和 AAA（增强）。

通过 WCAG AA 需要什么对比度比例？

对于 正常文本（小于 18pt 或 14pt 加粗），您需要至少 4.5:1。对于 大文本（18pt 或更大，或 14pt 加粗或更大）和 UI 组件（如按钮和表单字段），您需要至少 3:1。

WCAG AA 和 AAA 有什么区别？

AA 是大多数无障碍法律和指南（包括美国的 Section 508 和欧洲无障碍法案）要求的标准合规级别。AAA 是提供更高可访问性的增强级别，但并非所有地方都要求，有时对一般网页内容来说被认为过于严格。对于 AAA，正常文本需要 7:1 的对比度，大文本需要 4.5:1。

可以测试 RGB 或 HSL 颜色吗？

该工具直接接受 HEX 颜色输入。如果您有 RGB 或 HSL 值，请首先使用我们的 颜色选择器 工具将它们转换为 HEX。将 HEX 代码输入对比度检查器并立即测试。

这个工具在移动设备上能用吗？

是的。对比度检查器完全响应式，适用于智能手机和平板电脑。颜色选择器、预览文本和结果表都针对触摸屏和小屏幕进行了优化。

我可以将这个工具用于印刷设计吗？

虽然 WCAG 特别为数字内容设计，但对比度原则也适用于印刷。4.5:1 或更高的比例通常确保印刷材料中的可读文本。然而，印刷设计师还应考虑油墨覆盖率、纸张质量和观看距离，而不仅仅是数字对比度比例。

如果我的品牌颜色未通过 WCAG 会怎样？

如果您的品牌颜色未达到所需比例，您有几个选择。稍微调亮或调暗文本。增加字体大小，使文本符合“大文本”标准，从而需要较低的比例。添加文本阴影或轮廓以增加感知对比度。或仅将不合规颜色用于装饰元素，并为功能性文本选择可访问的替代颜色。