色盲用户的网页设计

admin

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

但是，如果您无法像世界其他地方一样看到颜色怎么办？它会使您的用户体验变得不那么有趣，甚至会导致您误解消息和含义。

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

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

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

8908组
色盲用户的网页设计重要吗？
是的。美国残疾人法案 (ADA) 控制与美国残疾人网站的可访问性有关的所有事项。根据 ADA 的规定，任何希望其网站供公众使用的个人或组织都必须使其易于残障人士访问和使用。违规行为可能代价高昂，第一次违规高达 75,000 美元，所有后续问题高达 150,000 美元。

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

8909组
色盲影响日常工作
大多数色盲用户的视力与普通人群相当。尽管如此，他们无法区分蓝光、红光和绿光。女性比缺陷患者更有可能成为携带者，因为它是由 X 染色体中的突变引起的。

色盲主要分为三种类型：

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

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

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

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

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

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

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

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

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

避免在深色背景上使用浅色文字
通常，在为色盲人士设计时，在浅色背景上使用深色或浓烈、充满活力的文字。通过这样做，您将降低色盲者无法区分单词和重要信息的风险。

此外，如果可能，请尝试尽可能多地利用其他设计元素——例如纹理、大小、形状和流程——这样色盲浏览者就可以轻松地发现您网站的关键部分或元素。

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

这是您应该在其位置执行的操作：

通过使用图案和纹理，让用户可以轻松区分不同的部分。
为了使部分内容更易于理解，请为它们添加文本标签。
使用彩色文本标签
想象一下，想要购买一件红色 T 恤，但无法确定哪个样品的颜色正确？

在许多网站（例如亚马逊）购物时，您可能已经看到颜色选择是通过颜色或图案的小图标完成的。但它们总是伴随着上面的文本行，以文本方式表示确切的颜色。

使用图标和其他非颜色提示
视力正常的人通常依靠颜色来区分导航项和设计的其他元素。这就是为什么在为有视觉障碍的人创建网站时超越颜色思考尤为重要，因为颜色无法有效地帮助他们区分对象或理解事物的含义。

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

不要仅仅依靠颜色来传达意义
为确保您的网站对色盲人士可用且愉快，您应该避免仅依靠颜色来传达含义。避免使用不同颜色的文本来显示需要观众感知微妙色调的重要性或按钮颜色。

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

选择调色板时选择易于访问的颜色
在为您的网站选择调色板时，一定要考虑色盲用户的需求。使用具有高对比度和良好可见性的颜色，这样即使一个人是色盲，他们仍然可以理解信息和对他们的期望。

例如，最好避免使用天蓝色或柠檬绿等颜色，因为这些颜色较难被色觉缺陷者察觉。在为色盲人士设计网页时，可以从范围广泛的可访问调色板中进行选择，例如灰色阴影、大地色和宝石色调。

避免这些颜色组合：
绿-红
绿，蓝
绿-黑
绿色-棕色
绿色-灰色
浅绿色或柠檬绿 – 黄色
蓝-紫
蓝-灰
使用字符定义必填字段
如果您仅使用颜色来指示表单上的必填字段，色盲用户可能会发现很难区分必填项和可选项。

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

使用星号 (*) 表示需要的字段。
以文本方式指示字段是必需的还是可选的。
删除任何可选字段。
下划线链接
在网页设计中，我们经常使用字体粗细或颜色来表示链接。即使患有绿色盲、红色盲或蓝色盲的人可能会从普通文本中分辨出锚文本，但低对比度使其远非最佳。

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

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

确保主按钮弹出
设计师经常使用颜色来突出主要按钮。这样做的问题是色盲用户可能无法看到您使用的颜色。

试试这些想法：

可以增加主要按钮的大小，使它们易于辨认。
尝试尝试不同的位置或位置组合。
使主要和次要按钮更具对比。
如果您想区分主要按钮和次要按钮，请尝试使用边框、图标或字体粗细。

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

如果您正在设计新网站或对现有网站进行必要的整容，请务必与经验丰富的网页设计和开发机构讨论色盲和网页设计，并对无障碍设计原则有透彻的了解。

Lounge Lizard 拥有超过 20 年的网站设计和开发经验，以及使用适合所有受众的图像和颜色进行数字营销的经验。这包括色盲人士以及 ADA 中包含的其他类型的残障人士，包括：

其他形式的视力障碍
听觉的
认知的
演讲
身体的
神经科
如果您对如何让色盲用户或其他有辅助功能需求的用户可以访问您的网站有任何疑问，请随时与我们联系。联系 Lounge Lizard 了解更多关于如何定位您的网站以获取更多业务并提高利润的信息。