WCAG 对比度
颜色Web 内容无障碍的文本对比标准
WCAG(Web Content Accessibility Guidelines,W3C)要求正文文本对比度至少 4.5:1、大号文本 3:1(AA 级,WCAG 2.1,2018),对比度由前景/背景色的相对亮度公式计算。
标准脉络
WCAG 1.0 发布于 1999 年,2.0 于 2008 年成为 ISO/IEC 40500:2012 国际标准,现行广泛引用的是 2.1(2018)与 2.2(2023)。对比度要求位于成功准则 1.4.3(AA 级 4.5:1 / 大文本 3:1)与 1.4.6(AAA 级 7:1 / 4.5:1);"大文本"指 18pt(24px)常规或 14pt bold(18.66px)。
对比度怎么算
先把 sRGB 分量线性化(去 gamma),按 L = 0.2126R + 0.7152G + 0.0722B 加权得相对亮度(权重出自人眼对绿光最敏感的实验),对比度 = (L亮 + 0.05) / (L暗 + 0.05),取值 1:1 到 21:1。纯黑对纯白即 21:1。注意 HSL 的 L 不等于感知亮度,浅色 HSL 配色照样可能不达标。
落地建议
灰字白底是重灾区:#999 在白底上仅 2.85:1,不达标;正文至少用 #767676(4.54:1)。按钮/输入框边框与背景之间也要求 3:1(1.4.11 非文本对比)。设计系统应把通过 AA 的颜色组合写进 token,而不是逐案补救。