🌐 简体中文
使用指南 · 方法与边界

看起来够清楚的灰色文字,为什么仍可能没有达到对比度条件?

用黑白和 #777777 的边界算例理解文字对比度,区分普通文字、大字、显示舍入和实际页面核验。

内容核对:2026-10-08 · 编辑:本站维护者

先确认测量的对象

输入文字色和实际背景色,使用三位或六位 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 标题。先在目标页面核对实际文字色、背景、字号和粗细,再检查普通、悬停、焦点等状态;不要只检查设计稿中最好看的一组颜色。

逐步加深文字或调亮背景后重新计算,再查看真实设备上的字形和阅读体验。这里的颜色对比度检测不测色盲辨识、图标语义或完整页面合规;保留颜色值和核验位置,便于后续复核。

核对资料

链接用于核对技术定义;算例与操作建议由本站整理,不冒充实际项目测评。

返回工具,试一组参数