颜色和对比度无障碍功能

您可能会认为,所有人对颜色或文本可读性的感知都与您相同。我们感知颜色的方式可能取决于环境(光线昏暗或明亮)和视力。您或您的用户可能属于数百万色盲或弱视人群。

为了支持有各种视觉障碍的用户,WAI 团队创建了一个色彩对比度公式,以确保文字和背景之间有足够的对比度。遵循这些颜色对比度后,中度弱视用户无需使用对比度增强辅助技术即可阅读背景上的文字。

请注意图 1 中显示的对比度差异。

比较四种不同的对比度,从最高对比度到最低对比度。
图 1. 与背景的对比度较低的文字更难阅读。

4.5:1 的对比度是《网络内容无障碍指南》(WCAG) 2.0 设置的最低要求。之所以选择此比率,是因为它可弥补视力障碍用户经常遇到的对比度敏感度下降问题,相当于大约 20/40 的视力。

再次强调,4.5:1 只是最低标准。为了支持低视力用户或其他色盲用户,请达到 AAA 级标准,并创建对比度为 7:1 的内容。

您可以使用开发者工具中的 Lighthouse 无障碍功能审核来检查色彩对比度。

色彩对比度审核输出的屏幕截图。
图 2. Lighthouse 无障碍功能报告中显示的色彩对比度不足警告。

高级感知对比度算法

高级感知对比度算法 (APCA) 是一种基于现代色彩感知研究来计算对比度的方法。

与 WCAG 的 AA 级和 AAA 级相比,APCA 更依赖于上下文。

在此模型中,对比度是根据以下特征计算的:

  • 空间属性(字体粗细和文字大小)
  • 文字颜色(文字与背景之间的感知亮度差异)
  • 背景信息(环境光、周围环境和文本的预期用途)

Chrome 包含一项实验性功能,可使用 APCA 替换 AA/AAA 对比度指南

Chrome 中 APCA 功能的输出结果的屏幕截图。
图 3.APCA 对比度报告。

使用多种方式(而不仅仅是颜色)传达重要信息

表单,其中一个电话号码以红色下划线突出显示,表示该电话号码不正确。
图 4.

在向用户传达重要信息时,除了视觉提示之外,还应使用文字或替代文本。视觉提示包括颜色、图案、图片、字体样式和方向性语言。

例如,您可能有一个联系表单,其中会以红色下划线标记无效的输入内容。这种颜色指示不会告知屏幕阅读器或色觉障碍用户某些功能无法正常运行。用户可能会纳闷为什么表单提交不起作用,然后放弃。

一个表单,其中包含一个以红色下划线标记的错误电话号码和一条错误消息。
图 5. 此错误消息可确保所有用户都知道存在错误以及如何修复该错误。

请务必以多种方式提醒用户具体错误。例如,您可以添加一条错误消息,说明特定输入无效以及原因。您还可以添加帮助文本,说明正确的输入内容应是什么样的。

您仍然可以红色下划线标记无效输入,只要有其他非视觉提示即可。

如果您在界面中大量使用颜色,可以在 Chrome 开发者工具中发现对比度问题。

调高对比度和反转颜色

对于低视力人士,高对比度模式有助于更轻松地浏览网页上的内容。您可以通过几种方式设置高对比度。

macOSWindows 都提供了提高整个操作系统对比度的方法。

用户还可以选择反转前景色和背景色(例如在 macOS 上),这对于不支持深色模式的网站和应用尤其有用。

作为开发者,您可以开启这些设置并手动验证可用性,以确保界面仍然可见且可用。

例如,导航栏可以使用细微的背景颜色来指示所选的页面。如果您在高对比度模式下查看,这种细微差别会完全消失,读者也无法了解哪个页面处于活动状态。

屏幕截图:高对比度模式下的导航栏,其中活动标签页难以辨认
图 6. 在高对比度模式下,细微的颜色对比可能无法显示。

如果您达到 AA 级或更高级别的对比度,那么当颜色反转或采用高对比度时,您的内容仍应能正常显示。不过,仍值得进行测试,以确保体验符合预期。