您是否曾尝试过阅读屏幕上的文字,并且因为配色方案而难以阅读,或在非常明亮或弱光的环境中看不清屏幕?或者,也许您是有更永久性的色觉问题的人,例如估计有 3 亿人患有色盲或 2.53 亿弱视用户?
作为设计师或开发者,您需要了解人们如何看待颜色和对比度,无论是临时性、情境性还是永久性。这将有助于您更好地满足他们的视觉需求。
本单元将介绍一些易于使用的颜色和对比度基础知识。
感知颜色
您知道物体没有颜色,但能反射光的波长吗?当您看到颜色时,您的眼睛会接收和处理这些波长,并将其转换为颜色。
![一只眼睛正在查看色轮。](https://web.developers.google.cn/static/learn/accessibility/color-contrast/image/an-eye-viewing-color-whe-358cdaa2d25c.png?authuser=5&hl=lt)
对于数字无障碍功能,我们从色调、饱和度和亮度 (HSL) 的角度讨论这些波长。HSL 模型是 RGB 颜色模型的替代方案,更符合人类对颜色的感知。
色相是描述颜色(例如红色、绿色或蓝色)的一种定性方式,其中每种色相在色谱上都有一个特定斑点,其值范围为 0 到 360,红色为 0,绿色为 120,蓝色为 240。
饱和度是颜色的强度,以百分比(范围为 0% 到 100%)来表示。具有全饱和度 (100%) 的颜色将非常鲜明,而没有饱和度 (0%) 的颜色将是灰度或黑白色。
亮度是颜色的浅色或深色字符,以百分比(介于 0%(黑色)到 100%(白色)之间)进行测量。
测量色彩对比度
为了帮助支持各种视觉障碍的人,WAI 团队创建了一个色彩对比度公式,以确保文字与其背景之间存在足够的对比度。遵循这些颜色对比度时,视力适中的用户可以阅读背景中的文字,而无需借助对比度增强技术。
我们来看一下使用鲜艳色调的图片,并比较一下该图片与具有特定形式的色盲用户的图片的显示效果。
左侧图片显示了具有紫色、红色、橙色、黄色、湖水绿、浅蓝色和深蓝色这些颜色的彩虹沙。右侧是颜色更鲜艳的彩虹图案。
绿色盲
![绿色盲人看到的彩虹色沙子。](https://web.developers.google.cn/static/learn/accessibility/color-contrast/image/rainbow-sand-seen-a-pe-aea6b53778f67.jpg?authuser=5&hl=lt)
![绿色盲的人看到的彩虹图案。](https://web.developers.google.cn/static/learn/accessibility/color-contrast/image/rainbow-pattern-seen-a-77926939250f1.jpg?authuser=5&hl=lt)
绿色盲(通常称为“绿色盲”)发生于男性 1% 至 5%,女性为 0.35% 至 0.1%。
绿色盲患者对绿光的敏感度较低。此色盲滤镜可以模拟此类色盲可能是什么样子的。
红色盲
![红色盲的人看到的彩虹色沙子。](https://web.developers.google.cn/static/learn/accessibility/color-contrast/image/rainbow-sand-seen-a-pe-7748879c574cf.jpg?authuser=5&hl=lt)
![红色盲的人看到的彩虹图案。](https://web.developers.google.cn/static/learn/accessibility/color-contrast/image/rainbow-pattern-seen-a-87774aea1888c.jpg?authuser=5&hl=lt)
红色盲(通常称为“红盲”)发生于男性 1.01% 至 1.08%,女性为 0.02%。
红色盲的人对红光的敏感度下降。此色盲滤镜可以模拟此类色盲可能是什么样子的。
全色盲或单色盲
![彩虹色的沙子,是全色盲的人看到的彩虹色。](https://web.developers.google.cn/static/learn/accessibility/color-contrast/image/rainbow-sand-seen-a-pe-211c40daaf52a.jpg?authuser=5&hl=lt)
![全色盲的人看到的彩虹图案。](https://web.developers.google.cn/static/learn/accessibility/color-contrast/image/rainbow-pattern-seen-a-1ada43bf2cc78.jpg?authuser=5&hl=lt)
全色盲或单色盲(或完全色盲)的发生极少数。
全色盲或全色盲的人几乎无法感知红光、绿光或蓝光。此色盲滤镜可以模拟此类色盲可能是什么样子。
计算色彩对比度
颜色对比度公式使用颜色的相对亮度来帮助确定对比度,范围从 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
构建高对比度主题,以支持色差和对比度灵敏度的用户。
首选配色方案
通过媒体查询 @prefers-color-scheme
,用户可以选择他们所访问网站或应用的浅色或深色主题版本。您可以通过更改浅色/深色偏好设置并转到支持此媒体查询的浏览器,查看此主题的实际变化。请参阅 Mac 和 Windows 说明,了解深色模式。
![Mac 设置界面](https://web.developers.google.cn/static/learn/accessibility/color-contrast/image/mac-settings-ui-e918a99520999.png?authuser=5&hl=lt)
![浅色模式下的代码示例。](https://web.developers.google.cn/static/learn/accessibility/color-contrast/image/code-example-light-mode-36c15d908ac91.png?authuser=5&hl=lt)
![深色模式下的代码示例。](https://web.developers.google.cn/static/learn/accessibility/color-contrast/image/code-example-dark-mode-4860136b85b36.png?authuser=5&hl=lt)
偏好对比度
@prefers-contrast
媒体查询会检查用户的操作系统设置,以检查高对比度是开启还是关闭的。您可以通过更改对比度偏好设置并前往支持此媒体查询的浏览器(Mac 和 Windows 对比度模式设置)来查看此主题更改的实际效果。
![无对比度偏好的浅色模式的代码示例。](https://web.developers.google.cn/static/learn/accessibility/color-contrast/image/code-example-light-mode-cf53e5d577358.png?authuser=5&hl=lt)
![采用高对比度偏好设置的深色模式的代码示例。](https://web.developers.google.cn/static/learn/accessibility/color-contrast/image/code-example-dark-mode-ef6f55f3ac8c9.png?authuser=5&hl=lt)
对媒体查询进行分层
您可以使用多个侧重于颜色的媒体查询,为用户提供更多选择。在此示例中,我们将 @prefers-color-scheme
和 @prefers-contrast
堆叠在一起。
![浅色模式,常规对比度。](https://web.developers.google.cn/static/learn/accessibility/color-contrast/image/light-mode-regular-contr-7fe03bdb6aba3.png?authuser=5&hl=lt)
![深色模式,常规对比度。](https://web.developers.google.cn/static/learn/accessibility/color-contrast/image/dark-mode-regular-contra-803d4faa3b4.png?authuser=5&hl=lt)
![浅色模式,高对比度。](https://web.developers.google.cn/static/learn/accessibility/color-contrast/image/light-mode-high-contrast-ad3670a5d6f63.png?authuser=5&hl=lt)
![深色模式,高对比度。](https://web.developers.google.cn/static/learn/accessibility/color-contrast/image/dark-mode-high-contrast-5e00d4e617fa8.png?authuser=5&hl=lt)
检查您的掌握程度
考考你对颜色和对比度的了解程度
仅颜色不足以作为文档的标识符。还有什么可以帮助读者识别界面元素?