颜色对比度与无障碍：实用指南

你选了一个在显示器上看起来很棒的颜色。上线了。然后有人告诉你他们看不清文字。

这比你想的更常发生。大约每12个男性中有1个、每200个女性中有1个有某种形式的色觉缺陷。加上低对比度屏幕、强烈阳光和老化的眼睛，你的颜色选择突然影响到很多人。

好消息：这有明确的规则。叫WCAG对比度要求，比听起来简单。

什么是对比度比率？

对比度比率是描述两种颜色在亮度上差多少的数字。范围从1:1（无对比——相同颜色）到21:1（最大对比——白底黑字）。

你的眼睛不会平等地看到所有颜色差异。对比度比率反映的是人类视觉实际感知亮度的方式，不只是数学上的颜色差异。

快速参考：

| 对比度比率 | 看起来怎样 | 通过？ | |---|---|---| | 1:1 – 2:1 | 几乎看不见 | 否 | | 3:1 | 能读但费劲 | 仅大文本AA | | 4.5:1 | 舒适阅读 | 普通文本AA | | 7:1 | 非常清晰 | 普通文本AAA | | 21:1 | 最大（白底黑字） | 全部 |

AA vs. AAA：有什么区别？

WCAG定义了两个与颜色相关的重要合规级别：

AA级（大多数网站的目标）：

• 普通文本（小于18pt）：需要4.5:1的对比度比率
• 大文本（18pt+或14pt+粗体）：需要3:1的对比度比率
• UI组件和图形对象：需要3:1的对比度比率

AAA级（黄金标准）：

• 普通文本：需要7:1的对比度比率
• 大文本：需要4.5:1的对比度比率

大多数组织以AA为目标。AAA是理想的，但对设计有限制——不是很多颜色组合能达到7:1同时还好看。

常见的对比度失败

在真实项目中一直出现：

白色背景上的浅灰文字：那种微妙的、"优雅的"灰色文字？经常通不过对比度。白色上的#999999只有2.85:1——连大文本都不合格。

彩色背景上的彩色文字：紫色上的蓝色、蓝色上的绿色、深灰上的红色。对你来说可能看起来有区别，但对比度比率不够。

表单中的占位符文字：浅灰色占位符文字在网页设计中几乎是通用的，但几乎总是不符合对比度要求。低视力用户无法读取字段中期望输入的内容。

图片上的文字：除非添加深色遮罩或文字阴影，照片上的文字很少能稳定地达到对比度标准。

色觉缺陷的考虑

对比度比率有帮助，但不能解决一切。色觉缺陷意味着某些用户确实无法区分特定的颜色对。

传达信息时不要仅依赖颜色：

• 红/绿代表错误/成功？也添加图标或文字标签
• 颜色编码的图表？添加图案、标签或不同形状
• 仅用红色标记必填字段？添加星号或"（必填）"文字

最常见的类型：

• 红绿色觉缺陷（约6%的男性）：红色和绿色看起来相似
• 第一型色觉缺陷（约2%的男性）：红色显得暗/偏棕
• 蓝黄色觉缺陷（罕见）：蓝色和黄色难以区分

修正颜色的实用步骤

第1步：用颜色转换器把品牌色转换为十六进制。检查对比度需要精确值。

第2步：测试每个文字/背景组合。不只是检查主要文字——检查按钮、链接、说明文字、表单标签、错误消息。

第3步：通过调整亮度修复失败项。通常你可以保持相同的色相和饱和度，通过加深或减淡来达到比率。

第4步：用模拟器测试。Chrome DevTools有内置的视觉缺陷模拟器（渲染面板 > 模拟视觉缺陷）。

第5步：也检查你的SVG图形和图片。对比度差的图标和文字一样有问题。

快速上手

如果你赶时间，这些安全组合总是能通过AA：

• 黑色 (#000000) + 白色 (#FFFFFF) — 21:1
• 深灰 (#333333) + 白色 — 12.6:1
• 白色文字 + 深蓝 (#003366) — 9.9:1
• 黑色文字 + 浅黄 (#FFF9C4) — 18.1:1
• 深绿 (#2E7D32) + 白色 — 5.1:1

而这些常常失败：

• 中灰 (#808080) + 白色 — 3.9:1（普通文本AA不合格）
• 红色 (#FF0000) + 黑色 — 5.25:1（通过AA但不通过AAA）
• 橙色 (#FF8C00) + 白色 — 3.0:1（普通文本AA不合格）

---

无障碍不仅仅是合规——是确保每个人都能真正使用你构建的东西。从检查文字对比度比率开始。先修复明显的失败项。然后处理按钮、图标和次要文字。小改变，大影响。