WCAG 前景/背景对比度
按 sRGB 相对亮度计算对比度;透明前景先按你选择的不透明背景合成,再给出普通/大字 AA 与 AAA 判断及前提。
输入与参数
foreground— 前景颜色background— 实际背景颜色(必须不透明)alpha— 前景不透明度 0–100(滑条或键盘)largeText— 按大字标准判断(≥24px 常规 / ≥18.66px 粗体)
真实示例
foreground=#000000, background=#ffffff, alpha=100 → 21:1;同色 #176b50/#176b50 → 1:1;alpha=50 → 合成 #808080,约 3.98:1
→ Contrast ratio: 21.00:1 · 普通 AA pass · 普通 AAA pass;alpha=50 → 3.98:1 · 普通 AA fail · 大字 AA pass
限制与失败处理
使用 WCAG 2.1/2.2 的 sRGB 相对亮度公式,不评估字号本身、字体、抗锯齿、图片/渐变背景、半透明叠层或显示器色彩管理;背景必须不透明。结果只能作为设计参考,不能替代在真实设备上的复核。
FAQ
普通文字与大字的标准是什么?
普通文字 AA ≥4.5:1、AAA ≥7:1;大字 AA ≥3:1、AAA ≥4.5:1。大字指 ≥18pt(24px)常规或 ≥14pt(约 18.66px)粗体。
半透明文字怎么算?
先按你填写的 alpha 把前景与所选不透明背景做 source-over 合成,再用合成后的实色计算亮度。背景本身透明会报 TRANSPARENT_BACKGROUND。
这个结论有哪些前提?
前提是纯色不透明文字放在纯色不透明背景上;不适用于文字压在图片、渐变、半透明叠层,抗锯齿或显示器色彩管理差异也不计入。