免费对比度计算器

什么是颜色对比度？

颜色对比度是对两种颜色感知亮度差异的客观数值衡量——通常是前景文本及其背景。它根据每种颜色的相对亮度计算，得出介于1（无对比）到21（最大对比，如白底黑字）之间的值。这一指标是WCAG对比度检查器标准的核心，对于构建无障碍网站或应用程序的任何人来说都至关重要。

例如，白底上的黄色文本会产生非常低的对比度，因为两种色调亮度相近，使许多人难以阅读。将背景切换为黑色，对比度会飙升，极大地提高易读性。人类对亮度的感知是主观的，但对比度通过提供一个单一、可重复的基准，消除了个人偏见。

相对亮度：核心组成部分

相对亮度（RL）规范了一种颜色在给定色彩空间（最常见的是sRGB）中显示的亮度。为了计算它，必须对sRGB通道值进行线性化（伽玛解码），然后根据眼睛对每种原色的敏感度进行加权：

$$RL = 0.2126 \cdot R + 0.7152 \cdot G + 0.0722 \cdot B$$

这里$R$、$G$和$B$是从0到1缩放的线性sRGB分量。系数反映绿色对感知亮度贡献最大，红色次之，蓝色最小。请注意，“亮度”是一种主观印象，而相对亮度是一种客观、可量化的值。

对比度如何计算

WCAG指定的对比度公式为：

$$\text{Contrast ratio} = \frac{RL_{\text{lighter}} + 0.05}{RL_{\text{darker}} + 0.05}$$

其中：

• $RL_{\text{lighter}}$ 是较亮颜色的相对亮度（较高值），
• $RL_{\text{darker}}$ 是较暗颜色的相对亮度（较低值），
• $0.05$ 是一个模拟环境光贡献的常数。

如果你已经知道两种颜色的相对亮度，直接套用此公式即可得出对比度。如果你只有颜色代码（HEX、HSL、sRGB 等），则必须首先将它们转换为 sRGB，然后使用上述线性化和加权步骤计算 RL 值。对许多颜色对手动执行此操作可能很繁琐，这就是专用的颜色对比度检查器自动完成整个工作流程的原因。

WCAG 合规等级：什么是对比度合格？

Web内容无障碍指南定义了两个合规等级：

• AA（最低）
  • 标准文本（小于 18 pt 或 14 pt 粗体）：至少 4.5 : 1
  • 大号文本（18 pt 或更大，或 14 pt 粗体且更大）：至少 3 : 1
• AAA（增强）
  • 标准文本：至少 7 : 1
  • 大号文本：至少 4.5 : 1

这些阈值确保内容对于中度视力丧失、色觉缺陷或未矫正屈光不正的用户仍然可读。一个好的颜色对比度计算器会立即将你的结果与这些等级进行比较，并告诉你组合是否通过。

使用在线颜色对比度检查器

这个无障碍颜色检查器提供了两种输入模式以匹配你的工作流程：

1. 从颜色代码输入 – 选择颜色模型（sRGB、HEX、HSL 等），输入前景和背景颜色的值，然后选择文本类型（标准或大号）。工具返回对比度以及清晰的 WCAG AA 和 AAA 通过/失败指示。
2. 从相对亮度输入 – 切换到 RL 模式，输入两个亮度数值，计算器在应用公式前确定哪个较亮。结果显示在相同的合规信息旁边。

在主结果下方，你还可以查看每种颜色的计算相对亮度，帮助你理解为什么特定组合会表现如此。

颜色对比度与显示器对比度

虽然这些术语有时可以互换使用，但网络无障碍中使用的颜色对比度和显示器和投影仪标称的对比度是不同的指标。网络对比度基于相对亮度，上限为21 : 1。显示器对比度将最亮的白色与硬件能产生的最暗黑色进行比较，可以达到1,000,000 : 1这样的值。你在这里使用的工具是一个专门的网页无障碍工具，遵循WCAG方法。

总结

无论你是开发人员、设计师还是内容创作者，检查颜色组合是否符合无障碍标准是构建包容性数字产品的关键步骤。这个对比度计算器（或WCAG对比度检查器）通过将任意颜色输入转换为可靠的对比度并与官方WCAG阈值进行比较，简化了流程。它消除了猜测，并确保你的设计选择满足最广泛受众的需求。