如何检查颜色对比度以确保无障碍

大约每 12 位男性中有 1 位、每 200 位女性中有 1 位存在某种形式的色觉障碍。还有数百万人存在低视力、视力老化，或在强烈阳光下看屏幕。如果您的文字与背景对比度不够，这些人就无法阅读。

颜色对比度不是「加分项」· 它是无障碍的核心要求。

WCAG 的要求

Web 内容无障碍指南（WCAG）定义了文本与背景之间的最小对比度：

「大号文字」指 18px 粗体或 24px 常规及以上。

对比度范围从 1:1（无对比 · 白底白字）到 21:1（最大对比 · 黑底白字）。

如何检查对比度

1. 选择颜色· 通过 HEX 代码、RGB 值或取色器输入文字颜色（前景）和背景颜色。
2. 查看结果· 工具会立即显示对比度比值，以及组合是否通过 WCAG AA 和 AAA 的普通文字与大号文字要求。
3. 根据需要调整· 如果对比度不达标，加深文字或提亮背景（或反之），直到达到所需级别。

常见的对比度错误

白底浅灰字· #999999 在 #ffffff 上的对比度仅为 2.8:1。不符合 WCAG AA。对于视力完美的设计师看起来可能「简洁」，但对许多人来说无法阅读。

彩色底 + 彩色字· 白字蓝按钮通常合格，但白字绿按钮往往不合格。一定要检查 · 不能用肉眼判断对比度。

表单占位文字· 字段占位文字因对比度低而臭名昭著。虽然 WCAG 没有严格要求，但用户仍然需要阅读它们。

暗色模式· 设计师常在深灰底上用中灰字以获得「微妙」观感。这通常通不过对比度检查。

小贴士

• 检查每一种文字/背景组合· 不要想当然。就连资深设计师也会对某些不合格的组合感到惊讶。
• 测试两种主题· 如果网站有亮色和暗色模式，请在两者中都检查对比度。在白色上有效的颜色在深灰色上可能失败。
• 谨慎使用品牌色· 如果您的品牌蓝色作为文字颜色不合格，可将其用于更大的元素（按钮、标题），此时适用「大号文字」阈值（3:1），正文使用更深的色调。
• 不要只依赖颜色· 除充足对比度外，永远不要仅通过颜色来传达信息。使用图标、标签或图案作为辅助。