网页无障碍设计：色彩对比度

在电子产品中，文字和背景的色彩对比是非常重要的，它影响人们如何感知接受信息（换句话说你的用户是否更够直观的接收到信息）。

每个人看待事物的角度是不一样的，我们的眼睛和大脑非常善于区分形状、图案和颜色。但是对于相当一部分人来说，区分一些颜色和阴影是比较困难的。这种缺陷通常被称为色盲，但这可能存在一些误解，或许被称为色视力缺乏更合适。

统计数据显示，每12名中男性或每200个女性中就有一个人有某种程度的色视力缺乏。完全色盲是极其罕见的。但是受色彩影响的不止是色盲群体，还有低视力群体，而且这些人更容易收到色彩对比的影响。

对于那些认为色彩的无障碍设计对于他们的目标受众不重要的人，我想说，捏们错了。颜色对比问题关系到你的每一个用户，不管是不是色盲，在缺乏对比度的界面或网站上阅读信息的时候，每个人都会有不同程度的阅读困难。

颜色对比如何影响数字产品设计

在进行产品设计的的时候，需要考虑一下两个基本原则。

1.不要把颜色当作传达信息的唯一方式

任何用颜色表示的事物，都需要有辅助的区分方式。比如，对于错误状态、成功状态、或者系统警告，一定要结合文字信息和图像信息来共同向用户传达正在发生的事情。

2.颜色对比

为了保证文字的可读性和其他元素的可识别性，它们需要与背景有足够的对比度。在本文中，我将分享一些好用的工具，帮你测试颜色组合的可用性。

在产品设计的项目中每一个人（包括产品经理、开发工程师、设计师甚至客户）都有一个误解：网站的无障碍设计是昂贵又困难的，其实并不是这样。从零开始设计一个无障碍的网站是不会增加额外的功能和内容的，因此不会需要我们额外的成本和人力。但是修复一个已经让用户理解困难的网站可能需要一些精力。

我和我的团队最近在为客户设计一个设计系统。考虑到这个问题，我们决定借此机会考虑网站的易访问性，并更新用户界面中的色彩，使其更易于访问。

色彩对比在开发数字产品的时候是非常重要的，它帮助你的用户阅读信息，并对你的信息有一个清晰的了解。合适的对比度可以帮助有视力障碍的人和在不完美的场景中（弱光环境、屏幕老旧）的用户更好的使用你的产品。

为什么你要制造一些你的用户不会使用的东西

我相信大家这么做都不是故意的。团队总是迫于发布产品的新功能，努力地保证产品在合理的时间和预算内。这让我们很少有机会停下来，去考虑一些可能会影响整体产品开发进度的易用性问题。

颜色对比度和颜色的可用性可能会吓退一些设计师，有些设计师会担心颜色的可用性会限制他们调色板的多样性，从而限制他们的创意。

作为一个设计师，这里的设计师我指的是任何一个以任何方式可以影响产品设计的人，我们被训练来解决问题，从而更好的影响人们的生活。但是我们很少考虑什么是更好的。我们的工作需要基于产品的影响，超越审美需要考虑的更多。

除此之外，无障碍设计也是人性化的最佳实践。因为不是每个人用相同的方式感知颜色，所以我们在产品设计使用颜色时候，要考虑颜色的可识别性。

符合WCAG2.0的标准

WCAG（The Web Content Accessibility Guidelines）是一套用于确定色彩对比度的无障碍设计指南。

WCAG基于一套数学公式推荐了可访问的网页内容中文本与背景之间的最小对比度。

最小对比度标准

1.4.3对比度（最小）要求如下：文字和文字图像的视觉显示对比度至少是4.5:1

这是一些对比度刚好是4.5:1的例子。

对于我们大多数人来说，上面的组合的可读性并不是很好，这就是为什么4.5:1是最小对比度。

注意点：WCAG要求至少4.5:1的对比度，但是你不能四舍五入到4.5:1，比如说，我们常用的灰色#777777的对比度是4.48:1，它并没有满足WCAG的最小对比度要求。

大字体：大文本更容易阅读，所以对比度的要求降低为3:1。WCAG将大文本定义为等于或大于18pt的字体，或者大于14pt的粗体。

比如：

注意点：

文本或文本图像仅仅是界面中的装饰性设计元素，而非对用户有功能性作用的界面，又或者是包含其他视觉内容的图片的一部分，没有对比度要求。

商标

文本是logo或品牌商标的一部分时，无对比度要求。

1.4.6对比度（增强版）

AAA级和AA姐的要求准则不同的是对对比度的要求更严格：普通文本的对比度要求为7:1，大文本的对比度要求是4.5:1.

工具和资源

1、https://accessible-colors.com

这个网站可以帮你测试文本大小和背景的颜色对比度。如果你的颜色组合不符合对比度标准，它会通过修改颜色明度找到最接近的可用的颜色组合。

2、https://contrast-finder.tanaguru.com

这个网站是可以做两件事情的在线工具：1.他可以计算出两种颜色之间的对比度是否足够高；2.如果你选择的颜色没有通过对比度测试，它会提供替代性颜色。

3、https://getstark.co

这个网站是既是色盲模拟器，也是sketch上的对比度检查插件。在你的sketch的使用插件，你可以在软件预览窗口很简单的检查你的设计。这是一个很伟大的工具，可以确保你的设计，对那些不能够像视觉正常的普通人那样轻松获取信息的人来说，你的设计真的很贴心又伟大。

4、https://whocanuse.com/

这个工具可以让人们关注和理解色彩对比是如何影响有视觉障碍的人。这是一个非常酷的工具，可以让你知道不同的人是如何接受到你设计中的颜色的。

当然也有很多相似的工具，比如：https://contrastchecker.comand https://contrast-ratio.com

最后，这有一篇优秀的文章，可以帮你更深入的了解这个问题：WebAIM article about color contrast and low-vision

文档化和团队化颜色系统

最后，创建一个可用性的色彩系统最重要的方面是：让你的团队能够在需要的时候用到它，因此每个人都能够正确地使用颜色系统。这不仅能够减少混乱和不一致性，还能确保颜色的可用性，是你们团队的优先考虑事项。我的建议是在UI组件和设计系统中明确地标出特定颜色组合的可用性等级。

小彩蛋

如果你已经读到这里，我想跟你分享一个小彩蛋，帮你理解和进行色盲测试。

我和大家分享一个最常用的色盲测试方法，叫做Ishihara Color Test，这个测试是一个叫Shinobu Ishihara的东京大学的教授发明的，它包含一系列测试色盲的色板。

测试网址：https://www.colour-blindness.com/colour-blindness-tests/ishihara-colour-test-plates/

总结

就是以上这些，希望对你有用，无障碍设计是我一直希望提高的。我正在练习我在讲解的知识。这只是一些可以让你的产品更可用的技巧，但是这只与色彩的可用性有关。

如果有你使用的设计资源这里没有涉及到，请在评论区分享给我们，交流让我们拥有一个更具有包容性的网络。

文章来自：Tania Vieira，一个来自于里斯本的用户体验设计师。文章翻译已经得到作者的许可。

原文地址：Web Accessibility 101: Color contrast