色盲用户的网页设计

fansgurus刷粉

颜色可以很耀眼！可以充满活力！它可以为图像和网站页面增添丰富性、色调和深度，让您的访问者惊叹不已，甚至令人惊叹不已。

但是，如果您无法像世界其他地方那样看到颜色怎么办？它会使您的用户体验变得不那么有趣，甚至导致您误解消息和含义。(Fansgurus是一个社交媒体营销在线平包含了Facebook，Instagram，Twitter，Pinterest，YouTube，Tiktok，telegram，虾皮等等海外社交媒体，并提供增粉、点赞、转发、评论浏览量直播间在线，网站引流等数据服务。快速体验：https://fansgurus.com/ref/jcofx)

在全球范围内，每 200 名女性中就有 1 名女性和每 12 名男性中就有 1 名患有色盲，也称为色觉缺陷 (CVD)。这意味着，在使用您的网站或应用程序的每 100 名访问者中，多达八到九人可能会以与您计划或预期完全不同的方式查看材料并与之互动。

色盲人士在日常生活中面临着许多视力正常的人根本没有意识到的挑战。即使是最简单的活动，例如选择和烹饪食物、园艺、运动、驾驶机动车辆以及决定穿什么，也可能会带来挑战。色盲者还可能在接受教育、考试成绩、职业选择和职业发展方面遇到困难，这些都可能受到色盲的影响。

通过创建色盲人士可以访问的网页设计，您和您的组织可以帮助使互联网更具包容性。它就像理解并遵守色盲网页设计的一些最佳实践一样简单，这样设计师就可以创建一个对每个人来说都愉快且可用的网站体验，无论他们辨别颜色的能力如何。

色盲用户的网页设计重要吗？

是的。《美国残疾人法案》(ADA) 控制与美国残疾人网站可访问性相关的所有事宜。根据 ADA 的规定，任何希望公众使用其网站的个人或组织都必须使其易于残疾人士访问和使用。违规行为的代价可能很高，首次违规最高可达 75,000 美元，后续所有问题最高可达 150,000 美元。

此外，万维网联盟 (W3C)（位于w3.org）是一个由成员组织组成的国际集团，负责监督商定协议和开放标准原则的制定，已发布了 Web 内容可访问性指南 2.1 (WCAG 2.1)，其中概述和定义了标准用于网站可访问性设计和开发的各个方面。

色盲影响日常任务

大多数色盲用户的视力与普通人群相当。尽管如此，他们无法辨别蓝光、红光和绿光。女性比患者更有可能成为该缺陷的携带者，因为该缺陷是由 X 染色体突变引起的。

色盲主要分为三种类型：

1. 红/绿色盲是最常见的类型。这是当人们混淆包含红色或绿色作为整个色调的组成部分的所有颜色时。

红色弱色盲患者对红光不太敏感，而绿色盲患者对绿光不太敏感。例如，原色者会将蓝色误认为紫色，因为他们无法区分紫色的红色成分。

2. 蓝/黄色色盲不太常见，使人无法区分蓝色和绿色以及黄色和红色。

3. 完全色盲，也称为单色盲，非常罕见，但确实存在。这是人们只能看到黑白的地方。

如果您想了解不同类型的色盲如何影响您的视力/站点，请尝试色盲模拟器。或者使用 Chrome 扩展 Colorblindly 来查看任何网页上的效果。

为色盲设计网页

在考虑针对色盲的网页设计时，请务必聘请在设计具有最大可访问性的网站方面拥有丰富经验的专业团队。针对色盲的网页设计可用性指南涉及用户界面 (UI) 和用户体验 (UX) 的各个方面，因此必须获取这些专业知识而不是重新发明轮子。

以下是在考虑网页设计和色盲时需要评估的一些想法：

增加网站的颜色对比度

增加网站上颜色组合之间的对比度有助于提高色盲用户的可见性和可读性。

为此，尽量避免使用强度相似或色调接近的颜色。如果可能，在选择文本和背景元素的颜色时至少使用 4:1 的对比度，以便任何用户都可以清楚地看到它们。这将确保颜色不会成为网站理解或易读性的主要因素。

避免在深色背景上使用浅色文本

一般来说，在为色盲人士设计时，请在浅色背景上使用深色或强烈、鲜艳的文本。通过这样做，您将降低色盲者无法区分单词和重要信息的风险。

此外，如果可能的话，尝试尽可能多地利用其他设计元素，例如纹理、大小、形状和流程，以便色盲观众可以轻松发现网站的关键部分或元素。

使用图案和纹理

使用图表和饼图显示数据时，颜色对比至关重要。如果您使用对比度较低的颜色，色盲观众可能会发现很难理解您的图表。

以下是您应该在其位置上执行的操作：

• 通过使用图案和纹理，让用户可以轻松区分不同的部分。
  

• 为了使各部分更容易理解，请为其添加文本标签。
  

使用彩色文本标签

想象一下想要购买一件红色 T 恤，但无法看出哪个样品的颜色是正确的？

在许多网站（例如亚马逊）上购物时，您可能已经看到颜色选择是通过颜色或图案的小图标完成的。但它们上方始终附有一行文本，该文本行在文本上表示确切的颜色。

使用图标和其他非颜色提示

视力正常的人通常依靠颜色来区分导航项和设计的其他元素。这就是为什么当您为视力障碍者创建网站时，超越颜色的思考尤为重要，因为颜色无法有效帮助他们区分物体或理解某些事物的含义。

尝试使用图标、符号和其他非颜色提示在元素之间创建清晰的关系，以便所有用户都能识别您的网页的组织方式。

不要仅仅依靠颜色来传达意义

为了确保色盲人士可以使用并享受您的网站，您应该避免仅仅依靠颜色来传达含义。避免使用不同颜色的文本来显示重要性，或使用需要观看者感知微妙色调的按钮颜色。

相反，除了使用尺寸和纹理等非颜色提示之外，还应使用清晰的符号和其他视觉元素进行设计，以便所有用户都能理解您试图传达的信息。

选择调色板时选择易于使用的颜色

为您的网站选择调色板时，请务必考虑色盲人士的需求。使用具有高对比度和良好可见性的颜色，这样即使一个人是色盲，他们仍然可以理解信息以及对他们的期望。

例如，最好避免天蓝色或柠檬绿等颜色，因为颜色缺陷的人更难察觉它们。为色盲人士设计网页时，可以从多种可用的调色板中进行选择，例如灰色、大地色调和宝石色调。

避免这些颜色组合：

• 绿-红
• 绿，蓝
• 绿色-黑色
• 绿色-棕色
• 绿色-灰色
• 浅绿色或石灰绿色 – 黄色
• 蓝色-紫色
• 蓝-灰
  

使用字符定义必填字段

如果您仅使用颜色来指示表单上的必填字段，色盲用户可能会发现很难区分必填条目和可选条目。

相反，其他解决方案可能是：

• 使用星号 (*) 来指示所需的字段。
  

• 以文本方式指示字段是必填还是可选。
  

• 删除任何可选字段。
  

下划线链接

在网页设计中，我们经常使用字体粗细或颜色来指示链接。尽管患有绿色盲、红色盲或蓝色盲的人可能能够区分锚文本和普通文本，但低对比度使其远非最佳。

单色将使人们无法区分文本和锚文本，因此他们必须在文本上徘徊以检查光标是否变成指针。

通过在网站页面上的链接下划线，色盲人士将能够更轻松地浏览您的网站、查找他们正在寻找的信息或进行购买。

确保主按钮弹出

设计师经常使用颜色来突出显示主要按钮。这样做的问题是色盲用户可能很难看清您使用的颜色。

尝试以下想法：

• 可以增加主按钮的大小，使其易于识别。
  

• 尝试尝试不同的位置或位置组合。
  

• 使主要按钮和次要按钮形成更强的对比。
  

如果您想区分主按钮和辅助按钮，请尝试使用边框、图标或字体粗细。

总结色盲网站设计过程

有了这些建议，您就可以在与设计师、开发人员、数字营销专业人员和内容创建者合作构建无障碍网站时获得成功的路线图。使用这些示例，您的网站及其内容对于所有类型和能力的用户来说都是可感知的、可操作的和可理解的，并且根据 ADA 指南和 WCAG 2.1 也将被视为可访问。

如果您正在设计一个新网站或对现有网站进行必要的改版，请务必与经验丰富的网页设计和开发机构讨论色盲和网页设计，他们对可访问性设计原则有透彻的了解。

Lounge Lizard 在网站设计和开发以及使用适合所有受众的图像和颜色的数字营销方面拥有 20 多年的经验。这包括色盲者以及其他类型的残疾人，这些都包含在 ADA 中，包括：

• 其他形式的视力障碍
• 听觉
• 认知的
• 演讲
• 身体的
• 神经病学