色盲:你知道吗? 你为此设计吗?
我很好奇我们许多从事设计或做出设计决策的人是否听说过这个问题。
我知道存在危险的颜色组合,例如绿色+红色。 这可能是最常见的色盲案例之一。 如果红色背景上有绿色文本,反之亦然,有些人将看不到任何内容。
我在实践中还发现,没有人看到蓝色背景上的绿色文本。
应避免哪些其他颜色组合?这些情况的发生频率如何?
让我们根据谁拥有数字的遇到概率来进行一些测距。
另外:我刚刚想起一个非常糟糕的例子,它给几乎每个人带来了问题 - 黑色背景上的蓝色文本。 无论出于何种意图和目的,它都是不可读的。 永远无法理解是什么可能迫使网站管理员使用这种颜色组合......
I'm curious whether many of us who do design or take design decisions have ever heard of this problem.
I'm aware there are dangerous color combinations, like green + red. This is probably one of the most popular cases of color blindness. If you have green text on a red background and vice versa some people won't see anything.
I've also seen in practice that green text on a blue background was not seen by one guy.
What other color compositions should be avoided, and how often these cases are to be expected?
Let us make some ranging by encounter probability who has the numbers.
Addition: I've just remembered one very bad example that causes problems to just about everyone - blue text on a black background. It's unreadable for all intents and purposes. Never could understand what could possibly compel a web master to use this color combination...
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(15)
我总是在 http://www.vischeck.com/vischeck/vischeckURL.php< 中测试我的页面/a> 以确保我没有选择非常糟糕的颜色。 或者这个 http://colorfilter.wickline.org/
I allways test my pages in http://www.vischeck.com/vischeck/vischeckURL.php to make sure I havent chosen really bad colors. Or this one http://colorfilter.wickline.org/
我自己是绿红色色盲,所以是的,我考虑到了这一点:)
请遵循其他人链接到的网站中提到的设计指南。 但我想强调一些想法:
(电池是否已充电?)
I'm color blind myself, of the green-red type, so yes, I take this into account :)
Do follow the design guidelines mentioned in the websites others have linked to. But there are some ideas I'd like to stress:
(Is the battery charged?)
我认为这一定很常见,不考虑这一点的开发人员注定会锁定比例高得惊人的客户。 在我的工作场所,研发部门大约 30 名员工中,有 2 人患有某种程度的色盲,还有一名视力受限 - 他需要使用 Windows“高对比度”配色方案才能完成任何工作。 一个好的测试是在各种高对比度方案中运行您的应用程序。 如果你还没有这样做,我几乎可以保证它将是不可读的。 您需要能够处理这样的方案以获得更好的可访问性。
I think it must be pretty common, and developers who do not take it into account are doomed to lock out a surprisingly high proportion of their customers. In my workplace, out of around 30 people in the R&D department, 2 are colour blind to some degree, and one is of restricted vision - he needs to use the windows "High Contrast" colour scheme to get any work done. A good test is to run your app in the various high contrast schemes. If you haven't done it I can pretty much guarantee it will be unreadable. You need to be able to handle schemes like this for better accessibility.
我的直接老板是色盲,所以我们会考虑到这一点。 ;-)。
My direct boss is colorblind, so yes we take this into account. ;-).
是的,在任何使用颜色来识别和/或标记事物的情况下,绝对需要考虑它。
经典案例是交通灯式指示器,一般为红、黄、绿。 红/绿色色盲很常见。 如果您正在创建需要遵守辅助功能立法的应用程序,则必须考虑这一点以及许多其他事项。
加拿大魁北克政府认识到这一点,他们的实际交通灯形状不同,颜色也不同。 确实有道理。
Yes, definitely need to consider it in any case where you are using colours to identify and/or demark things.
Classic case is traffic light style indicators which are generally red, yellow and green. Red/Green colour-blindness is quite common. If you are creating apps that need to comply with accessibility legislation you have to take this, and a host of other things, into consideration.
The government of Quebec in Canada recognise this to the extent that their actual traffic lights are different shapes as well as different colours. Makes sense really.
网站应该迎合所有人的需求,无论他们是色盲、聋哑人还是其他什么人。
英国皇家盲人研究所有一些关于为部分站点的人设计网页的有趣文章;
链接文本
包括颜色对比度 链接文本
以及使用颜色来传达信息链接文本
Websites should cater for everyone, whether they're colour blind, deaf or whatever.
The Royal Institute for the Blind in the UK has some interesting articles on web designing for partially sited people;
link text
Including colour-contrast link text
and the use of colour to convey information link text
在 Windows 中,您可以查询系统的系统颜色。 我总是使用它们。
您可以使用高对比度屏幕设置来测试您的应用程序,如果所有内容都可读,我想就可以了。
让我大开眼界的文章在这里: http://msdn.microsoft .com/en-us/library/bb263953.aspx
In Windows you can query the system for the System Colors. I allways use them.
You can test your app, using high contrast screen settings, if all is readable I suppose it's ok.
The article that opened my eyes to this is here: http://msdn.microsoft.com/en-us/library/bb263953.aspx
我为受第 508 条约束的美国政府部门做过一些工作,所以它确实出现了。
红/绿是迄今为止最常见的形式,但也存在其他形式(特别是蓝/黄和单色),因此总的来说,重要的是保持高水平的对比度。
I've done some work for US gov departments who are bound by section 508, so it does come up.
Red/Green is by far the most common form, but others exist (notably blue/yellow and monochromatic) so in general the important thing is to maintain high levels of contrast.
除了绿色+红色之外,另一种比较常见的色盲类型是蓝色和黄色。
我们在创建游戏时考虑了色盲。 我们设计的一款游戏(Arcade Lines)的特色是彩色球,您必须将其排列在相同颜色的行中。 我们试图通过为色盲人士提供一种特殊的皮肤来解决色盲问题,该皮肤不仅具有不同的颜色,而且具有不同的形状(每种颜色一个形状)。
Apart from green + red, another relatively common type of color blindness is blue and yellow.
We take color blindness into consideration when creating our games. One game we designed (Arcade Lines) features colored balls you have to align in same-colored rows. We tried to account for color blindness by offering a special skin for color-blind people which not only has different colors, but also different shapes (one shape for each color).
我可以向您推荐这个网站。 它有一个颜色方案选择器,在其右下角有一个下拉菜单,用于在常见的眼睛相关问题和相应地更改方案之间切换
I can suggest you this website. It has a colors scheme selector and in the bottom right part of it there is a drop down menu used to switch between common eye related problems and changing scheme accordingly
其实我从来没有想过这个。 然而现在回想起来,我也不记得我的应用程序依赖于颜色的任何情况。 文本几乎总是白色或黑色(尽管有时使用红色或绿色),背景颜色相当苍白,主要只是为了一些养眼的效果,而不是信息。 不过我现在会记住这一点。 让网页具有高对比度并不难。 :)
Actually I've never though of this. However thinking back now I can't remember any cases where my applications would have depended on color either. Text is nearly always white or black (though red or green are sometimes used), and background colors are pretty pale, mostly just for some eye-candy, not information. I'll keep this in mind now though. It's not that hard do get a webpage to be kinda-high-contrast. :)
红绿色可能是最常见的颜色缺陷类型,但不是唯一的类型。
一般来说,当您以灰度或棕褐色色调查看时,您的用户界面应该仍然可见且可用。 文本和背景必须具有高对比度,以便仅通过色调而不是颜色来区分形状。
涉及颜色而不是独特的艺术/图标的视觉元素可以附有文本,以对其所代表的内容进行更详细的描述。
Red-green may be the most common, but not the only type of colour deficiency.
In general, your user interface should still be visible and usable when viewed as grayscale or sepia tones. Text and backgrounds must have a high level of contrast to allow distinguishable shapes purely by tones and not colour.
Visual elements that involve colour and not unique art/icons can be accompanied by text to give more detail descriptions on what they represent.
Color Oracle 是一个很棒的工具,可以模拟不同类型的色盲。 您可以运行您的应用程序/网站,并运行此应用程序 - 它会让您很好地了解色盲用户将如何解释您的创作。
http://colororacle.cartography.ch/
Color Oracle is a great tool that simulates different types of color blindness. You can run your app/website, and run this app -- it will give you a good idea of how color blind users will interpret your creation.
http://colororacle.cartography.ch/
当我告诉我的同事按红色按钮时,当他说“哪一个?”时,我艰难地发现了这一点。 我以为他只是昏昏欲睡,所以我又告诉了他一次……然后他告诉我他是色盲,而我是那个感觉很愚蠢的人。
他现在在铁路工作,编写信号软件。 干得好,红灯总是在上面:)
那么你必须考虑色盲吗? 可能不是,就像你在设计屏幕时不支持大字体一样,但如果你想做得真正好而不是大多数人可以接受的工作,你就应该这样做。
I found out this the hard way when I told my colleague to press the red button.. when he said "which one?" I thought he was just being dim, so I told him again.. then he told me he was colour blind and I was the one feeling stupid.
He works for the railways now, writing signalling software. Good job the red light is always the one on top :)
So do you have to take colour blindness into account? Possibly not, just like you don't design your screens for large font support too, but you should if you want to do a truly good job instead of a mostly acceptable one.
我曾经编写过一个内部应用程序,其中包含一个散点图,其中不同系列按颜色区分。 我的主要用户结果是色盲(我认为是红绿色),所以我用符号的变化来补充颜色。
I once wrote an in-house application that featured a scatterplot with different series distinguished by color. My primary user turned out to be color-blind (red-green, I think), so I supplemented the color with variation in symbols.