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

今天的文章在之前的基础上，总结出了13条实用可行的建议，提升色盲用户的浏览体验。当然，这样的设计对于普通用户而言，同样非常有效果。

1、文本的可读性

为了确保文本的可读性，应当根据可访问原则来选择背景的配色和文本的配色以及尺寸：
“WCAG 2.0 AA 要求正文文本的对比度达到4.5:1，而标题文本达到3:1。（正文粗体14pt+，标题18pt+）——WebAim color contrast checker ”

2、文字和图片的叠加
图文混排中，文字和图片的叠加通常会相对更加棘手一些，因为在很多情况下，要保证文本和图片之间有明显的对比度并不是那么容易。
降低背景的透明度，或者增加蒙板，让文字更易于识别。
当然，你还可以给文本换个更醒目的色彩，或者增加阴影来提升对比度。

3、取色与说明
对于普通用户而言也是非常实用而贴心的，比如黑色和海军蓝即使是普通用户在屏幕上并不是那么好分辨的，加个标签能更好的分辨。

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

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

6、配色
现实世界中，色彩往往是不可控的：红色的苹果旁边，可能会有一堆绿色的树叶。但是在网页中则不然，设计师通常都有着足够的权限来控制好这些问题。

7、表单占位符
在网页表单设计中同样存在问题，苹果官网创建Apple ID的页面表单当中，每个字段都有相应的占位符，但是占位符的对比度通常不够高，弱视的用户很难分辨。在这种情况下，字段的标签说明就很重要了，然而这个表单又没有，这就非常尴尬了。

但是，增加占位符的对比度并不是合理的解决方案，因为占位符必须同用户后续输入的文本清晰的区分开。

8、首选按钮
通常界面中的首选按钮会用更显眼的色彩来强调，Argo 的公司登录界面就是这么设计的。但是Argo 这样的设计仅仅是通过色彩来区分，对于色盲用户而言可能会造成困扰。

9、提示信息
通常成功和失败两类信息都是通过绿色和红色来进行区分的。然而这两种色彩又正好让色盲用户很难区分，这样一来，他们压根就无法区分信息的对错与否。不过，如果你简单的增加一个“Success”的文本说明，或者使用相应的图标来说明，用户就可以更加直观的了解信息了。

10、必须填写的表单字段
通常必须填写的表单字段会用色彩（比如红色）来进行区分，这也使得有一部分用户会无法分辨。

部分部分内容源自互联网，如有侵权请及时联系处理！

本文地址：https://www.grwy.net/wangzhanjianshe/24-350.html