关于对比性设计原则的使用方法

我们在学习网页设计等相关技术知识的时候会去了解和掌握不同的设计原则，而其中对比性原则就是非常常见的设计原则之一，下面我们就一起来了解一下，关于对比性设计都有哪些表现形式。

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

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

1.为什么基于亮度计算

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

2.计算方式

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

3.对比度的选择

WCAG2.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，这样才可以保证大的用户群体对内容进行识别。

作者：小火焰

节选：公众号：海盐社

【免责声明】：本内容转载于网络，转载目的在于传递信息。文章内容为作者个人意见，本平台对文中陈述、观点保持中立，不对所包含内容的准确性、可靠性与完整性提供形式地保证。请读者仅作参考。