先确认测量的对象
输入文字色和实际背景色,使用三位或六位 HEX。本工具按不透明 sRGB 颜色计算;透明色、背景图片和渐变需要先确定文字所在位置的实际合成背景,不能只拿其中一个色值代替。
结果检查这组颜色的文本对比度条件,不表示整个页面达到 WCAG 等级。字号、字体、交互状态和其他可访问性要求仍需要在实际页面上检查。
比例怎样计算
每个 8 位颜色通道除以 255 得到 c。若 c ≤ 0.04045,则线性值为 c ÷ 12.92;否则为 ((c + 0.055) ÷ 1.055) 的 2.4 次方。相对亮度 L = 0.2126R + 0.7152G + 0.0722B,R、G、B 使用上述线性值。
对比度 = (较亮的 L + 0.05) ÷ (较暗的 L + 0.05)。黑白得到 21:1;相同颜色得到 1:1。交换前景与背景不会改变比例,但会改变页面观感。
别把四舍五入当作通过
普通文字的 AA 条件是至少 4.5:1,AAA 是至少 7:1;大字分别是至少 3:1 和 4.5:1。大字指至少 18pt 的文字,或至少 14pt 的粗体文字,不能把普通小字套用大字阈值。
#777777 在白底上的对比度约为 4.478:1,所以没有达到普通文字 AA 的 4.5:1 条件。即使某个界面把它显示成 4.5,也不能按显示值判定。本站显示三位小数,条件判断使用完整计算值。
把颜色对放回实际界面
预览仅展示输入颜色,采用 16px 正文和 24px 标题。先在目标页面核对实际文字色、背景、字号和粗细,再检查普通、悬停、焦点等状态;不要只检查设计稿中最好看的一组颜色。
逐步加深文字或调亮背景后重新计算,再查看真实设备上的字形和阅读体验。这里的颜色对比度检测不测色盲辨识、图标语义或完整页面合规;保留颜色值和核验位置,便于后续复核。