颜色对比度:为什么四舍五入后的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,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
两种颜色的结果不能证明整个页面符合无障碍要求。还需检查悬停、焦点、错误、禁用状态,两种主题、透明度、渐变和图片背景。同时检查字号、键盘操作及非文字指示,配合明确的标签,避免只靠颜色传达结果。
查看数据
- RGB 119,119,119
- #777777
- RGB 255,255,255
- #FFFFFF
- 结果
- 4.478089 : 1
核对事项与适用范围
两种颜色的结果不能证明整个页面符合无障碍要求。还需检查悬停、焦点、错误、禁用状态,两种主题、透明度、渐变和图片背景。同时检查字号、键盘操作及非文字指示,配合明确的标签,避免只靠颜色传达结果。