根据 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=不通过)：
2 、文字和图片的叠加
图文混排中，文字和图片的叠加通常会相对更加棘手一些，因为在很多情况下，要保证文字和图片之间有明显的对比度并不是那么容易。
降低背景的透明度，或者增加蒙板，让文字更易于识别。
当然，您还可以给文字换个更醒目的色彩，或者增加阴影来提升对比度。
3 、取色与说明
下面的截图是亚马逊的购买页面中不同衣服的颜色分类，对于红绿色盲多用户而言，他们看到页面可能是右边那样的。在这种情况下，不同的色彩没有文字标签分辨，红绿色盲多用户无法分辨其中的差异。
不过，在桌面浏览器上，多用户滑鼠悬停在色彩上面的时候，能够看到相应的文字标签，但是移动端上则无法实现这样的功能。
Gap 则通过给每个色彩加文字标签来解决这一困局：
其实这样的设计对于普通多用户而言也是非常实用而贴心的，比如黑色和海军蓝即使是普通多用户在萤幕上并不是那么好分辨的，加个标签能更好的分辨。
4 、给图片附上有用的描述
下面的截图是一个 SuperDry 系列的 T 恤，网站对这款 T 恤描述为 “Leaf Jaspe”，也就是说它的配色灵感来自于树叶，而它的实际色彩包含了绿色、黄色和棕色等。
问题来了，色盲多用户先分辨不出它的实际色彩，需要依靠描述来了解，但是描述中的 Leaf 意为树叶，而 Jaspe 则为斑驳的意思，实际上也不够直观。所以，合理的描述应当为 “Gray Green Leaf Jaspe”(灰绿色斑驳树叶) 。
5 、连结识别
网页连结知名是能够不通过色彩就可以识别出来。如果一个全色盲多用户 (完全无法分辨色彩) 开启 UK GDS (英国政府数字服务) 网站，那么他会看到下面的介面。这个情况下，网站中用色彩来区分的连结他们就全然看不到了。
为了找到连结，这些多用户需要用滑鼠游标来探路，游标沿着文字移动，直到看到箭头变成指标，他们才能意识到这是一个可点选的连结。如果是在移动端上，他们就不得不用手指一点一点尝试，来查询每一个连结可能存在的地方了。
加上图示说明的连结更容易被发现，而如果没有图示的话，加上下划线也可以带来不错的效果。
6 、配色
现实世界中，色彩往往是不可控的：红色的苹果旁边，可能会有一堆绿色的树叶。但是在网页中则不然，设计师通常都有着足够的许可权来控制好这些问题。下面的配色就应当尽量规避：
·绿色/红色
·绿色/棕色
·蓝色/紫色
·绿色/蓝色
·浅绿色/黄色
·蓝色/灰色
·绿色/灰色
·绿色/黑色