设计稿对比度符合无障碍标准吗

本文目录导读：

1. 第一步：明确 AA 级标准的“硬指标”
2. 第二步：不要用肉眼判断，使用工具量化
3. 第三步：常见“踩坑”颜色组合（通常不通过）
4. 第四步：特殊场景的判断
5. 如何给你的设计稿做“快速诊断”？

评估设计稿的对比度是否符合无障碍标准,需要依据 Web 内容无障碍指南 (WCAG) 2.1/2.2 的 AA 级标准（这是法律合规的普遍要求）。

核心结论： 仅凭“设计稿”无法断定，必须查看具体的颜色数值和文字大小/粗细。

以下是具体的判断标准和自查方法：

第一步：明确 AA 级标准的“硬指标”

WCAG 定义了两种对比度要求：

1. 普通文本（小于 18pt 或 14pt 粗体）：
   • 要求： 对比度 至少 4.5:1。
   • 例子： 10px 或 16px 的正文，非粗体。
2. 大文本（不小于 18pt 或 14pt 粗体）：
   • 要求： 对比度 至少 3:1。
   • 例子： 24px 的标题、18px 的粗体按钮文字。
3. 图形和UI组件（图标、输入框边框、图表）：
   • 要求： 信息含义必需的图形部分，对比度 至少 3:1。
   • 注意： 装饰性、或被文字标签明确标注的图标、禁用状态的组件、LOGO 等不受此限制。

第二步：不要用肉眼判断，使用工具量化

人眼对色彩亮度的感知不准确（尤其是深蓝背景上的红字），必须用工具测量。

推荐的免费工具：

• Stark（Figma/Sketch/Adobe XD 插件）： 设计师最常用，能直接在画板上拾取颜色，实时显示对比度并模拟色盲视图。
• WebAIM Contrast Checker（网页版）： 只需输入两个颜色的十六进制码（如 #333333 和 #FFFFFF），立刻给出通过/失败结果。
• Color Contrast Analyser（桌面应用）： 允许你使用取色器从任何地方取色（包括设计稿截图）。

第三步：常见“踩坑”颜色组合（通常不通过）

• 灰色文字在白色背景上： 只要是色值 #999999、#AAAAAA 或更浅的灰色，在白色背景上通常只有 2.x:1 到 3.x:1，无法通过 4.5:1 的标准，建议正文使用 #595959 或更深。
• 浅色或柔和色系： 比如淡蓝色背景上写白色文字，或浅黄色背景上的浅灰色文字。
• 高饱和度的互补色： 红配绿、蓝配橙（虽然色相不同，但亮度可能相近，导致对比度低）。

第四步：特殊场景的判断

1. 占位符文字： WCAG 指南中，占位符文字通常被视为“信息含义不必需”，因此可以很浅，但更推荐的做法是（AA级下）占位符不通过需给出输入提示，或者做到通过（推荐使用 4.5:1）。
2. 禁用状态按钮： 虽然通常豁免，但如果用户需要区分“可点击”和“禁用”状态，禁用状态的对比度依然建议不低于 3:1。
3. 链接与正文： 用户需要能通过颜色（通常加上下划线）区分链接和正文，链接颜色对普通文本（通常是正文颜色）的对比度需满足 3:1，且链接自身与背景需满足 4.5:1。

如何给你的设计稿做“快速诊断”？

如果你的设计稿遇到以下情况,高度怀疑不符合标准： 使用了 #999、#aaa、#ccc 等浅灰色。

• 任何文字颜色感觉“温柔”、“淡雅”、“像水印”。
• 按钮上的文字直接是白色,而按钮本身是浅红色、浅蓝色或浅绿色。
• 图表中的线条或数据点颜色太浅,与背景色差别不大。

修正建议：

• 使用纯黑 #000 到深灰 #595959 之间，最常见的是 #333（深黑灰）或 #222。
• 辅助文字/标签： 最低不要浅于 #767676，建议使用 #5A5A5A。
• 链接颜色： 使用标准蓝 #0000EE 或稍暗的 #0066CC 通常可以通过。

• 除非你刻意选择了高对比度配色，否则大多数追求“高级感”、“柔和”的设计稿在对比度上都会不达标，正文用 #757575、#888888 几乎可以确定不通过 AA 级标准。
• 行动： 打开设计稿，任选一个图层面板中的文字和背景色，用 WebAIM 工具输入色值。如果结果是 Fail，就需要调整颜色，直到变成 Pass（AA）。

如果你愿意,可以直接粘贴一个你担心的颜色组合（文字色：#xxxxxx，背景色：#yyyyyy），我可以帮你计算一下具体的对比度，并给出通过与否的判断和调整建议。

标签： 无障碍标准