色彩对比度

您为应用界面选择的颜色会影响用户阅读和理解内容的难易程度。鲜明的色彩对比可让文字和图片更易于阅读和理解。

除了对有不同程度视力损害的用户有益之外,足够的色彩对比度还可以帮助所有用户在极端光照条件(例如阳光直射或低亮度显示屏)下查看设备上的界面。

实施步骤

在实现应用的界面时,请为背景色和前景色指定足够的色彩对比度。

“对比度”是指显示屏上两种相邻颜色之间的亮度或发出光线的强度的差异计算值。这个比值的范围在 1 到 21 之间(通常写为 1:1 到 21:1);该值越大,则对比度越高。很多工具都可以用来计算两种相邻颜色的对比度,比如色彩对比度计算器

在使用 TextView 显示文字时,请通过 android:textColorandroid:background 为前景色和背景色指定较高的对比度。使用 Compose 中的文字功能时,请使用颜色参数和 Modifier.background 为前景色和背景色指定较高的对比度。

W3C 建议

  • 对于较小字体(小于 18 磅的常规字体或 14 磅的加粗字体),指定至少 4.5:1 的对比度
  • 对于较大字体(18 磅及以上的常规字体或 14 磅及以上的加粗字体),指定至少 3.0:1 的对比度

关于色彩对比度的注意事项:

  • 使用 ImageView 或 Image 渲染图片内容或图像时,请确保前景色和背景色的对比度达到或超过建议的对比度。

  • 对比度的衡量依据是元素叠放在其他元素之上时,其前景和背景的表现颜色。如果以 ARGB 格式(以 #AARRGGBB 表示的十六进制值)指定颜色,则需要注意的是,非不透明颜色(阿尔法通道值低于 255)会与呈现在它们下方的内容混到一起,因此可能呈现不同的表现颜色。
  • 字体平滑和反锯齿功能会影响某些内容的表现颜色,尤其是笔画较细的内容。为了提高可读性,请选择对比度较高的颜色组合或增加内容的笔画宽度值。

设计

在设计界面时,请考虑为相邻颜色选择色彩对比度足够的颜色。

  • 对于具体的文字和图标,请遵循 W3C 指南建议的最低对比度
  • 考虑加入高对比度主题背景选项,或允许用户选择主要内容的颜色

有关详情,请参阅 Material Design 无障碍色彩和对比度指南

测试

要手动检查应用中的色彩对比度,请执行以下操作:

  1. 打开应用。
  2. 截取一张屏幕截图。
  3. 使用图片查看或编辑软件,通过用“取色器工具”从屏幕截图中提取明显的颜色样本。
  4. 使用对比度计算器确定相邻颜色的对比度。
  5. 如果对比度低于 W3C 指南中建议的值,则不妨提高色彩对比度以改善界面。

Android 的自动化测试工具能够检测出很多色彩对比度问题。您也可以考虑使用 Android 版无障碍功能扫描仪对设备上的应用进行手动测试。要实现自动化测试,请在 EspressoRobolectric 中开启无障碍检查功能。

搜索
清除搜索内容
关闭搜索框
主菜单
7740186789715750116
true
搜索支持中心
true
true
true
true
true
717068
false
false