对比度不达标怎么修:WCAG 对比度 4.5:1 的微调思路

做无障碍审计时,最常见的一条失败项就是文字和背景的对比度不够。检测器红着脸告诉你"不过",可它通常不告诉你下一步该怎么动。我自己第一次接审计时就卡在这里:一对蓝配白,差一点点到标准,我盯着两个色值发愣,要么把字改成纯黑,要么把蓝改深到认不出。两条路都不对。这篇讲清楚正确的修法:沿明度微调,直到刚好达标,色相不动。

WCAG AA 正文的硬线是 4.5:1

WCAG 2.1 成功标准 1.4.3 规定,普通正文文字与背景的对比度至少要 4.5:1,大字号(粗体 14pt 以上或常规 18.66px 以上)放宽到 3:1。想冲 AAA 级,正文要 7:1,大字 4.5:1。这个比值是按相对亮度算的,范围从 1:1(两色完全相同)到 21:1(纯黑配纯白)。

关键认知:对比度是按明度差拉开的,跟色相关系不大。这就是修复的突破口。两个色相完全相同的蓝,只要一个够深一个够浅,照样能拉到 4.5:1 以上。所以"达标"和"保住品牌色"并不矛盾,要动的只是明度那一根轴。

为什么不直接换成黑配白

技术上,黑字配白底对比度 21:1,稳过所有等级。但绝大多数不达标的色对,都是设计师精挑细选过的:品牌蓝落在浅卡片上、标签贴在淡色背景上、次要文字故意调浅做层次。直接换黑白,等于把辛苦堆出来的视觉层次砸了,设计师也不会同意。

正确做法是只沿 HSL 的明度(L)走,保持色相(H)和饱和度(S)不动。天蓝还是天蓝,只是更深或更浅一点,直到比值跨过 4.5:1 那条线。每一对失败色其实有四个可调的方向:把文字调暗、把文字调亮、把背景调暗、把背景调亮。挑一个能最小幅度达标、又不破坏页面氛围的方向就行。WCAG 颜色对比度修复器会一次把这四套方案都算给你,每套都锁死色相,你只需要挑顺眼的那个。

一个真实例子:红色 CTA 从 4.0 调到 4.5

拿个常见的例子。主按钮用品牌红 #ef4444 配白底,检测器算出来 4.0:1,AA 普通文字不过(只勉强过 AA 大字)。销售那边一句"红不许动",改色相是没指望了。

这时目标设为 AA,选"把文字调暗"。工具会沿明度往下走,给到一个更深的红,大约 #dc2626,对比度跨过 4.5:1。重点是它的色相还稳稳落在红色 5 到 15 度那个区间,没飘到紫、也没飘到粉。品牌红只是沉了一档,客服信箱里"按钮上的字看不清"的工单也跟着没了。整个过程动的只有明度一格,设计师看了截图也认。

微调时顺手过一遍色盲

有个坑值得提前躲:WCAG 比值算的是原始 sRGB,不是色觉异常用户实际看到的颜色。男性里大约每 12 个有 1 个有不同程度的色觉异常。一对正常视觉下 4.5:1 过得很轻松的色,在红色盲或绿色盲眼里可能塌成"灰配灰"。

所以修复方案选好之后,顺手把它投到色盲滤镜下再算一遍比值。如果绿色盲那一行掉到 3:1 以下,说明这套"WCAG 干净但色盲坏掉"了,通常换个杠杆就能解:把文字调亮往往会把色推到色盲不安全的方向,改成"把背景调暗"经常能在同色相下同时保住两边。想单独看某对色在各种色觉下的样子,可以配色盲模拟器一起用。

修完别忘了等级、格式和后续

最后几条实务提醒。第一,先按 WCAG 2.x 过,APCA 这类 WCAG 3 草案指标拿来当第二意见就好,目前官司、合同、审计认的还是 WCAG 2 比值。第二,输入色值时十六进制、rgb()、hsl()、oklch() 和英文色名都能用,要在格式之间换算,手边备一个颜色转换器会顺很多。第三,对比度过了不等于整站无障碍,键盘导航、焦点管理、屏读语义、别让颜色单独承载意义,这些都还得另外查。

把"差一点点到 4.5:1"这种问题,从"要不要重做配色"降级成"明度往下挪一格",修复的心理门槛会低很多。色相不动,品牌还在,标准也过了,三件事可以同时成立。

---

Made by Toolora · Updated 2026-06-13