最近在看MD规范时，发现选择合适的颜色对比度有数据依据，自己在选择颜色时会依据参考，或靠感觉。突然看到这么一个数值，觉得自己离专业又进了一步，然后就花时间研究了一下其中的奥秘，本次就跟大家分享一下我的一点点收获。

目录

1. 颜色对比度 – 关注色弱人群

2. 如何选择合适的颜色对比度

一、颜色对比度 – 关注色弱人群

我们都知道对比的重要性，通过合适的对比增强内容的可识别性，让用户快速理解并吸收信息，增强用户阅读的体验感。

今天这里讲的主要是文字与背景色之间的对比。界面中常见的背景色是白色，但为了增强视觉效果，设计师也经常会将文字放置在有颜色的背景上，例如个人中心头部、直播界面、卡片等等。那如果在做设计的时候不注意对比度的考虑，文字的可识别性就会很差。eg. 抖音将文字放置在视频上，因为视频颜色的不可控性，为了保证良好的阅读效果就必须添加蒙层。

你可能会说在做图时肯定会注意到文字的可识别性，但是设计不仅是给自己看的，我们要将它展现给用户，而用户中就存在着这样一群视觉障碍的群体，他们对色彩的识别度比正常人低很多，普通人可以清晰看见的内容，他们看的时候就会很费劲，或者看不见。你可能觉得他们离你很远，但其实他就在你我身边。我们的大家族就有红绿色盲基因，我的叔叔伯伯们的都有一定程度的色弱和色盲症。

下面，我们来看看Salesforce 的无障碍设计顾问 Cathy O’ Connor 提供了一组数据：

约有4%的人口视力低下，0.6%为视盲。

7-12% 的男性有不同形式的色觉缺陷(如色盲)，不到1%的女性这样。

低视力状况随着年龄的增长而增加，50岁以上的一半人有一定程度的低视力低状况。

全球增长最快的人群是60岁以上的人

这组数据表明，色觉缺陷在男性中的占比例比高达7-12%，也就是说100个人里面就有7-12个人有不同形式的色觉缺陷;同时随着年龄的增长人们对颜色的对比度会丧失，这部分的用户群体还在不断增大;所以我们在做设计的时候就不得不考虑这部分人的使用需求。

二、如何选择合适的颜色对比度

MD规范里说：文本应该保持至少 4.5:1 (基于亮度值计算)的对比度以保持文本清晰;最佳对比度为 7:1。

看着这一段话很有深意，但是为什么是基于亮度计算，计算方式是什么?为什么最佳对比度是7:1?为什么最低对比度是4.5:1 ?下面我来试着解答一下。

1. 为什么基于亮度计算

W3C (万维网联盟)中提到，对没有颜色缺陷的人进行阅读性能评估，发现色调和饱和度对易读性的影响很小或者是没有影响，而亮度对比度对易读性的影响很大。所以，颜色差别不是关键，即使对色弱的人，只要有足够的亮度对比度就不会影响阅读。由此也可以看到，在做设计时选择HSB颜色模式的一大益处。

2.计算方式

我并不会给出一个高深莫测的计算公式，因为研究一番也没弄特别明白，所以直接给一个快速获取对比度数值的方式。如下图，只要将两种颜色代码输入进去就可以直接帮你计算出对比数值。并且会将两种颜色直接展示出来，简单直观。

3. 对比度的选择

WCAG 2.0 中将颜色对比等级分为3种，A级，AA级，AAA级，等级越高意味着颜色的对比度越高，呈现出来的视觉压力越大：

A级：采用3:1的对比度，是普通观察者可接受的最低对比度。字号大，字重高的文字在较低的对比度下也易于阅读，这时就可以选择3:1的对比度。

AA级： 采用4.5:1 的对比度，是普通视力损失的人可接受的最低对比度。这个数据来自80岁老人的典型视力。

AAA级：采用7:1的对比度，是严重视力损失的人可接受的最低对比度，超出这种视力损伤的用户就需要借助辅助技术帮助其进行信息识别了，所以不再考虑范围内。

所以MD就是根据这3个颜色对比等级得出：对比度最低不小于4.5:1，最佳对比度是7:1，这样才可以保证最大的用户群体对内容进行识别。

总结

这篇文章主要是讲了两件事情：

1. 我们在做设计的时候要考虑色弱人群，毕竟有7~12%的男同胞需要被照顾;

2. 文字与背景的对比度至少要保持4.5:1，如果是针对年龄大的用户群体7:1是更合适的选择。

如果是零基础的话，所花时间一年左右都是有可能的，而且学出来的话，拿到的薪资可能不会很高，原因有两点：其一，UI设计需要的学习内容是比较多，从软件的学习到理论知识，再到 用户体验，交互逻辑， 创意思维， 等等，这里面的内容是非常庞大的；其二，就是学习方法和方向，这点也是困扰所有想学习UI设计的小伙伴的地方，纵使你有非常强的自制力和充足的时间，没有合适的方向和方法，结果也只会是事倍功半。如果是零基础的话，所花时间的话，最短的时间至少是半年左右（除去是技校或者大学选的专业就是设计的），其他的有几个方面的原因是要考虑的：1：费用，线下实体培训班一般都在 2-3 万左右，因为实体培训的成本非常的高，学习场地，上课设备，住宿费用，伙食费，车费，等等；2：服务方面，相信大家都应该有体验过学校式的教学，一个班主任兼职几个班级的情况，都是存在的，还有就是专科老师，基本上也是上课见，下课看不见的状态。线下报班学3：学习环境，这点相信大家也有体会，差生，优生是有明确的分界线，三五成群，都有自己的小圈子，优生被带偏，差生被带好；4：教材，有过线下学习经验的小伙伴应该有体会，就是学校里面学的东西，总是与我们出来工作的匹配度，有一些偏差，学的内容不是目前行业最新的知识。