你曾在强烈阳光下看着手机屏幕，却怎么也看不清浅灰色的文字吗？或是走进某家餐厅，菜单的文字和背景几乎融为一体？这些令人沮丧的体验，背后都有一个共同原因：色彩对比度不足。对于弱视、色盲或老花眼的用户而言，这不只是不便，而是真正的障碍。本文带你了解色彩对比度的科学基础、WCAG 标准，以及如何在设计中避免常见的对比度陷阱。
1. 什么是色彩对比度？
色彩对比度（Color Contrast Ratio）是衡量前景色（通常是文字）与背景色之间亮度差异的指标，用以描述两种颜色在视觉上的「可区分程度」。对比度以比值表示，范围从 1:1（完全相同的颜色）到 21:1（纯黑底白字，最大对比）。这个数值通过标准化公式计算，是客观量测值而非主观感受。
2. 相对亮度（Relative Luminance）计算原理
WCAG 使用「相对亮度」作为对比度计算的基础：
2.1 将 sRGB 值标准化并进行 Gamma 校正
若 C ≤ 0.04045：linearC = C / 12.92
若 C > 0.04045：linearC = ((C + 0.055) / 1.055) ^ 2.42.2 计算相对亮度 L
L = 0.2126 × R + 0.7152 × G + 0.0722 × B这三个系数反映了人眼对不同波长光线的敏感度——对绿色最敏感（0.7152），对蓝色最不敏感（0.0722）。
2.3 计算对比度比值
对比度 = (L较亮 + 0.05) / (L较暗 + 0.05)3. WCAG 2.1 标准：AA 与 AAA 等级
| 内容类型 | AA 等级（最低要求） | AAA 等级（增强要求） |
|---|---|---|
| 一般文字（18pt 以下，或 14pt 以下粗体） | 4.5:1 | 7:1 |
| 大型文字（18pt 以上，或 14pt 以上粗体） | 3:1 | 4.5:1 |
| UI 元件、图标（非装饰性） | 3:1 | — |
| 纯装饰性图案、Logo 文字 | 无要求 | 无要求 |
4. 常见的色彩设计错误
4.1 浅灰文字配白底
最常见的问题。追求「轻盈感」而使用 #999999 或更浅的灰色作为辅助文字，但这类组合的对比度往往只有 2–3:1，远低于 AA 标准。修正：辅助文字至少使用 #767676（与白底的对比度恰好是 4.5:1）。
4.2 低饱和度的配色方案
粉嫩色系（浅粉配奶白、浅蓝配浅灰）视觉上很温柔，但对比度往往不足。设计的「柔和感」不应以牺牲可读性为代价。
4.3 仅靠颜色传达信息
使用绿色表示成功、红色表示错误，对于有色觉缺陷（如红绿色盲）的用户无效。应同时加上图标或文字说明。
4.4 按钮边框对比度不足
白色背景上的白色按钮，如果边框颜色与背景太接近，会让弱视用户无法识别按钮边界。UI 元件的边框或边缘也需要达到 3:1 的对比度要求。
4.5 文字放在图片上
将文字叠加在照片或渐变背景上，某些区域的对比度可能符合标准，但其他区域不符合。解决方案：在文字下方加上半透明的深色遮罩，或使用文字阴影。
5. 色盲的种类与影响
全球约 8% 的男性和 0.5% 的女性有某种形式的色觉缺陷：
| 类型 | 说明 | 发生率 |
|---|---|---|
| 红绿色盲（Deuteranopia） | 无法区分红色与绿色 | 男性约 5% |
| 红色弱（Protanopia） | 对红色感知减弱 | 男性约 1% |
| 蓝黄色盲（Tritanopia） | 无法区分蓝色与黄色 | 较罕见 |
| 全色盲（Achromatopsia） | 完全无法感知颜色 | 极罕见 |
6. 实用的改善策略
- 使用对比度检查工具：在设计过程中定期验证色彩组合，输入十六进制色码即可知道是否通过 AA/AAA 标准
- 设计系统中预先定义通过标准的色彩配对：直接标注哪些颜色组合通过 AA 标准，避免每次手动验证
- 使用深色模式时重新验证：浅色模式和深色模式必须分别验证对比度
- 不要以「设计工具中看起来 OK」为准：只有数值符合标准才能保证所有用户在各种环境下的可读性
7. 对比度与 UX 设计的平衡
「提高对比度」不等于「把所有文字都改成黑色、所有背景都改成白色」：
- 主要文字用高对比度（7:1），辅助说明文字用中等对比度（4.5:1）
- 大字体（18pt+）可以接受较低的对比度（3:1）
- 插图和装饰性元素不受对比度限制
- 使用一致的色彩语义，让用户建立视觉习惯
8. 小结
色彩对比度是无障碍设计中技术含量最高、也最容易被量化验证的指标之一。WCAG 2.1 的 AA 标准（一般文字 4.5:1）是设计的最低门槛，不只保护了视障、弱视、色盲的用户，也让所有人在强光环境、低品质屏幕或疲劳状态下都有更好的阅读体验。在设计流程中加入对比度检查，是成本极低、收益极高的无障碍投资。