如果您有良好的视力，可能会认为每个人都能看清颜色或文本的易读性，和您一样。当然事实并非如此。正如您可以想象的，一些人能看得懂的颜色组合对于其他人来说是困难或不可能的。这通常是由色彩对比度造成的，色彩对比度是指前景色和背景色的亮度之间的关系。当颜色相似时，对比度较低；当颜色不同时，对比度较高。
WebAIM 指南建议为所有文本使用 4.5:1 的 AA（最低）对比度。 超大文本（比默认正文文本大 120-150%）也存在例外情况，此时宽高比可降至 3:1。请注意此处所示对比度的差异：
我们之所以为级别 AA 选择 4.5:1 的对比度比率，是因为该比率可以补偿视力损害相当于大约 20/40 视力的用户通常遇到的对比度灵敏度损失。20/40 是 80 岁左右人群的典型视敏度。对于有视力障碍或色觉缺陷的用户，我们可以将正文文本的对比度提高到 7:1。
您可以使用 Lighthouse 中的无障碍功能审核来检查色彩对比度。 若要生成报告，请执行以下操作：
- 打开开发者工具。
- 点击审核。
- 选择 无障碍功能。
Chrome 还包含一项实验性功能，可帮助您检测网页上所有低对比度文本。您还可以使用无障碍颜色建议来修正低对比度文字。
如需查看更完整的报告，请安装无障碍功能分析扩展程序。 其 Fastpass 报告包含未通过色彩对比度检查的所有元素的详细信息。
高级感知对比算法 (APCA)
高级感知对比度算法 (APCA) 是一种基于颜色感知的现代研究计算对比度的新方法。
与 AA 和 AAA 准则相比，APCA 更具体地取决于上下文。
对比度的计算依据如下：
- 空间属性（字体粗细和文字大小）
- 文本颜色（文本和背景之间的感知亮度差异）
- 背景信息（环境光、周围环境和文字的预期用途）
Chrome 包含一项实验性功能，可将 AA/AAA 对比度指南替换为 APCA。
不要仅通过颜色来传达信息
全球大约有 3.2 亿人患有色觉缺陷。 大约每 12 名男性和 200 名女性中就 1 名患有某种形式的色盲，这意味着大约有 5％ 的用户不会以您预期的方式来体验您的网站。单纯依靠颜色来传达信息会推向不可接受的水平。
例如，在输入表单中，电话号码可能会带有红色下划线，以表示该电话号码无效。对于色觉障碍的用户或屏幕阅读器用户，该信息的传达效果不佳或根本无法传达。因此，您应始终尝试提供多种途径供用户访问关键信息。
WebAIM 核对清单在第 1.4.1 节中指出，“不应将颜色用作传达内容或区分视觉元素的唯一方法”。该部分还指出，除非链接满足特定的对比度要求，否则“不应仅使用颜色区分文本周围的链接”。此核对清单建议添加其他指示器（例如下划线）（使用 CSS text-decoration 属性）来指明链接何时处于活动状态。
修复上一个示例的基本方法是向该字段添加一条额外的消息，告知其无效并说明原因。
在构建应用时，请牢记这些要点，并留意您可能过于依赖颜色来传达重要信息的区域。
如果您想了解网站在不同用户眼中的样子，或者您非常依赖在界面中使用颜色，可以使用开发者工具来模拟各种形式的视觉障碍。Chrome 包含模拟视觉缺陷功能。如需访问该工具，请打开开发者工具，然后在抽屉式导航栏中打开渲染标签页。 您可以在其中模拟以下颜色缺陷：
- 红色盲：无法感知任何红光。
- 绿色盲：无法感知任何绿光。
- 蓝色盲：无法感知任何蓝光。
- 全色盲：无法感知除灰色以外的任何颜色（极为罕见）。
高对比度模式
通过高对比度模式，用户可以反转前景色和背景色，这通常有助于让文本更加突出。对于有视力障碍的用户而言，高对比度模式可以大大简化网页内容的浏览过程。您可以通过以下几种方式在计算机上设置高对比度：
Mac OSX 和 Windows 等操作系统提供了高对比度模式，您可以在系统级为所有内容启用该模式。
一种实用的做法是开启高对比度设置，并验证应用中的所有界面是否仍然可见和可用。
例如，导航栏可能会使用细微的背景颜色来指示选择的是哪个页面。如果您在高对比度扩展程序中查看，这种细微差别会完全消失，并且读者随后会知道哪个页面处于活动状态。
同样，在前面的示例中，无效电话号码字段上的红色下划线可能以蓝绿难以区分。
如果您满足前面介绍的对比度，那么在支持高对比度模式方面应该没有问题。不过，为了更加安心无忧，不妨考虑安装高对比度 Chrome 扩展程序，并检查一下您的页面，看看一切是否按预期运行和显示。