颜色和对比度无障碍功能

您可能会认为,每个人对颜色或文本易读性的理解都和您一样。我们感知颜色的方式可能取决于环境(弱光或亮光)以及我们的视觉能力。您或您的用户可能就是数百万色盲或弱视人士中的一员。

为了为有各种视力障碍的人士提供支持,WAI 团队创建了一个色彩对比度公式,以确保文字与其背景之间存在足够的对比度。如果遵循这些色彩对比度,视障人士可以在没有对比度增强辅助技术的情况下阅读背景中的文字。

请注意图 1 所示对比度中的不同之处。

比较四种不同的对比度(从最高对比度到最低对比度)。
图 1. 如果文本与背景的对比度较低,则难以阅读。

《网络内容无障碍指南》(WCAG) 2.0 规定的对比度为 4.5:1 是最低要求。之所以选择这种配比,是因为它可以补偿视力受损用户经常遇到的对比度灵敏度损失,相当于大约 20/40 的视力。

同样,4.5:1 只是最小值。如需为弱视或其他色盲用户提供支持,请满足 AAA 级要求并创建对比度为 7:1 的内容。

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

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

高级感知对比算法

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

与 WCAG 的 AAAAA 级别相比,APCA 更依赖于上下文。

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

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

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

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

利用颜色以外的内容传达重要信息

表单包含错误的电话号码(用红色下划线标注)。
图 4.

无论何时向用户传达重要信息,在分享重要信息时,除了视觉提示之外,还需要依赖文本或替代文本。视觉提示包括颜色、图案、图片、字体样式和方向语言。

例如,您可能有一个联系表单,用红色下划线标注无效的输入内容。此颜色指示不会让屏幕阅读器或有色觉障碍的用户知道某些方面无法使用。用户可能想知道为什么表单提交无效,于是放弃了。

一个表单,包含用红色下划线标明错误电话号码和一条错误消息。
图 5. 错误消息可确保所有用户都知道出现错误知道解决方法。

请务必通过多种方式提醒用户该特定错误。例如,您可以添加错误消息,说明特定输入无效并说明原因。您还可以添加帮助文本,说明正确的输入内容。

您仍可为无效输入添加红色下划线,只要还有其他非可见提示即可。

如果您在界面中非常依赖颜色的使用,可以在 Chrome 开发者工具中发现对比度问题

提高对比度和反转颜色

对于弱视模式的用户而言,高对比度模式可以更轻松地浏览网页内容。您可以通过多种方式设置高对比度。

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

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

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

例如,导航栏可能会使用细微的背景颜色来指示选择的是哪个页面。如果您在高对比度模式下查看该页面,那么这部分细节会完全消失,并且随着时间的流逝,读者也会了解哪个页面处于活动状态。

处于高对比度模式下的导航栏的屏幕截图,其中活动标签页难以阅读
图 6. 在高对比度模式下,可能看不到细微的色彩对比度。

如果您达到 AA 或更高的对比度,当颜色反转或对比度较高时,内容应该仍然可以按预期运行。不过,为确保体验符合预期,仍值得进行测试。