颜色对比度检测工具使用指南

← 返回博客

颜色对比度检测工具使用指南

· 6 分钟阅读

什么是颜色对比度

颜色对比度是指两种颜色（通常是文字颜色和背景颜色）之间的亮度差异。对比度以比值形式表示，如 4.5:1 或 7:1，值越高代表对比越强。最高对比度是 21:1（黑色文字在白色背景上），最低是 1:1（相同颜色，无对比度）。充足的颜色对比度是确保文字可读性和网站无障碍性的基础。

WCAG 对比度标准

《网页内容无障碍指南》（WCAG）定义了两个对比度合规级别：

• **AA 级（最低可接受标准）：**正文文字（小于 18px 或 14px 粗体以下）对比度至少 4.5:1；大号文字（18px 以上或 14px 粗体以上）对比度至少 3:1。
• **AAA 级（增强标准）：**正文文字对比度至少 7:1；大号文字对比度至少 4.5:1。这是最高标准，不要求所有情况都达到，但应尽量追求。

注意：这些标准适用于文字和背景的颜色组合，以及用于传达信息的图形元素（图标、图表等）的颜色对比。装饰性元素或非功能性颜色不适用这些标准。

对比度的计算原理

WCAG 定义的对比度计算基于相对亮度（Relative Luminance）。公式为：

Contrast Ratio = (L1 + 0.05) / (L2 + 0.05)

Where:
L1 = relative luminance of the lighter color
L2 = relative luminance of the darker color

Relative luminance calculation:
For each RGB channel (0-1 range):
  if c <= 0.04045: c_linear = c / 12.92
  else:            c_linear = ((c + 0.055) / 1.055) ^ 2.4

L = 0.2126 * R_linear + 0.7152 * G_linear + 0.0722 * B_linear

这个公式考虑了人眼对不同颜色亮度的感知差异（人眼对绿色最敏感，其次是红色，对蓝色最不敏感）。实际使用中，直接使用对比度检测工具计算即可。

如何使用对比度检测工具

使用步骤非常简单：输入前景色（通常是文字颜色）的 HEX/RGB 代码，输入背景色的 HEX/RGB 代码，工具会立即显示对比度比值，并标明是否通过 AA 或 AAA 标准。实际操作建议：

• 测试你配色方案中所有常见的文字/背景组合
• 分别测试浅色模式和深色模式
• 测试悬停状态的颜色变化是否仍符合标准
• 不要忘记测试占位符文字颜色（通常饱和度低，容易不达标）

常见对比度问题与修复方案

最常见的对比度问题：

• **浅灰色文字：**设计师常用浅灰色次要文字，但容易不达标。解决方案：确保次要文字对比度至少 4.5:1（如从 #999999 换为 #767676）
• **彩色按钮上的白色文字：**浅色系按钮（如浅黄色、浅粉色）上的白色文字几乎无法通过。解决方案：在浅色按钮上使用深色文字
• **彩色背景上的彩色文字：**如蓝色背景上的绿色文字。解决方案：始终使用白色或非常深的颜色作为彩色背景上的文字

将对比度检测融入工作流

对比度检测不应该是设计完成后才做的"事后检查"，而应该贯穿整个设计过程。建议的工作流：在选色阶段就检查对比度、在设计稿审查时将对比度验证作为必要步骤、使用支持对比度检测的设计工具（Figma 插件等），以及在代码 Review 时用自动化工具（如 axe、Lighthouse）扫描对比度问题。

非文字元素的对比度要求

WCAG 2.1 还对非文字的 UI 组件和图形元素提出了对比度要求（WCAG 1.4.11 Non-text Contrast）：用于传达信息的 UI 组件（如表单边框、复选框）与相邻颜色的对比度至少需要 3:1。图标和信息图形的关键部分也需要满足 3:1 的对比度。

立即尝试在线工具，无需安装，免费使用。

打开工具 →