为色盲用户做的电商设计
寻求色彩和体验的平衡点
世界上7％的人口是色盲。在UI中，色盲可能以为颜色无法很好的理解那视频，图像和图表。
什么是色盲？
色盲并不意味着人们根本看不到任何颜色，或者人们看到的一切都是灰色的。实际上，是看到颜色的能力下降，或者辨别颜色的能力下降。
色盲的原理
锥体是人眼中感光细胞的一种，它负责感知颜色。有三种类型的锥体 - 每个分别负责检测光谱中的红色，蓝色和绿色波长。当这些细胞有缺陷或完全缺失时，就会出现色觉问题。通常情况下，这些情况是从出生时父母遗传的，也可能是通过创伤：长时间暴露于紫外线，随着年龄的自然变性，糖尿病的影响或其他因素而造成的。
常见的色盲类型
两种最常见的色盲，畸形眼和远视眼是与性相关的特征，男性比女性更常见。最常见的畸胎性发生在男性中的几率有7％，但女性中只有0.5％。那么，困惑？全部人口的8％是色盲，所以我们不能忽略这部分人群。
作为设计师，我们的责任是确保我们的设计对于大众众是色彩可感知的和用户友好的。
1.使用常用的颜色名称
对于有色觉缺陷的人来说，最令人讨厌的体验之一就是产品颜色与产品无关。在这种情况下，说明中提到的颜色名称通常是对色盲用户有帮助的。但是想象一下，如果提到的颜色是 - “Damson”，“Blush”，“Olivaceous”，“Woodrush” - 这些名字有多少人能够理解？实际上，这些名称并不是我捏造的，这些名称实际上是我在少数电子商务应用程序中找到的颜色名称。
通过在产品描述中清楚地标明颜色名称，帮助色盲用户更容易做出决定。
话虽如此，好的网站和应用程序尽量使用通用命名颜色进行描述。 “淡粉色”或“深蓝色”是描述衬衫产品颜色的最好方式。
2.使用色样和标签的组合
另一个常见的问题是有一个彩色过滤器，但没有标签！这里有一个众所周知的电子商务网站的例子，它有彩色过滤器，但没有标签。另一方面，我也展示了一个红色色弱的用户对这个网站的体验。
解决这个问题的另一种方法是只列出过滤器中的颜色名称。
虽然这似乎是一个好主意，但记住：并不是所有访问该网站/应用程序的人都属于同一类的色盲患者这很重要。对于视力正常的用户来说，在过滤器中看到颜色名称也是一种很好的体验。当客户想要尽可能快速和平滑地查看搜索结果时，移除色样会导致颜色决策减速。
最好的解决方案包括颜色样本和常用颜色标签的组合。 WarbyParker眼镜网站就是一个很好的例子。
3.避免以颜色为基础传达信息
设计表单是强制输入字段的一种常规设计手段。或者，如果用户试图在未填写必填字段的情况下提交，则输入字段的边界将变为红色，表示错误。但是，我们必须明白，并非所有用户都能看到红色。
因此，在这种情况下显示一个错误符号或者有一个支持错误调用的标签是非常重要的。
这里有几种表示处理表单中必填字段的方法
用星号标记必填字段。
更好的是，标记必填字段，标签为“必填”。
在可能的情况下，完全删除可选字段。
不仅仅是表格，还包括警报信息。我们通常倾向于分别显示成功和失败信息为绿色和红色。但是，使用诸如“成功”或图标等标签文本可以帮助用户快速方便地阅读，如下所示 -
4.低对比度设计困扰着网络
低对比度的文字可能是最近的流行趋势，但它真的不仅对于色盲用户来说可读性很差，不易察觉，很难辨识的；而且对于正常的视觉用户也是不理解的。相反，我们应该考虑更多可用的替代品。
“WCAG 2.0级AA要求正常文本的对比度为4.5：1，大文本的对比度为3：1（14点和粗体或更大，或18点或更大）”。 - WebAim颜色对比检查器
利用粗体文本增加低对比度项目的可读性，避免使用非常细的字体。此外，不要使用任何JavaScript或CSS技术，阻止用户使用鼠标标亮页面的元素或更改默认高亮显示行为。许多有视觉障碍的用户利用高亮显示作为提高对比度和帮助视觉焦点的快速技巧。
5.以色盲用户体验你的设计
确实，如果你没有受过色觉缺陷的困扰，很难想象色盲眼中的世界。这就是我们为自己建立内部工具的原因 -CanvasFlip colourblind simulator。几个星期前，我们将它发送给了全球的设计师。这个想法是弥补设计师和色盲使用者的经验之间的差距。
在设计开始前，检查你的设计是否值得预先解决任何潜在的问题，以及进行最后的检查。
结论
优化色彩盲目用户访问我们的网站的体验实际上很容易。我们只需要有意识地去思考，遵守指导方针。使用色盲模拟器来帮助确定页面上的颜色如何影响整体体验通常会很有帮助。
