BootStrap的色盲无障碍性

最近读了本《 Don’t make me think》(强烈推荐) ,它改变了我对 web的视角。我认为最有趣的地方是无障碍性那部分。我从来没有想到过全世界有8%的人是色盲。这可是一个非常庞大的人群,足足5.6亿人口。

意识到这些问题后,我开始思考每天都在使用的web。假使一个非常知名并且被广泛使用的CSS库对色盲的人群不友好,结果将会怎样?然后,我打开Bootstrap,开始搜寻和颜色相关的东西。就发现了下面这些按钮。

以上这些按钮是常人看到的效果,这些按钮看起来很清新,对吧?不过,色盲的人看到却是另外一种效果。

我突然想到上面的“Success” 和 “Warning”看起来差别不明显。这两个按钮本意差别很大,用相近的颜色来区分显然不符合逻辑。于是,我把颜色的整个光谱图上传到 “Coblis” (http://www.color-blindness.com/coblis-color-blindness-simulator/) 。看看能否找到对所有人而言,更恰当的、用于区分 Danger 和 Success 的颜色。结果如下:

从上图来看,我想大家都应该很清楚了:不管是不是色盲,黄色和蓝色都是容易区分的。( 顺便提一句,大家知道为什么Facebook选蓝色吗?)

扯了这么多,我个人的建议: 对于“Success”这类的按钮,让我们用蓝色替换绿色。这样一来,每个人都可以清楚地区分它们。

1 收藏 4 评论

关于作者:伯小乐

伯乐在线小编一枚~~~~PS:我不是@小编辑,不要问我了 个人主页 · 我的文章 · 249

相关文章

可能感兴趣的话题



直接登录
最新评论
  • XiNGRZ   2013/06/02

    Facebook创始人Mark本人就是一位红绿色盲。

  • 顽石忍释   2013/06/03

    这篇文章经过认真的医学认定吗?我就是红绿色盲。但是仍能分清以上颜色的差别。也就是说,你不色盲就不会知道色盲眼睛里看到的样子。我们仍旧能清楚的分别红绿灯,和其他颜色。唯一能检验出的就是色盲检验图谱。但是并没有什么特殊含义,一样的开车,我国的色盲研究还是停留在上世纪五十年代,社会对色盲的歧视毫无道理。

    • 黄余粮 站长 2013/06/03

      不好意思,我们网站的文章都没有经过医学认定。

      这篇文章是译文,原文作者的颜色数据依据 http://www.color-blindness.com/coblis-color-blindness-simulator/ 。文章的目的是在网页设计选色时,如何照顾到色盲的人群。我个人觉得对设计师有参考价值,所以翻译过来了。你怎么上升到了对色盲歧视的高度呢?文章的哪部分让你感觉有对色盲歧视的含义?

      另外,避免其他人误解,强调一下:这篇文章的目的不是如何鉴定色盲,而是如何顾及到不能分别某些颜色的人群(比如:不能分辨红绿色),从而选择更恰当的颜色。如何鉴定色盲不在本文讨论的范畴。

  • 难怪浏览器一直默认链接有下划线啊…… 于是我给自己的博文内容中的链接也加回下划线了

跳到底部
返回顶部