深度译文:设计系统中的自适应颜色(Part 03)

Adobe Spectrum 色板

自适应色板的整个概念源于我们在Adobe的设计系统Spectrum中解决颜色问题的经验。在做这项工作的时候，我们支持六种不同的颜色主题，所有颜色主题都需要与美学相关，与背景颜色具有相似的感知对比度，并遵循统一的可访问性指南。

我们首先根据目标对比度生成灰色系统。它运作良好，但是当我们尝试为自己的颜色做同样的事情时，它却变得有点复杂了。

根据目标对比度生成灰度色板

对于颜色，我们希望依靠相同的方法来确定哪些样本可用于大文本和小文本（基于WCAG对比指南）。当简单地在每个主题上生成相同对比度的样本时，我们意识到问题并不是想象中的那么简单。正如我在之前的文章中提到的那样，颜色感知受到相邻和周围颜色的影响，即使对比度一致，在较暗背景下颜色也会显得较低。为了使颜色对比在主题中看起来一致，实际对比度必须根据主题背景的亮度而改变。

在不同的背景环境下调整对比度

我们也认识到某些颜色的亮度对其可识别性至关重要。例如，深黄色不再是黄色。因此，我们得出结论，某些颜色不能用于文本或图形元素，因为它们不能满足颜色对比的标准并保持其可识别的性质。

当满足对比度要求时，黄色看起来已经不再是黄色

最后，我们创建了一个名为Leonardo的算法，在给定这些约束和异常的情况下生成所有颜色。

Leonardo

该颜色生成算法基于预定义约束和可变目标对比率。目标比率由输入颜色的色调和输入背景颜色的亮度决定，使我们能够在设计系统的调色板内以及背景颜色亮度的任何背景下识别任何颜色的适当对比度。对背景颜色的依赖性使我们能够根据需要增加或减少对比度。

基于可变背景，通过对比生成所有颜色配色方案

该工具允许我们为每个UI颜色传递任意数量的色调度，为每个主题传递一个背景颜色值。 当我们包含我们的分类调色板时，我们需要保留13个独特的值。 每种颜色有4种色调，每种背景颜色有11种色调，它给出了任何给定主题的59种色板输出。 就纯灰度背景颜色而言，它能够生成255种不同的主题（基于亮度值）或15,045色样本。 但是，我们可以通过彩色背景并生成仍然符合我们定义的对比度的色板。 这种容量，保守估计至少会有2,676,240种可能的颜色样本。

Leonardo还可以为任何给定的主题生成任何颜色配色方案，为我们的团队在未来的调整或修改我们的调色板和主题方面提供极大的灵活性。

静电说：目前Adobe Design System仅仅作为一种设计系统存在，并没有现成的工具为我们使用。但是接下来静电会给大家介绍一款对比度的测试工具，可以说是非常专业也非常好用的。

扩展阅读：color.review对比度测试工具

静电说：Color.Review是一个基于Web的工具，可以让我们像苹果工程师一样测试前景色和背景色的对比友好程度。网址：https://color.review/

通过调整页面右侧的前景色和背景色，我们就可以测试出你当前的配色的对比度评级，AAA为最好，AA及格，如果显示Fail，那说明可用性很差，配色要注意咯~(GIF图颜色有缺失，请注意)

小伙伴们速度收藏这款专业的对比度测试工具吧！在亮色背景和暗色背景配色后都来测一测，看看测试结果如何。

作者：Nate Baldwin    翻译：静电

更多深度设计文章