颜色和对比度辅助功能
如果您有良好的视力，很容易假设每个人都能像您一样感知颜色或阅读文本 — 当然，事实并非如此。
您可以想象到，一些颜色组合对于某些人来说很容易区分，而对另一些人则很难或无法识别。这通常归结于颜色对比度，即前景色和背景色亮度之间的关系。当两种颜色相似时，对比度低；当两种颜色不同时，对比度高。
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 扩展程序并检查一遍页面，以确认一切正常并按预期显示。