颜色和对比度辅助功能
如果您有良好的视力,很容易假设每个人都能像您一样感知颜色或阅读文本 — 当然,事实并非如此。
您可以想象到,一些颜色组合对于某些人来说很容易区分,而对另一些人则很难或无法识别。这通常归结于颜色对比度,即前景色和背景色亮度之间的关系。当两种颜色相似时,对比度低;当两种颜色不同时,对比度高。
WebAIM 准则建议所有文本的 AA(最低)对比度为 4.5:1。一个例外是非常大的文本(比默认正文文本大 120-150%),其对比度可以降至 3:1。注意下面显示的对比度的差异。
为 AA 级选择 4.5:1 对比度的原因是,它可以补偿视力只有大约 20/40 的视觉损伤用户通常会经历的对比灵敏度损失。据报道,20/40 通常是 80 岁人群的典型视力。对于低视觉障碍或色觉缺陷的用户,我们可以将正文文本的对比度提高到 7:1。
您可以使用 Lighthouse 中的 Accessibility 审计来检查颜色对比度。打开 DevTools,点击 Audits(审计),然后选择 Accessibility(辅助功能)运行报告。
Chrome 还包括一项实验性功能,可帮助您检测页面上的所有低对比度文本。您还可以使用无障碍颜色建议来修复低对比度文本。
要获得更完整的报告,请安装 Accessibility Insights 扩展。 Fastpass 报告中的一项检查是颜色对比度。您将获得任何未通过审计的元素的详细报告。
高级感知对比度算法 (APCA) #
高级感知对比度算法 (APCA) 是一种基于现代色彩感知研究来计算对比度的新方法。
对比度的计算基于以下特征:
- 空间属性(字体粗细和文本大小)
- 文本颜色(文本和背景之间的感知亮度差异)
- 上下文(环境光、周围环境和文本的预期目的)
Chrome 包含一项实验性功能,可将 AA/AAA 对比度准则替换为 APCA。
不要只用颜色来传达信息 #
全世界大约 3.2 亿人有色觉缺陷。大约每 12 名男性和 200 名女性中就有 1 人患有某种形式的“色盲”;这意味着大约 1/20 或 5% 的用户无法按您预期的方式体验您的网站。当我们依靠颜色来传达信息时,这个数字会达到不可接受的水平。
例如,在输入表单中,电话号码可能带有红色下划线以表示其无效。但是对于有颜色缺陷或使用屏幕阅读器的用户来说,该信息并不能很好地传达。因此,您应该始终设法为用户提供多种途径来获取关键信息。
WebAIM 清单的第 1.4.1 节指出,“不应将颜色用作传达内容或区分视觉元素的唯一方法”,而且“不应只使用颜色来区分链接与周围文本”,除非它们满足特定对比度要求。该清单建议添加下划线等附加指示符(使用 CSS text-decoration
属性)来指示链接何时处于活动状态。
修正上一个示例的一个简单方法是向该字段添加一条附加消息,声明其无效以及原因。
在构建应用程序时,请牢记这些事项,并注意可能过于依赖颜色来传达重要信息的区域。
如果您对网站在不同人眼中的外观感到好奇,或者您在很大程度上依赖 UI 中的颜色使用,可以使用 DevTools 来模拟各种形式的视觉障碍,包括不同类型的色盲。Chrome 包括一个模拟视觉缺陷功能。要访问该功能,请打开 DevTools,然后打开抽屉中的 Rendering(渲染)选项卡,即可模拟以下颜色缺陷。
- 红色盲:无法感知任何红光。
- 绿色盲:无法感知任何绿光。
- 蓝色盲:无法感知任何蓝光。
- 全色盲:无法感知除灰色阴影之外的任何颜色(极其罕见)。

高对比度模式 #
高对比度模式允许用户反转前景色和背景色,这通常有助于更好地突出文本。对于低视觉障碍的人,使用高对比度模式可以更容易浏览页面上的内容。有几种方法可以在计算机上实现高对比度设置。
Mac OSX 和 Windows 等操作系统提供了高对比度模式,可以在系统级别为所有内容启用该模式。
一个有用的练习是打开高对比度设置并验证应用程序中的所有 UI 是否仍然可见和可用。
例如,导航栏可能只是轻微改变背景颜色来指示当前选择了哪个页面。如果在高对比度扩展中查看,这种细微差别就会完全消失,读者也无法了解到哪个页面处于活动状态。
同样,如果考虑上一课中的示例,无效电话号码字段上的红色下划线可能以难以区分的蓝绿色显示。
如果您达到了前面介绍的对比度准则,那么在支持高对比度模式方面应该没有问题。但是为了让您更安心,请考虑安装高对比度 Chrome 扩展程序并检查一遍页面,以确认一切正常并按预期显示。