网页配色与对比度：WCAG 无障碍设计入门

浅灰文字配白底，在设计软件里看起来干净利落。对低视力用户、色觉障碍者，以及烈日下掏出手机的你，它可能根本读不清。对比度不是审美偏好，而是有明确数字标准的硬指标。WCAG 给出了这条线在哪里，怎么量。

为什么对比度如此重要

全球有数亿低视力人群，约 8% 的男性存在色觉缺陷。老年人的晶状体透光率会下降，强光下屏幕泛白，投影仪亮度常常不够。同样的界面，落到不同人眼前的对比度差别极大。万维网联盟（W3C）制定的 WCAG（Web 内容无障碍指南）把文字与背景的亮度差异列为核心要求，并给出可计算的公式。达标不只照顾少数人：走神、犯困、屏幕反光时，人人受益。

相对亮度与对比度比值怎么算

要算对比度，先要把颜色换算成亮度。人眼对三原色的敏感度并不相同：绿色最敏感，红色次之，蓝色最迟钝。纯绿和纯蓝即使分量相同，看起来亮度也完全不同。WCAG 的做法是先做线性化：把 sRGB 的红绿蓝通道各自转换一次，低值走线性段，高值走 gamma 曲线。这一步同时模拟屏幕发光和人眼的非线性感知。然后按 0.2126、0.7152、0.0722 三个权重加权求和，得到相对亮度 L，取值从 0（纯黑）到 1（纯白）。绿色权重最高，因为人眼对绿色最敏感。简单说，就是把主观的明暗感变成 0 到 1 之间的数。

有了亮度，对比度就是两个亮度的比值：(L1 + 0.05) / (L2 + 0.05)。L1 是较亮的颜色，L2 是较暗的颜色。分子分母各加 0.05，是为了让纯黑组合不至于算出无穷大，也让浅色之间拉开差距。比值最小是 1:1（同色），最大约 21:1（纯黑对纯白），日常配色多落在 2:1 到 10:1 之间。有个反直觉的事实：深灰字（#333）配白底约 12.6:1，比纯黑的 21:1 降了不少，依然轻松达标。真正的问题出在浅灰、浅黄这类颜色上。

AA 与 AAA：达标线在哪里

WCAG 按文字大小分了两档要求。

「大号文字」有专门定义。它指至少 18pt（约 24px）常规字重，或 14pt（约 18.5px）加粗。字号越大越容易辨认，标准可以放宽，正文必须按 4.5:1。图形、图标、输入框边框这类界面元素也要求 3:1。多数产品把 AA 当验收线。

常见的“翻车”配色

• 浅灰字配白底：#999 配白色约 2.85:1，正文不达标。这是最流行的错误，占位符文字尤其严重。
• 浅黄、浅橙配白底：亮度太接近白色，比值常低于 2:1，几乎不可读。
• 浅蓝配白底：#add8e6 这类淡蓝约 1.6:1，标签和徽章最常出事。
• 灰底上叠浅灰卡片：卡片能看清，卡片里的文字却全部不达标。

深色模式同样会出问题。黑底配太深的灰字发闷，纯黑底配过亮的文字又刺眼。这两种情况都要靠数字验证，不能凭感觉。

实践步骤：逐对验证你的配色

1. 先定下主色、强调色和一套灰阶中性色，不要临时抓色。
2. 用颜色对比度检查器验证每一对前景和背景组合：正文与页面背景、按钮文字与按钮底色、边框与背景、占位符与输入框背景。
3. 不达标时优先调整明度，而不是换色相。往深或往浅推一档，比值立刻变化。
4. 大标题可以按 3:1 放宽。正文、表单、时间戳这类小字一律按 4.5:1。
5. 用颜色选择器从设计稿精确取色，用配色方案生成器扩展出成套达标色板。最后在灰度模式下复查一遍。

不止颜色：别只用颜色传达信息

对比度达标只是第一步。对色觉障碍用户来说，红和绿可能是同一种颜色。所以表单报错不能只有变红，要配上图标和文字。链接不能只靠换色区分，要加下划线。图表的系列数据不能只靠颜色，要加形状、纹理或直接标注数值。颜色应该是信息的辅助通道，而不是唯一通道。

常见错误与排查

配色出问题很少坏在公式上，几乎都坏在流程里。复查时最常抓到的是下面五条。

• 只测“正文配页面背景”这一对就宣布达标。错在：页面上成对出现的颜色远不止一组。按钮文字与按钮底色、占位符与输入框底色、边框与背景、页脚小字与页脚底色，漏测的任何一组都可能低于 3:1。页脚和占位符是最常见的死角。正确做法：把界面里所有前景/背景组合列成清单，逐对填进对比度检查器，全部达标再交付。
• 对着设计稿截图用吸管取色。错在：截图经过色彩配置文件转换和有损压缩，吸到的色值与原始值有偏差。测出的比值可能差出零点几，刚好卡在达标线附近时，结论完全不可信。正确做法：从设计工具的色板或代码里的颜色变量直接复制十六进制值去测。
• 把正文硬凑成“大号文字”来躲 4.5:1。错在：放宽到 3:1 的前提是文字本来就大到易读，约 24px 常规或 18.5px 加粗。为了过检测把 14px 正文改成 18.5px，检测器变绿了，真实用户并没有多看清一个字，排版层级反而被破坏。正确做法：字号服从设计。颜色不达标就调明度，不要改字号迁就颜色。
• 深色模式直接把白天配色反转了事。错在：浅色主题里达标的品牌色放到深底上，往往掉到 3:1 以下。纯黑底配纯白字还会产生光晕，看着刺眼。看起来更酷不等于可用。正确做法：给深色模式单独取一套色，逐对重新验证。底色用深灰（如 #121212）而非纯黑，长文避免用最高亮度的纯白。
• 用低对比的“禁用态”灰字当视觉暗示。错在：低视力用户分不清按钮是禁用了，还是颜色没调好。键盘用户 Tab 过去也拿不到任何反馈，设计暗示变成了信息丢失。正确做法：禁用态在降低明度之外，配上禁用图标和文字说明。文字对比度保持在 3:1 以上，并用可见的提示文案解释原因。