颜色和对比度

您是否曾尝试在屏幕上阅读文字，但发现由于配色方案而难以阅读，或者在非常明亮或昏暗的环境中难以看清屏幕？或者，您可能患有更严重的色觉问题，例如3 亿色盲患者或2.53 亿低视力患者？

作为设计师或开发者，您需要了解人们如何感知颜色和对比度，无论这种感知是暂时性的、情境式的还是永久性的。这有助于您更好地满足他们的视觉需求。

本模块将向您介绍一些无障碍颜色和对比度基础知识。

感知颜色

您是否知道，物体本身并没有颜色，而是会反射特定波长的光？当您看到颜色时，眼睛会接收并处理这些波长，然后将其转换为颜色。

在数字无障碍方面，我们会使用色调、饱和度和明度 (HSL) 来表示这些波长。HSL 模型是 RGB 颜色模型的替代方案，更贴近人类对颜色的感知方式。

色调是一种定性描述颜色的方式，例如红色、绿色或蓝色，其中每种色调在色谱上都有一个特定的位置，值范围为 0 到 360，红色为 0，绿色为 120，蓝色为 240。

饱和度是指颜色的强度，以百分比表示，范围为 0% 到 100%。饱和度为 100% 的颜色非常鲜艳，而饱和度为 0% 的颜色则为灰度或黑白。

明度是指颜色的明暗程度，以百分比表示，范围从 0%（黑色）到 100%（白色）。

衡量色彩对比度

为了帮助支持各种视觉障碍人士，WAI 组创建了一个色彩对比度公式，以确保文本与其背景之间存在足够的对比度。遵循这些颜色对比度建议后，中度低视力用户无需使用对比度增强辅助技术即可阅读背景上的文字。

查看采用鲜艳调色板的图片，并比较该图片在特定色盲患者眼中的效果。

左侧的图片显示了彩虹沙，颜色包括紫色、红色、橙色、黄色、浅绿色、浅蓝色和深蓝色。右侧是更明亮的多色彩虹图案。

绿色盲

绿色盲（也称为“第二色盲”）在男性中的发病率为 1% 至 5%，在女性中的发病率为 0.35% 至 0.1%。

绿色盲患者对绿光的敏感度较低。此色盲滤镜可模拟这种色盲类型可能呈现的效果。

红色盲

红色盲（俗称）在男性中的发生率为 1.01% 至 1.08%，在女性中的发生率为 0.02% 至 0.03%。

红色盲患者对红光的敏感度较低。此色盲滤镜可模拟这种色盲类型可能呈现的效果。

全色盲或单色视觉

全色盲或单色盲（或完全色盲）非常罕见。

患有全色盲或单色盲的人几乎无法感知红光、绿光或蓝光。此色盲过滤条件可模拟这种类型的色盲可能是什么样的。

计算颜色对比度

颜色对比度公式使用颜色的相对亮度来帮助确定对比度，对比度范围为 1 到 21。此公式通常简称为 [color value]:1。例如，纯黑色与纯白色之间的色彩对比度最高，为 21:1。

(L1 + 0.05) / (L2 + 0.05)
L1 is the relative luminance of the lighter color
L2 is the relative luminance of the darker colors

常规大小的文字（包括文字图片）必须达到 4.5:1 的色彩对比度，才能通过 WCAG 的最低色彩要求。大号文字和基本图标的色彩对比度必须达到 3:1。大号文字的特点是至少为 18pt / 24px 或 14pt/18.5px 的粗体文字。徽标和装饰性元素不受这些颜色对比度要求的约束。

幸运的是，您无需掌握高深的数学知识，因为有很多工具可以帮您计算颜色对比度。Adobe Color、色彩对比度分析器、Leonardo 和 Chrome 的开发者工具颜色选择器等工具可以快速告知您色彩对比度，并提供建议来帮助您创建最具包容性的颜色对和调色板。

使用颜色

如果没有良好的颜色对比度，文字、图标和其他图形元素就很难被发现，设计很快就会变得难以访问。但同样重要的是，您还需要注意屏幕上颜色的使用方式，因为您不能仅使用颜色来传达信息、操作或区分视觉元素。

例如，如果您说“点击绿色按钮继续”，但省略了按钮的任何其他内容或标识符，那么对于某些色盲人士来说，很难知道要点击哪个按钮。同样，许多图表和表格仅使用颜色来传达信息。添加其他标识符（例如图案、文字或图标）对于帮助用户了解内容至关重要。

以灰度模式查看数字商品是快速检测潜在颜色问题的好方法。

以颜色为重点的媒体查询

除了检查色彩对比度和屏幕上的颜色使用情况之外，您还应考虑应用越来越受欢迎且受支持的媒体查询，以便用户更好地控制屏幕上显示的内容。

例如，使用 @prefers-color-scheme 媒体查询，您可以创建深色主题，这有助于患有恐光症或对光敏感的人。您还可以使用 @prefers-contrast 构建高对比度主题，以帮助存在色觉缺陷和对比度敏感度问题的人群。

偏好的配色方案

借助媒体查询 @prefers-color-scheme，用户可以选择所访问网站或应用的浅色主题版本或深色主题版本。您可以更改浅色或深色偏好设置，然后前往支持此媒体查询的浏览器，查看此主题更改的实际效果。查看 Mac 和 Windows 的夜间模式说明。

比较浅色模式和深色模式。

偏好对比度

@prefers-contrast 媒体查询会检查用户的操作系统设置，以确定是否开启了高对比度。您可以更改对比度偏好设置，然后前往支持此媒体查询的浏览器（Mac 和 Windows 对比度模式设置），查看此主题更改的实际效果。

比较常规对比度和高对比度。

分层媒体查询

您可以使用多个以颜色为重点的媒体查询，为用户提供更多选择。在此示例中，我们将 @prefers-color-scheme 和 @prefers-contrast 堆叠在一起。

比较颜色和对比度。