WCAG 色彩对比度完全指南

什么是 WCAG？

网页内容无障碍指南（WCAG）由 W3C 发布，定义了如何让网页内容对残障人士可访问，包括低视力或色觉障碍人群。WCAG 2.1 是目前被广泛采用的版本，许多国家已通过法律要求网站达到 WCAG 合规。

对比度比值的计算方式

对比度比值通过比较两种颜色的相对亮度来计算。亮度模拟人眼感知——绿色通道权重高于红色，红色高于蓝色。

计算公式：（L1 + 0.05）/（L2 + 0.05），L1 为较亮颜色。结果范围从 1:1（相同颜色）到 21:1（黑色在白色上）。

AA 与 AAA 要求

• AA 级（最低要求） — 普通文字 4.5:1，大字（18pt+ 或 14pt+ 粗体）3:1，UI 组件 3:1。
• AAA 级（增强要求） — 普通文字 7:1，大字 4.5:1。

常见不达标情况

• 白底浅灰文字 — 极简设计中非常常见。#999999 在白底上仅 2.85:1，不达 AA。
• 占位符文字 — 通常 40% 透明度或浅灰，远低于 4.5:1。
• 两种高饱和度颜色 — 视觉上感觉对比强但计算不达标。
• 渐变背景上的文字 — 必须在文字出现的每个位置都达标。

色觉障碍

约 8% 的男性和 0.5% 的女性存在色觉缺陷。永远不要仅用颜色传递信息——始终配合文字标签、图标或图案使用。

如何修复不达标的对比度

最快的修复是加深文字色或调亮背景。如果品牌色无法更改：添加白色光晕、增加字重（大字号要求更低），或仅对文字后方背景进行调整。将整个色板代入对比度检查工具，按角色分别记录哪些组合已批准使用。