颜色对比度检查器

什么是颜色对比度？

颜色对比度是两种颜色之间的亮度差异——最常见的是文字（前景色）与其背后的表面（背景色）之间的差异。对比度越高，文字越容易阅读，尤其是对于视力低下、色盲的用户，或者在强光下查看屏幕时。W3C 发布的 Web 内容无障碍指南（WCAG）定义了精确的数值阈值，一对颜色必须满足这些阈值才能被视为无障碍。这些阈值以对比度比值表示，范围从 1:1（无对比，相同颜色）到 21:1（最大对比，白底黑字）。

该概念于 2008 年在 WCAG 2.0 中正式确立，并延续至 WCAG 2.1 和 2.2。它被全球无障碍法律引用，包括美国的《美国残疾人法》（ADA）和欧洲《无障碍法案》。设计师和开发人员应在项目的每个阶段验证对比度，从品牌调色板选择到最终组件质量保证。

何时检查颜色对比度

每当前景色放置在背景上时，都应进行对比度检查。常见场景包括：

• 正文。 段落、列表项和表单标签必须满足 AA 普通文本 4.5:1 的阈值。
• 标题和大号文本。 18pt（24px）或 14pt 粗体（18.66px）的文本在 AA 大号文本规则下只需 3:1。
• 按钮和链接。 交互元素必须与周围内容可区分；AA 大号文本 3:1 是基线。
• 图标和 UI 图形。 有意义的图标、图表和焦点指示器需要与相邻颜色 3:1 的对比度。
• 品牌调色板审计。 验证每个品牌色与其他色的搭配，构建安全、可复用的令牌集。
• 深色模式。 反转主题经常对比度不达标，因为针对白色背景调整的颜色在深色背景上表现不同。

尽早检查对比度可避免昂贵的重新设计，并确保数字产品能被最广泛的受众使用。

对比度比值如何计算

WCAG 对比度比值由每种颜色的相对亮度推导而来。首先，每个 RGB 通道（0–255）转换为线性值：小于等于 0.03928 的值除以 12.92，较大的值用 ((c + 0.055) / 1.055) ^ 2.4 转换。然后相对亮度 L 为 0.2126 * R + 0.7152 * G + 0.0722 * B，其中 R、G、B 是线性化的通道值，权重反映了人眼对每种颜色的敏感度。最后，比值为 (L1 + 0.05) / (L2 + 0.05)，其中 L1 是两个亮度中较亮的，L2 是较暗的。

0.05 的偏移量考虑了从屏幕反射的环境光。该公式产生的值在 1（相同颜色）到 21（白底黑字）之间。本工具在浏览器内用 JavaScript 执行全部计算，因此颜色数据永远不会离开您的设备。

WCAG AA 与 AAA 阈值

下表总结了本工具检查的四个对比度阈值。

级别	文本大小	要求比值
AA	普通（< 18pt）	≥ 4.5:1
AA	大号（≥ 18pt 或 14pt 粗体）	≥ 3:1
AAA	普通（< 18pt）	≥ 7:1
AAA	大号（≥ 18pt 或 14pt 粗体）	≥ 4.5:1

AA 是大多数司法管辖区的法律基线；AAA 是更严格的目标，适用于可读性至关重要的内容，如长篇文章、医疗信息和政府服务。大号文本的标准较低，因为较大的字形在较低对比度下仍可阅读。

如何检查颜色对比度

使用本工具检查对比度只需一秒钟，且完全在浏览器中完成，无需上传、无需注册、无需安装。请按以下步骤操作：

1. 设置前景色。 使用前景色拾取器或在相邻字段中输入 HEX 代码——这代表您的文字颜色。
2. 设置背景色。 使用背景色拾取器或 HEX 字段定义文字背后的表面。
3. 读取比值。 对比度比值实时更新，同时显示每个 WCAG 阈值的通过/失败标记。
4. 预览组合。 示例文本框展示该组合的实际效果，让您一眼判断可读性。
5. 按需复制。 点击"复制对比度"将数值比值复制到剪贴板，用于报告或工单。

由于所有步骤都通过 JavaScript 在浏览器本地运行，您的颜色选择永远不会上传到服务器。这使对比度检查完全私密且即时。