颜色对比度怎么算才达标:WCAG 对比度 4.5:1 实战指南

页面颜色好不好看是审美问题,但文字能不能被看清是合规问题。很多设计稿过了视觉评审,真上线却被无障碍审计退回,原因往往只有一条:颜色对比度不够。这篇把 WCAG 的几个硬门槛、背后的算法,以及前景背景该怎么搭,一次讲透。

WCAG 对比度的四档硬门槛

WCAG 2.2 给文字定了四个数字,记住它们基本就够用了。

普通正文:对比度至少 4.5:1(成功标准 1.4.3,AA 级)。
大字:至少 3:1(同样属于 1.4.3,AA 级)。这里的"大字"指常规字重 ≥ 18 点(约 24px),或加粗 ≥ 14 点(约 18.66px,font-weight ≥ 700)。
AAA 普通正文:7:1(成功标准 1.4.6)。
AAA 大字:4.5:1(同属 1.4.6)。

还有一条容易被忘掉的 1.4.11(非文本对比,AA 级):按钮边框、表单边线、聚焦圈、承载意义的图标,跟相邻背景的对比度要 ≥ 3:1。也就是说哪怕你全部文字都过了,一个 2px 的浅色聚焦圈照样能让你不过审。

合同和官司里最常被引用的是 AA 级的 4.5:1,这是绝大多数项目的及格线。AAA 是加分项,不是强制项,通常只对长文阅读类产品才特意去够。

对比度不是简单的颜色相减,它走的是相对亮度。WCAG 2.x 的参考算法分三步:

第一步,把 sRGB 每个通道从 0~255 转成 0~1 的线性光值。当 V/255 ≤ 0.03928 时取 V/255 ÷ 12.92,否则取 ((V/255 + 0.055) / 1.055) 的 2.4 次方。

第二步,合成相对亮度 L = 0.2126·R + 0.7152·G + 0.0722·B。绿色权重最大,是因为人眼对绿光最敏感。

第三步,比值 =(亮的 L + 0.05)/(暗的 L + 0.05)。那个 +0.05 是为了模拟现实环境里的杂散光。所以黑配白给出理论最大值 21:1,同色配同色是最小的 1:1。

理解了这套算法,你就明白为什么单看色相判断对比度会翻车:两个看着差别很大的颜色,如果相对亮度接近,比值照样很低。

举个我自己常踩的例子。灰阶 slate-500(#64748B)配纯白底,凭眼睛看灰底白字"应该够清楚吧",但放进检测器,读出来是 4.76:1。这意味着它作为普通正文刚好过 AA(4.5:1),却离 AAA 的 7:1 差得远。

再把同一个灰放到更浅的 #94A3B8 区域上,比值直接掉到 2.8:1,普通正文不过,大字 3:1 也擦边没过。同样一个前景色,背景换一下,合规结论就完全相反。这就是为什么对比度只能靠算,不能靠感觉。

把前景和背景两个 HEX 丢进颜色对比度检测器,它会立刻给出精确比值,同时对五档标准逐一判定过还是不过,并用这对颜色实时渲染一段标题加正文,让你既看数字又看实际观感。

知道了门槛和算法,搭配色就有了方向。

亮度差是关键,不是色相差。想拉高对比度,最快的办法是把前景往背景亮度的对立面推:浅底就把字压深,深底就把字提亮。色相和饱和度可以保持不动,品牌色不会被改飞。

深色模式要额外小心。WCAG 2.x 的比值是对称的,前景背景对调比值不变,但它低估了人眼在深底浅字下的吃力程度。#38BDF8 配 #0F172A 能报出 7.9:1,数字很漂亮,实际看还是有点飘和闪。所以深色模式定稿前,最好再用 APCA 这类算法肉眼复核一遍。

最后记住一句:过了对比度不等于无障碍。如果信息只靠颜色传达(红表示错误、绿表示成功),色盲用户照样读不懂。这种情况要给颜色配上图标、文字或位置。判断色相能不能被区分,可以配色盲模拟器一起用,把对比度和色相两关都过了,才算真正把可读性做扎实。

对比度这关其实不难:正文盯住 4.5:1,大字 3:1,要做 AAA 就 7:1,非文本元素别忘了 3:1。算法已经标准化,你要做的只是把每对前景背景色都过一遍,把擦边的那几对推到安全线以上。颜色清楚了,文字才真正被人读到。

Made by Toolora · Updated 2026-06-13