网站首页网站地图google地图百度地图学习库RSS在线PSPS联盟素材下载  PS视频教程专题 PS爱好者教程网www.psahz.com PS教程自学网QQ群

专为色盲制作的网页:学习网页可实用性的设计技巧,色盲容易看网

时间:2016-06-26 09:51 来源:教程资料 作者:网页制作技巧教程 阅读:

专为色盲制作的网页:学习网页可实用性的设计技巧,让色盲更容易看网页,首先,色盲是有多种类型的。不过你并没有必要对所有的色盲都有清晰的概念,绝大多数的色盲都可以归结为看不清特定色彩、混淆色彩或者无法分辨特定的几种色彩。

这样的情况无疑是棘手的,但是实际状况还可能让色盲用户的情况更加麻烦:质量较差的显示器,光照不足,屏幕炫光,过于小的手机屏幕,距离电视机较远,等等等等。

仅仅依靠简单的色彩可读性规则和普通的可供性设计原则,其实并不一定能够解决这些问题。下面的建议也许无法面面俱到,但是绝大多数网页设计可能牵涉到的问题,在下面的列表中都有所覆盖。

1、文本的可读性

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

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

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

专为色盲制作的网页:学习网页可实用性的设计技巧,色盲容易看网

2、文字图片的叠加

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

专为色盲制作的网页:学习网页可实用性的设计技巧,色盲容易看网

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

专为色盲制作的网页:学习网页可实用性的设计技巧,色盲容易看网

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

PS笔刷下载 PS滤镜下载 PS形状下载 PS样式下载 PS动作下载 PS图案下载
相关教程