您可能会认为每个人对颜色的感知或文本的易读性都与您相同。我们感知颜色的方式可能取决于我们的环境（光线暗淡或明亮）和我们的视觉能力。您或您的用户可能是数百万患有色盲或低视力的人之一。
为了支持有各种视觉障碍的人，WAI 小组创建了一个颜色对比度公式，以确保文本及其背景之间存在足够的对比度。当遵循这些颜色对比度比率时，中度低视力的人可以在没有对比度增强辅助技术的情况下阅读背景上的文本。
请注意图 1 中显示的对比度比率的差异。
4.5:1 的对比度比率是 Web 内容辅助功能指南 (WCAG) 2.0 设置的最低要求。选择此比率是因为它可以补偿视力丧失用户经常经历的对比度敏感度损失，相当于大约 20/40 的视力。
同样，4.5:1 只是最低限度。为了支持低视力或其他色盲用户，请达到 AAA 级别并创建对比度为 7:1 的内容。
您可以使用 DevTools 中的 Lighthouse 辅助功能审核来检查您的颜色对比度。
高级感知对比度算法
高级感知对比度算法 (APCA) 是一种基于现代颜色感知研究计算对比度的方法。
与 WCAG 的 AA 和 AAA 级别相比，APCA 更依赖于上下文。
在此模型中，对比度根据以下特征计算
- 空间属性（字体粗细和文本大小）
- 文本颜色（文本和背景之间感知的亮度差异）
- 上下文（环境光、周围环境和文本的预期用途）
Chrome 包含一个实验性功能，用于将 AA/AAA 对比度比率指南替换为 APCA。
使用颜色以外的方式传达重要信息
每当您向用户传达重要信息时，除了视觉提示外，还要依靠文本或替代文本来共享重要信息。视觉提示包括颜色、图案、图像、字体样式和方向性语言。
例如，您可能有一个联系表单，通过用红色下划线标出无效输入来指示它们。这种颜色指示不会告诉屏幕阅读器或有色觉障碍的用户某些内容不起作用。用户可能会想知道为什么表单提交不起作用并放弃。
确保以多种方式提醒用户注意特定错误。例如，您可以添加错误消息以声明特定输入无效以及原因。您还可以添加帮助文本，说明正确的输入应是什么样子。
您仍然可以用红色下划线标出无效输入，只要有额外的非视觉提示即可。
如果您在界面中大量使用颜色，您可以发现 Chrome DevTools 中的对比度问题。
增加对比度和反转颜色
对于低视力人士，高对比度模式可以让他们更轻松地浏览页面上的内容。有几种设置高对比度的方法。
macOS 和 Windows 都提供了增加整个操作系统对比度级别的方法。
用户还可以选择反转前景色和背景色（例如在 macOS 上），这对于不支持深色模式的网站和应用程序特别有用。
作为开发者，您可以进行测试，以确保您的界面在打开这些设置并手动验证可用性后仍然可见和可用。
例如，导航栏可能会使用微妙的背景颜色来指示选择了哪个页面。如果您在高对比度模式下查看它，这种微妙之处会完全消失，随之消失的是读者对哪个页面处于活动状态的理解。
如果您达到 AA 级或更高级别的对比度，那么当颜色反转或处于高对比度时，您的内容应该仍然可以按预期工作。但是，仍然值得测试以确保体验符合预期。