色盲用户的 UI 设计

色盲者占人口的很大一部分——确切地说，大约每 12 名男性中就有 1 人，每 200 名女性中就有 1 人。 然而，色盲用户是 UI 设计中经常被忽视的受众。

许多人将色盲误认为是黑白，虽然这是一种类型，但也有较少见和不太极端的版本。

大多数人都是三原色的，这意味着他们将颜色视为三种颜色的组合：绿色、红色和蓝色。 不同类型的色盲或色觉缺陷（CVD）来自无法清楚地感知这些颜色中的一种或多种。 最常见的 CVD 类型是红绿色盲，很难区分红色和绿色，以及红色盲，红色显得暗淡。

我们相信每个人都应该拥有公平和平等的互联网访问权限，因此 UI 设计师在设计时必须考虑到色盲用户。 美国残疾人法案 (ADA) 甚至要求某些组织符合 WCAG 2.0 AA 级指南。

使您的网站符合 ADA 标准并不难，但这确实意味着要考虑颜色的可访问性。 除了法律后果之外，为色盲用户设计对于您提供的用户体验至关重要。

为什么针对色盲进行设计很重要

颜色理论在 UI 设计中扮演着重要角色，因为颜色能够影响用户的购买决定、情绪反应和整体用户体验。 想想选择正确的品牌颜色对企业来说有多重要。 现在想象一下，由于您选择的颜色，超过 8% 的人无法阅读您的徽标或网站。 这是很多失去的机会。

由于色盲用户无法区分某些颜色，因此设计师不能仅依靠颜色来获得设计的可读性或情感影响。 当您使用颜色时，您需要考虑用户如何与之交互并创建一个吸引目标受众的交互式设计 - 包括色盲成员。 设计师的工作是同情用户的痛点，以便他们能够预防和解决它们。

如今，有像 Visolve 这样的工具可以针对某些类型的色盲调整计算机显示，但并不是所有的色盲人都使用这些工具——甚至不是所有的色盲人都知道他们是色盲。

请务必注意，您的网站并不是唯一考虑颜色可访问性的地方。 甚至您的社交媒体也可供盲人和视障人士使用。

要知道的颜色术语

在我们为色盲用户介绍 UI 设计最佳实践之前，最好为非设计专家复习色彩的基础知识。 选择配色方案时需要考虑四个主要组成部分：

色调：这是“颜色”的同义词，由颜色的光谱波长决定。

饱和度：也称为色度，这是一种颜色的强度或纯度，由存在的灰色量决定。 灰色越少，颜色越亮。

亮度：亮度取决于添加到颜色中的白色或黑色的量，分别产生色调和阴影。

温度：这是您感知颜色的温暖或凉爽程度。 计算机显示器会影响颜色的感知温度。

如何为色盲用户设计

为色盲设计并不意味着让你的产​​品不那么有吸引力。 它仅仅意味着在设计过程中遵循某些最佳实践。 从长远来看，实施良好的 UX 和 UI 设计原则只会提高您网站的可用性。

不要只用颜色来定义

在为色盲用户设计时，您不能完全依赖颜色来传达任何信息。

这样做是数据可视化中的一个常见错误，因为图形、图表和地图经常采用颜色编码。 通过颜色编码显示可用预约时段或可用音乐会座位的预订表格也很常见。 其他示例包括通过用颜色概述它们或用颜色指示错误来表示必需或遗漏的表单字段。

您应该远离以彩色文本和图像来传达关键信息，或者至少以其他可访问的方式提供该信息。

了解对比度和颜色选择

对于色盲用户来说，颜色之间的对比往往比颜色本身更重要。 关注对比度对设计师来说是有益的，因为不同类型的色盲使得仅仅避免特定颜色效率低下。 要提高色盲友好调色板中的对比度，请调亮浅色并调暗深色。

以下是提高设计知名度的其他一些方法：

• 强调前景色和背景色之间的区别
• 不要在色轮上选择相邻的色调，除非亮度差异很大
• 避免使用亮度相似的颜色，无论色调或饱和度如何
• 在使用中增加色调的饱和度

考虑到这一点，对于不同类型的色盲用户来说，仍然存在可能更具挑战性的颜色组合。 当对比度不显着时，您的色盲友好调色板应该远离这些颜色组合：

• 红色和绿色
• 绿色和蓝色
• 绿色和棕色
• 绿色和灰色
• 绿色和黑色
• 蓝色和灰色
• 蓝色和紫色
• 黄色和浅绿色

实现模式和纹理

在不单独依赖调色板的情况下为色盲用户更新视觉设计的一种方法是使用图案和纹理。 这在颜色通常有助于区分信息的情况下效果很好，例如在图形或图表中。 添加图案或纹理元素将有助于元素脱颖而出。

使用符号和标记一切

清晰的标签是指导任何用户完成客户旅程的最佳实践，包括色盲用户。 标签可以帮助区分通常用颜色传达的信息。 这适用于数据可视化，例如图表，或用于在网页上引导用户。 问问自己用户是否可以在没有您提供的颜色提示的情况下找到自己的方式。

从电子商务的角度来看，您还应该用清晰的描述性信息标记您的产品。 不要依靠产品照片来讲述整个故事； 标记产品的颜色。

重新考虑您的 CTA 按钮

号召性用语 (CTA) 是交互式设计不可或缺的一部分。 如果用户找不到或不理解它，他们将不会在旅程中取得进展，并且您将无法实现目标。 您需要引起对您的 CTA 的注意，许多设计师依靠颜色来做到这一点。

良好的 UI 设计实现了颜色，但也为 CTA 按钮使用了以下一种或多种其他出色技术：

• 尺寸
• 放置
• 强烈的对比
• 加权边框
• 加权字体
• 符号图标
• 悬停效果

这些技术适用于色盲和非色盲用户，您可以将它们用于您想要引起注意的其他页面元素。

在这些链接下划线

如果您阅读任何博客（包括此博客），您会注意到链接被突出显示以通知用户他们的存在。 强调链接的最常见方法是使用颜色。 为此，请使用蓝色，因为大多数有色觉缺陷的人都能看到它。

它适用于全色盲或单色盲的用户，尽管色盲的形式较为罕见，但强调颜色是不够的。 对于这些人，彩色链接显示为灰色，与其他文本无法区分。 您可以通过在锚文本下划线来快速解决此问题。

考虑极简主义

极简主义远非新鲜事物。 几十年来，美学一直在流行，贯穿建筑、艺术、室内装饰，当然还有设计。

而现在，极简主义在颜色可及性方面发挥了作用，因为颜色越少，混淆的可能性就越小。 它在风格上也很吸引人，而且不那么分散注意力，使其成为所有观众的可靠选择。

您不需要遵守极简设计即可访问，但这是一种可行的方法。

使用色盲模拟器

随着设计社区致力于提供可访问的用户体验，出现了许多出色的工具来提供帮助。 例如，色盲模拟器允许设计师以色盲用户的方式查看他们的设计。 一个这样的模拟器，Oracle，可用于 Mac、Windows 和 Linux。 使用色盲模拟器在整个设计过程中测试您的工作，并了解用户如何与您的选择进行交互。

在开始阶段决定您的调色板时，我们建议使用颜色选择器工具，根据 AA 指南评估您的选择。 这个对比度检查器可以告诉你你的对比度，这个易于使用的颜色生成器会建议效果更好的颜色组合。

使您的网站易于访问

针对色盲进行设计可确保您的网站为您的所有受众提供可以浏览和享受的用户体验。 对他们来说，这意味着他们可以信赖的品牌； 对您来说，这意味着成功的转换。 根据您公司的规模，这也可能意味着遵守法律。 无论如何，这是建立一个公平和平等的在线环境的一部分。

颜色可访问性只是建立一个受欢迎的网站的一个要素。 请务必查看我们的指南，让聋人和 HOH 社区可以访问您的内容。