色彩对比度
背景
您为应用界面选择的颜色会影响用户阅读和理解的难易程度。足够的色彩对比度可让文字和图片更易于阅读和理解。
除了对有不同程度视觉障碍的用户有益之外,足够的色彩对比度还可以帮助所有用户在极端光照条件(例如阳光直射或低亮度显示屏)下查看设备上的界面。
实现
在实现应用的界面时,请为背景色和前景色指定足够的色彩对比度。
“对比度”是指显示屏上两种相邻颜色之间的亮度或发出光线的强度的差异计算值。这个比值的范围在 1 到 21 之间(通常写为 1:1 到 21:1);该值越大,则对比度越高。很多工具都可以用来计算两种相邻颜色的对比度,比如色彩对比度计算器。
在使用 TextView
显示文字时,请使用 android:textColor
和 android:background
为前景色和背景色定义较高的对比度。W3C 建议:
- 对于较小字体(小于 18 磅的常规字体或 14 磅的加粗字体),指定至少 4.5:1 的对比度
- 对于较大字体(18 磅及以上的常规字体或 14 磅及以上的加粗字体),指定至少 3.0:1 的对比度
关于色彩对比度的注意事项:
- 当使用
ImageView
呈现图形内容或图标时,请确保前景色和背景色的对比度达到或超过建议比值。 - 如果某个元素叠放在其他元素之上,则对比度的衡量依据是该元素前景和背景的表现颜色。如果以 ARGB 格式(以 #AARRGGBB 表示的十六进制值)指定颜色,则需要注意的是,非不透明颜色(阿尔法通道值低于 255)会与呈现在它们下方的内容混到一起,因此可能呈现不同的表现颜色。
- 字体平滑和反锯齿功能会影响某些内容的表现颜色,尤其是笔画较细的内容。为了提高可读性,请选择对比度较高的颜色组合或增加内容的笔画宽度值。
设计
在设计界面时,请考虑为相邻颜色选择色彩对比度足够的颜色。
- 对于具体的文字和图标,请遵循 W3C 指南建议的最低对比度
- 考虑加入高对比度主题背景作为一个选项,或允许用户选择主要内容的颜色
有关详情,请参阅 Material Design 无障碍色彩和对比度指南。
测试
要手动检查应用中的色彩对比度,请执行以下操作:
- 打开应用。
- 截取一个屏幕截图。
- 使用图片查看或编辑软件中的“拾色器工具”,提取屏幕截图中颜色的表现颜色样本。
- 使用对比度计算器确定相邻颜色的对比度。
- 如果对比度低于 W3C 指南中建议的值,则不妨提高色彩对比度以改善界面。
Android 的自动化测试工具能够检测出很多色彩对比度问题。不妨考虑使用 Android 版无障碍功能扫描仪对设备上的应用进行人工测试。要实现自动化测试,请在 Espresso 和 Robolectric 中开启无障碍检查功能。