厦门网站建设叫你如何如何修复低对比度文本，让你的页面上的字体看上去更加舒服。

Web 内容无障碍指南关于无障碍内容的首要原则是内容必须是可感知的。毕竟，如果您无法确定信息或功能的存在，您就无法访问信息或功能！看来，确保用户无法辨认您的内容的最可靠方法是将其设置为不会从背景中脱颖而出的颜色 – 换句话说，具有较低的颜色对比度。

人们可能会因为各种原因而在低对比度下苦苦挣扎——也许是阳光从屏幕上反射出来的眩光——但低对比度文本对视力障碍用户（例如视力低下或色盲的用户）具有巨大的影响。最重要的是，低对比度的文字无处不在。2022年WebAIM Million 报告发现，在 100 万个最受欢迎的主页中，近84%的主页至少有一次低对比度违规，每个主页平均有31.6个不同的低对比度文本实例。Deque Systems的2021 年报告 (PDF)发现低对比度文本占30%可自动检测的可访问性缺陷，使其成为迄今为止最常见的可访问性缺陷。

修复低对比度文本可以大大提高网络的可用性。让我们深入研究如何测量对比度，轻松修复低对比度，并在我们的网站中建立足够的对比度。

获得比例

最简单的入门方法是使用颜色对比度检查器。WebAIM 对比度检查器等工具将采用您提供的一对颜色并吐出对比度。同时，如果您已经为全世界部署了站点和颜色，您可以使用全页可访问性扫描工具，例如ax DevTools扩展，它们将为您的每一位文本和背景执行颜色对比操作页面并识别页面上对比度不足的特定元素。无论哪种方式，您都会得到一个颜色对比度。

这些比率采用<some number>:1格式，范围从1 :1（无对比度——您已经将颜色与自身进行了比较）到21 :1（最大对比度，只能通过比较黑白来获得）。第一个数字越高，两种颜色之间的对比度就越大。

这个比率实际上并不是两种颜色本身有多么不同的分数，而是一种颜色在另一种颜色之上的可辨别程度的分数。例如，作为非色盲的人，CSS 颜色tomato( #ff6347) 和cornflowerblue( #6495ed) 给我的印象是非常不同的颜色：

厦门网站设计

但是，tomato和颜色对比度在一起很差：只有大约cornflowerblue1.009 : 1。这比将任何颜色与自身进行比较好不了多少！如果我们将这些颜色堆叠在一起（提前道歉！），我们可以看到这对颜色很难（如果不是完全痛苦的话）一起阅读：

你不想读这个。

我们用来获得这些比率的当前颜色对比度算法并不是试图给我们提供两种颜色之间纯粹的数学差异，而是描述基于人类感知的两种颜色之间更主观的差异。也就是说，算法比较了两种颜色的相对亮度——这基本上归结为一种颜色比另一种颜色更亮还是更亮。在这里，tomato它们cornflowerblue几乎同样明亮，这就是为什么它们很难一起阅读。

利用比率

既然我们已经了解了如何测量两种颜色之间的对比度，那么我们如何知道对比度何时足够呢？

在Web 内容可访问性指南的成功标准 1.4.3中，万维网联盟提出了您需要记住的两个关键基准：

• 大多数文本需要至少4.5 :1 的比例与其背景。
• 大文本的规则稍微宽松一些——大文本只需要满足3 :1 的比例与其背景。

如何提高你的分数

因此，您测量了文本并确定它不符合颜色对比度要求。在不彻底检查设计的情况下，你能做些什么呢？

通常，我会根据具体情况选择两种不同的方法之一进行颜色对比修复：

1. 选择较浅和较深的颜色
2. 使文本变大

来到光明/黑暗的一面

您解决颜色对比问题的主要方法是更改​​基础颜色本身。

但是，通常情况下，如果您通过更改颜色的色调来解决此问题，您会发现自己的能力有限。一方面，品牌通常有相当严格的调色板，改变色调往往会产生品牌设计系统中找不到的颜色。另一方面，正如前面的tomato示例cornflowerblue所示，颜色的色调通常对这两种颜色之间的比率的影响非常小，特别是如果这些颜色具有非常相似的亮度。

相反，我倾向于发现使一种颜色更亮和/或另一种颜色更深对对比度的影响更深远，同时感觉更符合网站的其他设计敏感性。

Embiggening 是完美的 Cromulent 

更大、更厚的文本往往比更小、更薄的文本更容易阅读，即使在低对比度的背景下也是如此。例如，在下面的示例中，两行文本的颜色相同，但如果您能完全辨别文本，则更容易辨认出文本的第一行，它更大更粗：

厦门网站设计

这种差异是 WCAG 对大文本更宽松的原因，它定义为至少是18pt粗体或至少是14pt. 请记住，这pt是一个由用户浏览器定义的字体大小单位（很像rem）——在大多数浏览器的默认设置中，这意味着阈值大约24px是粗体或两者都是粗体和大约19px。根据 WCAG ，符合此大小标准的文本只需要与其背景的比例为3 :1。

在某些情况下，您可以利用这个更宽松的阈值来发挥自己的优势，因为您可能不需要选择不同的颜色，而是可以提高字体大小或粗细。如果您纯粹使用此方法来满足您的最低阈值，则此修复往往是高度上下文相关的，并且可能仅适用于标题等内容。然而，可访问性不仅仅是达到阈值。WCAG 是要清除的最低标准，但是一旦您清除了这些最低阈值，您就可以使用诸如增大字体大小、增加字体粗细或选择更粗的字体以提供更易读的体验等策略，即使它们不会” t 提高您的对比度分数。

建立确保色彩对比度的系统方法

这些方法可以很好地为页面添加一次性颜色或修复审核显示的低对比度文本，但对于大型站点或组织而言，它不是很可持续。

许多组织正在转向设计系统来传达他们的 UI 和 UX 实践，包括他们的调色板，以及他们关于何时以及如何使用所述调色板中的每种颜色的机构知识。这些设计系统是对可接受的颜色配对知识进行编码的绝佳场所。例如，设计系统可能会为按钮确定可接受的背景颜色和文本颜色，而这些颜色可能是根据可接受的对比度选择的。设计人员和开发人员可以利用这些决策，甚至不需要了解如何选择这些颜色的完整背景背景——成功的深渊是广泛而简单的。

我还听说过一些设计系统在他们如何传达可访问的颜色配对方面变得更加明确。我从Mike Aparicio那里学到的一个技巧是他如何命名设计系统色彩的色调。在他的设计系统中，每种颜色的阴影都被赋予了一个从 100 到 900 的数字，其中 100 是最浅的阴影，600 是“基础”阴影，900 是最深的阴影，其他颜色之间填充为需要。他的色阶是这样计算的，使得“200”和较浅的颜色总是足够亮，可以与“600”的底色形成对比。这条规则很容易让设计人员和开发人员记住，确保他们更有可能选择可接受的配对。在我自己的节目 Some Antics 上。

关于对比度需要注意的一些事项

当前的对比度系统经过了相当彻底的审查，但也有一些限制，例如：

• 当前的算法没有考虑哪种颜色是前景，哪种是背景，即使在某些颜色对（例如棕色和粉红色）中，一种颜色肯定更适合作为前景而不是背景。
• 有些字体的粗体字体不是很粗，这意味着你可以满足大文本要求的字母而不符合它的精神。

未来版本的 Web 内容可访问性指南可能会使用不同的颜色对比算法，该算法会使用更多诸如此类的因素，但仍需要更多审查。如果您在设计中遇到这些限制，并且您觉得您的设计只是在技术上符合要求，我鼓励您在可能的情况下进行一些用户测试，最好是视觉障碍用户，以验证您的内容是否可读真实的人。

此外，颜色可能是一件很难平衡的事情！如果您发现难以用颜色区分不同的内容，请考虑拉动不同的杠杆，并使用图标或不同字体大小等工具来表达您的观点！这可以确保您不仅仅依靠颜色来传达意义，并且构建将信息获取到您的设计中的冗余方法几乎总是会带来更容易获得的体验。

最后总结

颜色对比问题无处不在，清除它们将大大减少网络上的访问障碍。根据具体情况，我发现通过调整颜色的明度或暗度而不是色调或饱和度来纠正低对比度最简单。在某些情况下（即标题等突出的文本），您可能可以利用字体大小和粗细。展望未来，应该系统地解决对比度问题，通常是通过编码设计系统，并最好通过用户测试进行审查。