设计用于色盲的可访问用户界面

Author: limo


色盲(色觉缺陷,简称CVD)约占全球男性的1 / 12(8%)和女性的1 / 200。如果您的设计对于这个庞大的群体而言是难看的或难以理解的,您应该考虑为色盲创建一个更易于访问的用户界面。


色盲不止一种,它们都与眼睛中可用的感光器有直接关系。有单色、二色、三色异常、三视(三视异常)、后视(后视异常)和前视(前视畸形)。


什么是色盲?


色盲也被称为色觉缺陷,是指看颜色或颜色差异的能力下降,不幸的是,没有治愈的方法。


男性比女性更容易色盲,因为最常见的色盲基因在X染色体上。


最常见的是红绿色盲,其次是蓝黄色盲和全色盲。红绿色盲影响了多达8%的男性和0.5%的北欧女性。


许多人认为如果你患有红绿色盲,这是你唯一分辨不出来的两种颜色。但这是错误的。色盲不仅仅与你无法分辨的两种颜色有关,整个光谱都受到了影响。


在某些国家,色盲使人们没有资格从事某些工作。这包括飞行员、火车司机、起重机操作员和武装部队的工作岗位。


然而,色盲对艺术能力的影响是有争议的。绘画的能力似乎没有改变,许多著名的艺术家被认为是色盲。


为什么设计用户界面很重要?


每个人都应该成为网络社区的一部分,他们的残疾不应该成为他们被孤立的原因。


在专业和道德方面,帮助色盲人员成为您的网站社区的一员,都是对您的设计的正确选择。


作为一个正常视力的人,很难想象你的工作在色盲眼中会是什么样子。然而,这可以产生巨大的影响。


网站是一个重要的问题,因为它们必须清晰易读,便于所有用户浏览;毕竟,他们是要被所有人看到的,不管他们是不是色盲。


以一种帮助色盲的人更好地阅读你的文章的方式进行设计,也可以为你带来更多的新读者和受众的自然流量,从而为你的网站带来更多这样的人。


色盲面临哪些挑战?


在大多数情况下,色盲患者的生活肯定更复杂、更困难,尤其是在工作和教育方面。


色盲的人在日常生活中肯定会遇到很多困难,这是视力正常的人没有意识到的。你能想到的每一项活动都会遇到挑战,包括挑选和准备食物、园艺、开车等等。


简单的任务,比如挑选成熟的水果,挑选衣服,阅读交通灯都是很有挑战性的,而且随着年龄的增长会变得更糟。


色觉缺陷也可能使一些教育活动更加困难,值得庆幸的是,大多数人发现他们可以适应,问题变得微不足道。


全色盲(全色盲)患者的视力也可能下降,在明亮的环境中也会感到不适。


他们的情况有多糟?


如果你是色盲,你可能很清楚这有多么令人沮丧。


色盲通常会导致沮丧、羞辱和尴尬,但大多数人只是厚脸皮,适应看到有趣的一面。


谈到色盲,有一个非常危险的方面需要考虑。在某些情况下,对颜色的正确理解可以挽救生命。交通信号灯就是一个例子。大约每14名男性中就有1名是红绿色盲,因此红色信号灯和绿灯的误读风险变得显而易见。


很多色盲的人在区分现代交通信号灯中使用的红色和绿色方面都没有问题,但是他们确实遇到了麻烦,因为老式的灯泡很难识别。


如果你是色盲,无论什么时候开车都要考虑这一点,意识到自己的缺点,但不要让它妨碍你的生活。


我们如何帮助他们?


为可访问性而设计并不意味着要牺牲设计的美学完整性,话虽如此,这里有一些方法可以让你的设计更加色彩友好:


同时使用颜色和符号


颜色不应该是传达信息的唯一媒介,网页设计应使所有用颜色传达的信息也可用无颜色。


除了彩色文本外,设计师还应该添加一些符号,以便让不同的受众理解这一点,并吸引他们的注意力。


容易找到链接


让你的网页上的链接很容易被每个人发现,包括你的色盲观众。仅仅依靠颜色可能不是最好的选择。


色盲(完全看不见颜色)的人在网页上寻找链接时,常常摸不着头脑。


对于这些用户来说,剩下的唯一方法就是在每一个单词上都用鼠标悬停,等着看光标是否真的会变成指针,这让他们在互联网上感到非常沮丧。链接应该下划线,或有合并图标,使它更容易为色盲用户。


使用图案和纹理来显示对比


色盲患者能够感知亮度、饱和度、色相和对比度的差异。设计师们可以利用这一点,因为很多有这种情况的人更喜欢明亮的颜色而不是暗淡的颜色。


这是因为暗淡的颜色有相互模糊的倾向。注意颜色和色调的对比。


请记住,对于色盲用户来说,解释图形和图表可能很困难。在这种情况下,最好使用对比模式,并在可能的情况下放置文本。


避免糟糕的颜色搭配


有些色彩搭配对色盲的人来说尤其困难,因此在你的设计中应该避免。几种不适合这些人的颜色组合,包括:

绿色和黑色

绿色和灰色

蓝色和灰色

浅绿色和黄色

绿色和蓝色

蓝色和紫色

绿色和棕色

绿色和红色


使其成为单色


避免所有麻烦的最简单和有效的方法之一,并使一个整洁的色盲友好的设计是添加单一颜色的多种色度,而不是使用多个色度。简单才是王道。


这并不意味着让它全黑和全白,但在灰色模式下浏览你的网站可以帮助你想象它在你的色盲观众面前会是什么样子。


关于色盲的统计数据


很难找到获得性色盲患者的可靠统计数据,但研究表明,全球约有1 / 12的男性和1 / 200的女性患有色盲。


这意味着,例如,在英国,大约有300万色盲,这大约是整个英国人口的4.5%。


如果用百分比来表示,8%的男性和0.5%的女性患有色觉缺陷。这意味着你的邻居或同学很有可能是色盲。


在白人占总人口比例较大的地区,这一数字还会上升。在斯堪的纳维亚,这个比例上升到大约10-11%。


相比之下,在中非,色盲的人很少。像印度和巴西这样的国家,在他们的遗传史上有大量的混血儿基因,有一种相对较高的色觉缺陷的倾向。


全世界大约有3亿人患有色盲,几乎和美国的总人口一样多!


色盲(颜色不好)的设计技巧


红色和绿色放在一起可能会有问题,但有时它们是匹配的。


患有严重心血管疾病的人看到的红色和绿色都是棕色,而患有轻微心血管疾病的人看到的红色和绿色都是红色和绿色。然而,当颜色太淡或混合在一起时,仍然会有问题。


请记住,颜色的问题要复杂得多,不仅仅是简单的红色和绿色。对于CVD很强的人来说,红色、绿色和橙色都是棕色,更准确的说法是不要同时使用红色、绿色、棕色和橙色。这还没完。


蓝色和紫色在一起;粉红色和灰色在一起;灰色和棕色混在一起可能都是麻烦的组合。


蓝色和紫色是经常被忽视的组合,如果使用RGB颜色模型,可以同时使用蓝色和红色来实现紫色。如果用户对红色有问题,那么他/她可能也对紫色有问题,紫色看起来像蓝色。


总之,你应该记住:

请注意,不仅仅是红色和绿色

红色和绿色可能会出现问题,但有时可以一起使用

适当时使用对色盲友好的调色板

如果必须同时使用红色和绿色,请利用浅色调和深色调。


有很多很棒的工具可以帮助你帮助色盲的人:


检查我的颜色

这个工具帮助你简单地输入你的网址,并收到反馈什么需要改进你的网站。


WebAim

WebAim是一个很棒的颜色对比检查器,它提供了两种颜色来查看它们是否匹配良好,以及它们是否通过了可访问性指南。


我要像色盲一样看东西

就像它的名字暗示我想看到像色盲是一个网站,色盲过滤器适用于你的网页在您的Google Chrome所以你能理解一个色盲的人认为这可以帮助您了解如何设计你的网站,你到正确的方向。


Color Oracle

Color Oracle是为Windows、Mac和Linux用户构建的一个色盲模拟器,其思想与我们前面讨论的工具类似。它会告诉你有常见色觉障碍的人会看到什么。


通过在这些网站上寻求指导,你会受益良多,你也会对色盲者所面临的问题有所了解,并知道如何使之变得简单。


总结


希望你觉得这篇文章对您有用,希望你现在对色盲有了更好的理解,有色盲的人有什么困难,为什么它是一个重要的话题,我们如何通过设计一个更好的和可访问的界面来帮助他们。


相关阅读