使用魔术数字设计可访问的调色板

文本对比度低是最常见的辅助功能问题。在排名前100万的网站中，有86%的网站至少有一次对比度违规，这可能会导致糟糕的用户体验。我们最喜欢的橙色网站也没有以身作则。有些评论几乎无法阅读：

有各种工具可以帮助我们识别和修复网站上的对比度问题。这篇文章介绍了一种设计和组织调色板的方法，这样我们就可以在问题出现之前预防它们：“魔术数字”。

我们如何知道文本和背景之间的对比度是否足够？Web内容可访问性准则(WCAG)根据颜色、文本属性(大小、粗体)和一致性级别(AA与AAA)定义了所需的最低对比度：

经验法则是，尽量选择4.5：1的最低对比度，这样就可以通过WCAG AA，而不受文本大小的影响。这提供了良好的成本-价值权衡，通常是法律上的可访问性要求。

手动计算可访问性一致性非常繁琐。取而代之的是，我建议使用一个像对比度网站这样的工具。Firefox和Chrome中的DevTools提供了很好的内置浏览器支持。最后，AXE-CORE将扫描网站以查找所有类型的可访问性违规。

这些工具是发现对比度问题的一个很好的方法，但让我首先描述一种预防它们的技术。

如果我们能为整个调色板找到一个魔术数字，以确保两种颜色之间有足够的颜色对比度，会怎么样？我第一次听说这个概念是在菲普斯·彼得的一篇博客文章中。我了解了美国的网页设计系统，立刻就被吸引住了。颜色系统提供以下幻数：

通过查看颜色名称，我知道红色-40和灰色-90(=50)肯定会通过WCAG AA(要求对比度4.5+)，而红色-60和灰色-90(=30)则不会。这将带来奇妙的设计师/开发人员体验。我不需要使用对比度检查器或查找任何东西来确保足够的对比度。差50或更多就是我所关心的。

我已经编写了一个11y对比度来计算任何遵循等级命名模式(例如，RED-20)的调色板的魔数。此工具还可以查找任何给定幻数的所有违规行为。这样可以防止在添加或调整颜色值后出现回归问题。

到目前为止，USWDS定义的颜色最多(461！)，但它使用的幻数最小。这使得允许的颜色组合范围比我检查过的任何其他调色板都要广得多。

开放颜色没有任何魔术数字。这意味着我不能可靠地从颜色命名中得出对比度(例如，灰色-90/红色-20可以，但红色-90/红色-20不行)。

USWDS和IBM Carbon之前都存在轻微违规，这表明了自动测试的重要性。

预定义的调色板很棒，但是如果我们想要更改或添加颜色怎么办？某一种颜色映射到什么等级？

由于两种颜色之间的对比度仅取决于它们的亮度值，因此可以创建从颜色到等级(介于0和100之间)的映射。对于USWDS调色板，以下是亮度界限：

丹·O·威廉姆斯(Dan O.Williams)是USWDS的维护者，他优化了这些值，以保持一致性，而不是覆盖范围。这意味着有更多的颜色不适合任何边界，即使它们在技术上可以通过WCAG对比度。虽然这种设置更具约束性，但我同意一致性带来的好处。

重要的是，我们的配色系统是一致的和可预测的，当用户选择某个等级的颜色时，他们知道他们会得到什么。这使得我们倾向于更小、更相等的范围，以及范围之间一致的间距。

如果您想要计算任何颜色的亮度值和潜在的USWDS等级，请查看我的颜色工具。

让我把所有的理论总结成一些可行的建议。有两种方法可以创建带有幻数的辅助调色板：

首先创建一个调色板，然后用11y对比度计算幻数。根据颜色的不同，幻数可能会相当高，甚至根本不存在(请参见开放颜色)。

使用固定幻数定义亮度界限，并仅使用可以映射的颜色。这种方法有更多的限制，需要更多的工作，但结果是一个面向未来的、一致的调色板。

如果你不想做完所有的工作，我建议你试试USWDS调色板。

加入Twitter或Mastodon的对话。你也可以给我发一封电子邮件。💌