对比度怎么算:先把 sRGB 的 R/G/B 反伽马还原成线性光强,按 L = 0.2126R + 0.7152G + 0.0722B 得到相对亮度(绿色权重最高,因为人眼对绿最敏感),再用 (亮 + 0.05) / (暗 + 0.05) 得到比值。范围是 1:1(同色)到 21:1(纯黑配纯白)。

4.5:1 的由来:WCAG 认为正常视力者需要约 3:1,而中度低视力(约 20/40 视力,常见于老花与轻度白内障)需再放宽 1.5 倍,3 × 1.5 = 4.5。AAA 的 7:1 对应视力 20/80 左右。这些是有依据的经验值,不是拍脑袋定的整数。

「大字」的界线:18pt 以上,或 14pt 以上的粗体。换算成 CSS 像素是 24px 与 18.66px 粗体。字大了笔画就粗,所需对比度可以降到 3:1。

UI 组件也要 3:1:WCAG 2.1 新增的 1.4.11,按钮边框、输入框描边、图标这类「不是文字但要看清」的东西,与相邻颜色至少 3:1。很多设计里浅灰描边配白底只有 1.5:1,是常见的不达标点。

这个公式有已知缺陷,得说清楚:WCAG 2 的公式在深色背景下会高估可读性——同样算出 4.5:1,白底黑字往往比黑底白字明显更好读;它也完全不考虑字重与字号(除了粗暴的大字分界)。W3C 正在为 WCAG 3 研究 APCA 算法来解决这些问题,但尚未定稿。所以:本页给的是当前法规与验收实际采用的 WCAG 2.1 结果,深色主题下建议在此基础上再留些余量,别卡着 4.5 交付。

自动修正做了什么:保持色相与饱和度不变,只二分调整明度,找出最接近原色且刚好达到 4.5:1 的那个颜色——所以改完通常还是"同一个颜色",只是深浅变了。若该色相在此背景上无论深浅都过不了,会直接说明,不会硬凑一个。