文字与背景间对比度的选择

最近在看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是更合适的选择。

最后，推荐一个关于颜色识别的小游戏-《颜色识别》，直接在APP-store里下载，你可以跟身边的小伙伴一起玩，来进行一次关于颜色识别的比赛；也可以推荐给色弱的亲人或朋友，看看你们之间的差距在哪里，相信你会对颜色对比有更强烈的认知。

不想下载的朋友也可以直接看网页版：

参考引文：

《超全面！色彩无障碍设计值「对比度」的探索》

海盐社（公众号）
作者： 小火焰

赞 (0)

相关推荐

  • WPS修改幻灯片内容（文字和背景）

    WPS修改幻灯片内容,文字和背景. 操作方法 01 选择一张幻灯片 02 修改字体和字号 03 修改背景,鼠标右键单击图片空白处.如图所示. 04 如图所示,选择本地文件. 05 选择一张图片. 06 ...

  • 如何给PPT文档中的文字填充背景颜色

    如何给PPT文档中的文字填充背景颜色

    今天给大家介绍一下如何给PPT文档中的文字填充背景颜色的具体操作步骤.1. 首先打开电脑上的ppt文件,选择插入文本框,然后输入标题文字.2. 在文本上右键,弹出的菜单中,点击"设置形状格式 ...

  • 在word2010版本中怎么清除文字的背景颜色

    在word2010版本中怎么清除文字的背景颜色

    今天小编分享的是在word2010版本中怎么清除文字的背景颜色.具体如下:1. 打开一个空白文档或者需要清除背景的文档2. 如果是复制的带阴影的文字,我们粘贴到文档中3. 按[crtl+a]全选,右击 ...

  • Word文档复制过来的文字的背景颜色如何去除

    Word文档复制过来的文字的背景颜色如何去除

    我们在Word文档中复制过来文字带有背景颜色,想要去除背景颜色该怎么操作呢?今天就跟大家介绍一下Word文档复制过来的文字的背景颜色如何去除具体操作步骤.1. 如图,打开文档,将复制到文档中的文字选中 ...

  • 怎么用PS给文字添加背景

    文字单调难看,试试用PS给文字添加背景,让文字活起来. 操作方法 01 首先,建立一张背景图,在上面输入文字,任何文字都可以: 最好选择比较粗的文字类型,粗文字背景比较明显. 02 将想要作为文字背景 ...

  • cad多行文字的背景遮盖

    对cad中的对行文字设置类似word中底纹效果. 操作方法 01 命令行输入mtext,回车.指定多行文字输入位置,接下来就进入多行文字编辑窗口.如下图 02 单击鼠标右键,找到背景遮罩,单击.弹出背 ...

  • Photoshop怎么去掉图片文字保留背景底色

    在使用Photoshop的过程中去除图片的文字,保留文字下图片的底色是经常需要使用到的技巧.如何在不破坏图片底色的情况下去掉图片的文字呢? 如果你的图片底色是纯粹的颜色底色,可采用吸管工具获取底色在使 ...

  • word2010如何给文字添加背景（底纹）

    文字背景不是文字的底纹,是文字的背景,相当于背景图片一个道理,下边介绍一下如何添加底纹. 操作方法 01 打开word文档后,选择要添加背景底纹的文字,如图 02 选择"页面布局" ...

  • PS如何给文字填充背景

    ps软件的功能是很强大的,如果你还没有应用得到,说明你学习的还不够,需要继续学习.ps中给文字填充背景也是有很多方法的.下面,就让小编给大家介绍一下吧. 颜色填充 01 首先,我们需要打开我们电脑的p ...