MyCalCute
安装
科学

颜色对比度:为什么四舍五入后的4.5仍可能不达标

比较未经舍入的sRGB对比度,区分两种颜色的检查结果与整个界面的无障碍情况。

方法

对比度描述文字与实际背景之间的相对亮度差异。请检查徽标内部真正绘制出来的前景色和背景色。即使周围的结果面板很暗,浅色徽标上的浅色文字仍可能难以阅读。

对于不透明sRGB颜色,先将红、绿、蓝通道归一化并线性化,再计算相对亮度。用较亮颜色的亮度加0.05,除以较暗颜色的亮度加0.05。黑白组合得到21:1,相同颜色得到1:1。计算器从整数RGB通道完成这一转换。

门槛附近的两种灰色白底上的RGB 119,119,119约为4.478089:1,而RGB 118,118,118约为4.542225:1。保留一位小数时,两者都可能显示4.5,但只有后者达到普通文字AA等级的4.5:1门槛。判断是否达标应使用未经舍入的数值。门槛附近的两种灰色RGB 119,119,1194.4781 :1RGB 118,118,1184.5422 :1MyCalCute.com
门槛附近的两种灰色

白底上的RGB 119,119,119约为4.478089:1,而RGB 118,118,118约为4.542225:1。保留一位小数时,两者都可能显示4.5,但只有后者达到普通文字AA等级的4.5:1门槛。判断是否达标应使用未经舍入的数值。

查看数据
RGB 119,119,119
4.478089 :1 4.478089… < 4.5
RGB 118,118,118
4.542225 :1 4.542224… > 4.5

计算示例

白底上的RGB 119,119,119约为4.478089:1,而RGB 118,118,118约为4.542225:1。保留一位小数时,两者都可能显示4.5,但只有后者达到普通文字AA等级的4.5:1门槛。判断是否达标应使用未经舍入的数值。

满足字号和字重定义的大号文字,AA门槛是3:1。徽标很宽,并不意味着其中的文字就是大号文字。普通文字的AAA门槛为7:1。解读通过与否之前,应先确定适用的文字类别。

⁦L = 0.2126 R + 0.7152 G + 0.0722 B (linear sRGB)⁩

⁦contrast = (lighter L + 0.05) / (darker L + 0.05)⁩

⁦RGB(119,119,119) on white ≈ 4.478089 : 1⁩

⁦RGB(118,118,118) on white ≈ 4.542225 : 1⁩

灰色与白色的组合两种颜色的结果不能证明整个页面符合无障碍要求。还需检查悬停、焦点、错误、禁用状态,两种主题、透明度、渐变和图片背景。同时检查字号、键盘操作及非文字指示,配合明确的标签,避免只靠颜色传达结果。 概念示意图,不按比例绘制。灰色与白色的组合Aa0123456789RGB 119,119,119#777777RGB 255,255,255#FFFFFF结果4.478089 : 1MyCalCute.com
灰色与白色的组合

两种颜色的结果不能证明整个页面符合无障碍要求。还需检查悬停、焦点、错误、禁用状态,两种主题、透明度、渐变和图片背景。同时检查字号、键盘操作及非文字指示,配合明确的标签,避免只靠颜色传达结果。

查看数据
RGB 119,119,119
#777777
RGB 255,255,255
#FFFFFF
结果
4.478089 : 1

核对事项与适用范围

两种颜色的结果不能证明整个页面符合无障碍要求。还需检查悬停、焦点、错误、禁用状态,两种主题、透明度、渐变和图片背景。同时检查字号、键盘操作及非文字指示,配合明确的标签,避免只靠颜色传达结果。

相关计算器

参考来源: W3C WAI — Understanding Contrast Minimum