这些网站可以帮助你提高界面配色可读性

转自：Fly Lab（ID：flywxxn）

作者：FLYXMF

现在，有越来越的的产品开始注重界面颜色搭配的可读性。一些设计师朋友在设计界面时，常使用配色工具或是凭借经验去进行搭配。这对于视力正常的用户并不会产生什么阅读的障碍；但对于有散光、色弱色盲等问题困扰的用户也许就没那么友好了。

对于有色盲（不能分辨自然光谱中的各种颜色或某种颜色）和色弱（对颜色的辨别能力差）问题的用户，他们所看的界面有可能是完全不同的颜色。因此，当颜色发生改变时，也会对比度、饱和度、明度产生一定的影响；可能会造成有眼疾的用户没有办法清楚地辨别界面上的内容，阻碍用户的感知。

高德地图的“色觉无障碍路况”

而患有散光的人，在亚洲约占成人的三成到六成。在白色页面上搭配纯黑色的字体，很可能会让这些用户产生眩晕的情况。

在WCAG（网页内容无障碍指南）中，理解可访问性的四个原则（可感知、可操作、可理解、强大的）是非常重要的一项。其中，可感知的定义是：信息和用户界面组件必须以他们能够感知的方式呈现给用户。这意味着用户必须能够感知所呈现的信息。

这也就需要设计师在设计界面时，需要考虑到有眼疾的用户；需要留意颜色的对比度、饱和度、明度的搭配。看上去会增加设计师的工作量，但下面几个网站，能够帮助我们很好的解决此类问题。

1.COLORSAFE

http://colorsafe.co/

我们可以在网页中设置背景颜色，调节字体，生成调色板。新生成的多种颜色就是字体的安全颜色，对比度、饱和度等都是最合适的选择，我们可以从中进行挑选。

2.CONTRAST-RATIO

https://contrast-ratio.com/

页面分为左右两个部分。左面是背景色，右面是字体颜色。当输入颜色后，中间圆圈中的数值等于或大于4.5时为安全可用颜色。小于4.5时为不可用颜色。

3.WEBAIM

https://webaim.org/resources/contrastchecker/

根据WCAG 2规则的标准，无论是文字还是背景的颜色，都要至少通过AA级别的标准。

AA级别中普通字体对比度要符合4.5:1，大号字体的对比度要符合至少3:1。

AAA级别中普通字体对比度要达到4.5:1, 大号字体对比度要符合至少7:1。

所以，当我们输入文字和背景颜色后，框中的比值就是我们选取可用安全颜色的重要参考。

4.COLOR.REVIEW

https://color.review/

和之前的网站相同的用法，查看方式改为了线性。下方还有颜色可读性的解释说明。

5.COLORABLE.JXNBLK

https://colorable.jxnblk.com/fefefe/0800ff

我们可以调节色调、饱和度、亮度等参数，同时增加了随机和反向来两个按钮来查看颜色的可读性。同样是填充颜色后显示数值为4.5及以上则为可使用的安全颜色。4.5以下则为fail失败。

综上所述，要想通过WCAG的标准，那么字体颜色和背景颜色的比值必须要大于4.5；比值越大，易读性更强。

上面的五个网站可以很好地帮助我们将产品配色变得更加可靠。当我们以这些网站为辅助，同时符合WCAG的其他要求时，便可以更好的帮助有眼疾的用户使用产品。以上的这些操作并不会过多的增加我们的工作量，相反会让我们的设计更加安全，可读性更高。

参考文章：

1.https://www.w3.org/TR/WCAG20/

2.https://www.w3.org/WAI/WCAG21/quickref/?versions=2.0#qr-visual-audio-contrast-without-color

关注『网页设计精选』

看更多精选网页设计文章

↓↓↓

好文章，我在看❤️