颜色和对比度

您是否曾尝试过阅读屏幕上的文字，并且因为配色方案而难以阅读，或在非常明亮或弱光的环境中看不清屏幕？或者，也许您是有更永久性的色觉问题的人，例如估计有 3 亿人患有色盲或 2.53 亿弱视用户？

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

本单元将介绍一些易于使用的颜色和对比度基础知识。

感知颜色

您知道物体没有颜色，但能反射光的波长吗？当您看到颜色时，您的眼睛会接收和处理这些波长，并将其转换为颜色。

一只眼睛正在查看色轮。

对于数字无障碍功能，我们从色调、饱和度和亮度 (HSL) 的角度讨论这些波长。HSL 模型是 RGB 颜色模型的替代方案，更符合人类对颜色的感知。

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

饱和度是颜色的强度，以百分比（范围为 0% 到 100%）来表示。具有全饱和度 (100%) 的颜色将非常鲜明，而没有饱和度 (0%) 的颜色将是灰度或黑白色。

亮度是颜色的浅色或深色字符，以百分比（介于 0%（黑色）到 100%（白色）之间）进行测量。

测量色彩对比度

为了帮助支持各种视觉障碍的人，WAI 团队创建了一个色彩对比度公式，以确保文字与其背景之间存在足够的对比度。遵循这些颜色对比度时，视力适中的用户可以阅读背景中的文字，而无需借助对比度增强技术。

我们来看一下使用鲜艳色调的图片，并比较一下该图片与具有特定形式的色盲用户的图片的显示效果。

原来的彩虹沙。
照片由 Alexander Grey 拍摄，由 Unsplash 提供。
原始的彩虹图案。
照片由 Clark Van Der Beken 拍摄，选自 Unsplash 网站。

左侧图片显示了具有紫色、红色、橙色、黄色、湖水绿、浅蓝色和深蓝色这些颜色的彩虹沙。右侧是颜色更鲜艳的彩虹图案。

绿色盲

绿色盲人看到的彩虹色沙子。
绿色盲的人看到的彩虹图案。

绿色盲（通常称为“绿色盲”）发生于男性 1% 至 5%，女性为 0.35% 至 0.1%。

绿色盲患者对绿光的敏感度较低。此色盲滤镜可以模拟此类色盲可能是什么样子的。

红色盲

红色盲的人看到的彩虹色沙子。
红色盲的人看到的彩虹图案。

红色盲（通常称为“红盲”）发生于男性 1.01% 至 1.08%，女性为 0.02%。

红色盲的人对红光的敏感度下降。此色盲滤镜可以模拟此类色盲可能是什么样子的。

全色盲或单色盲

彩虹色的沙子，是全色盲的人看到的彩虹色。
全色盲的人看到的彩虹图案。

全色盲或单色盲（或完全色盲）的发生极少数。

全色盲或全色盲的人几乎无法感知红光、绿光或蓝光。此色盲滤镜可以模拟此类色盲可能是什么样子。

计算色彩对比度

颜色对比度公式使用颜色的相对亮度来帮助确定对比度，范围从 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、Color Contrast Analyzer、Leonardo 和 Chrome 开发者工具颜色选择器等工具可以快速判断色彩对比度并提供建议，帮助您打造最具包容性的色彩对和调色板。

使用颜色

如果没有良好的色彩对比度，文字、图标和其他图形元素将难以发现，设计可能很快就会变得无法访问。但也请务必注意如何在屏幕上使用颜色，因为您不能只使用颜色来传达信息、操作或区分视觉元素。

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

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

聚焦颜色的媒体查询

除了检查色彩对比度和屏幕上的颜色使用情况之外，您还应考虑应用日益流行且受支持的媒体查询，这些查询可让用户更好地控制屏幕上显示的内容。

例如，您可以使用 @prefers-color-scheme 媒体查询创建深色主题，这对恐惧症或对光敏感的用户很有帮助。您还可以使用 @prefers-contrast 构建高对比度主题，以支持色差和对比度灵敏度的用户。

首选配色方案

浏览器支持

  • 76
  • 79
  • 67
  • 12.1

来源

通过媒体查询 @prefers-color-scheme，用户可以选择他们所访问网站或应用的浅色或深色主题版本。您可以通过更改浅色/深色偏好设置并转到支持此媒体查询的浏览器，查看此主题的实际变化。请参阅 Mac 和 Windows 说明，了解深色模式。

Mac 设置界面
针对外观的 macOS 常规设置。
比较浅色模式和深色模式。

浅色模式下的代码示例。
浅色模式。
深色模式下的代码示例。
深色模式。

偏好对比度

浏览器支持

  • 96
  • 96
  • 101
  • 14.1

来源

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

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

无对比度偏好的浅色模式的代码示例。
浅色模式，无对比度偏好。
采用高对比度偏好设置的深色模式的代码示例。
深色模式，偏好高对比度。

对媒体查询进行分层

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

比较颜色和对比度。

浅色模式，常规对比度。
浅色模式，无对比度偏好。
深色模式，常规对比度。
深色模式，无对比度偏好。
浅色模式，高对比度。
浅色模式，偏好高对比度。
深色模式，高对比度。
深色模式，偏好高对比度。

检查您的掌握程度

考考你对颜色和对比度的了解程度

仅颜色不足以作为文档的标识符。还有什么可以帮助读者识别界面元素？

模式
不对。单靠模式不足以帮助用户识别界面元素。
文字
不对。仅文本可能不足来帮助用户识别界面元素。
Icon
不对。仅凭图标不足以帮助用户识别界面元素。
以上都对
是的！两个或更多标识符有助于用户识别界面元素。