澳门威尼24848网址-威澳门尼斯注册送88

资讯

网站建设资讯 ? 网站设计趋势

从品牌网站建设到网络营销策划,从策略到实行的一站式服务

网页设计中如何更好的给网页配色兼顾到色盲人群

来源:沙漠风网站建设企业 | 2016.06.28

根据 Colour Blind Awareness 的数据,4.5% 的用户是色盲,如果你的网站受众是以男性为主,那么这个数据可能高达8%。在进行网页和UI设计的过程中,色盲人群的实际状况很容易被设计师所忽略,毕竟绝大多数的设计师本身并非色盲。所以,应当如何在设计上兼顾到色盲以及色弱的用户群体呢?


1、文本的可读性

  为了确保文本的可读性,应当根据可访问原则来选择背景的配色和文本的配色以及尺寸:

  “WCAG 2.0 AA 要求正文文本的对比度达到4.5:1,而标题文本达到3:1。(正文粗体14pt+,标题18pt+)——WebAim color contrast checker ”

  下面的案例展示了哪些搭配能通过,而哪些无法达到标准(passes=通过,fails=不通过):


text-contrast-preview-opt

 

  2、文字和图片的叠加

  图文混排中,文字和图片的叠加通常会相对更加棘手一些,因为在很多情况下,要保证文本和图片之间有明显的对比度并不是那么容易。


text-overlay-bad-preview-opt

 

  降低背景的透明度,或者增加蒙板,让文字更易于识别。


text-overlay-good-preview-opt

 

  当然,你还可以给文本换个更醒目的色彩,或者增加阴影来提升对比度。

  3、取色与说明

  下面的截图是AMAZON的购买页面中不同衣服的颜色分类,对于红绿色盲用户而言,他们看到页面可能是右边那样的。在这种情况下,不同的色彩没有文本标签分辨,红绿色盲用户无法分辨其中的差异。


amazon-preview-opt

 

  不过,在桌面浏览器上,用户鼠标悬停在色彩上面的时候,能够看到相应的文本标签,但是移动端上则无法实现这样的功能。

  Gap 则通过给每个色彩加文本标签来解决这一困局:


gap-preview-opt

 

  其实这样的设计对于普通用户而言也是非常实用而贴心的,比如黑色和海军蓝即使是普通用户在屏幕上并不是那么好分辨的,加个标签能更好的分辨。

  4、给图片附上有用的描述

  下面的截图是一个SuperDry系列的T恤,网站对这款T恤描述为“Leaf Jaspe”,也就是说它的配色灵感来自于树叶,而它的实际色彩包含了绿色、黄色和棕色等。


superdry-preview-opt

 

  问题来了,色盲用户先分辨不出它的实际色彩,需要依靠描述来了解,但是描述中的Leaf 意为树叶,而Jaspe 则为斑驳的意思,实际上也不够直观。所以,合理的描述应当为“Gray Green Leaf Jaspe”(灰绿色斑驳树叶)。

  5、链接识别

  网页链接知名是能够不通过色彩就可以识别出来。如果一个全色盲用户(完全无法分辨色彩)打开 UK GDS (英国政府数字服务)网站,那么他会看到下面的界面。这个情况下,网站中用色彩来区分的链接他们就全然看不到了。


gds-screenshot-preview-opt

 

  为了找到链接,这些用户需要用鼠标光标来探路,光标沿着文本移动,直到看到箭头变成指针,他们才能意识到这是一个可点击的链接。如果是在移动端上,他们就不得不用手指一点一点尝试,来查找每一个链接可能存在的地方了。


gds2-preview-opt

 

  加上图标说明的链接更容易被发现,而如果没有图标的话,加上下划线也可以带来不错的效果。


6、配色

  现实世界中,色彩往往是不可控的:红色的苹果旁边,可能会有一堆绿色的树叶。但是在网页中则不然,设计师通常都有着足够的权限来控制好这些问题。下面的配色就应当尽量规避:


combinations-preview-opt

 

  ·绿色/红色

  ·绿色/棕色

  ·蓝色/紫色

  ·绿色/蓝色

  ·浅绿色/黄色

  ·蓝色/灰色

  ·绿色/灰色

  ·绿色/黑色



十八年 建站经验

多一份参考,总有益处

联系沙漠风,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与大家联系

业务热线:400-688-6062 / 大客户专线   深圳:15818561755

在线咨询 提交需求

澳门威尼24848网址|威澳门尼斯注册送88

XML 地图 | Sitemap 地图