在现代互联网应用中，颜色是用户界面的重要部分。 不仅吸引用户的目光，还用于向用户传递信息，但是对于某些用户（如色盲或弱视用户）来说，颜色可能会成为一个问题。
为了确保您的应用在所有用户之间都是可用的，使用正确的颜色和对比度是至关重要的。 在本文中，我们将探讨如何使用颜色和对比度来提高无障碍性。
颜色和无障碍性
颜色对于那些遇到视觉障碍和色盲的人来说可能是一个问题，但是您可以采取一些步骤来确保您的应用对所有人都是可用的。
确保重要信息以另一种方式呈现
减少对颜色的依赖是保证无障碍性的最简单方法之一。 使用大小，位置，形状，样式和文本来传递重要的信息。 这将帮助所有人理解您的应用。
选择数据可视化方案
当您将数据可视化为颜色时，请确保您的选择可轻松区分。 色盲友好的颜色方案应该是优先考虑的。 您可以使用一些在线工具来测试您的颜色选择，例如色盲模拟工具。
使用对比度
为了确保您的文本和背景颜色都能很好的呈现，请使用足够的对比度。 对比度比较强的颜色方案能够让有弱视的用户也能容易地阅读您的应用。
如何检测对比度
对比度是两个色值之间的区别，通常在 1（最低对比度）至 21（最高对比度）之间。 Web 内容无障碍性指南（WCAG）2.0 规范要求文本至少具有 4.5：1 的颜色对比度。
在实际的应用中，您可以使用这些工具来检测您计划使用的颜色提供的对比度：
1. WebAIM
WebAIM 提供了一系列工具，其中 WCAG 2.0 颜色对比度比较器用于测试两种颜色之间的对比度。 此工具还将提供颜色建议，可以改善文本和背景颜色之间的对比度。
网址：https://webaim.org/resources/contrastchecker/
2. Contrast Ratio
Contrast Ratio 是一款 Chrome 插件。 它将颜色与 WCAG 2.0 所需的颜色对比度比较，为您提供准确的颜色对比度。
网址：https://chrome.google.com/webstore/detail/contrast-ratio/nbdpnjmgfmocadanhmeiefaaiibombld
3. Contrast Checker
Contrast Checker 是与 WebAIM 的颜色对比度比较器类似的工具。 根据 WCAG 2.0 的标准，它确定了两种颜色之间的对比度。
网址：https://www.checkmycolours.com/
代码示例
让我们通过下面这个实例来理解如何使用颜色和对比度提高无障碍性。
在这个例子中，我们有一个文字和背景颜色，让我们确认它们是否满足 WCAG 2.0 颜色对比度规范。
<div style="background: #333333; color: #FFFFFF; padding: 20px;"> <h2>Creating Accessible Web Applications</h2> <p>In this tutorial, we will learn how to create a web page that is accessible to all users.</p> <a href="#">Learn More</a> </div>
使用 WebAIM 的颜色对比度比较器，我们得到下面这个结果：
颜色对比度仅为 3.94：1，比 WCAG 2.0 要求的 4.5：1 低，因此建议更改文本颜色。
下面是经过改善颜色对比度之后的代码：
<div style="background: #333333; color: #FAFAFA; padding: 20px;"> <h2>Creating Accessible Web Applications</h2> <p>In this tutorial, we will learn how to create a web page that is accessible to all users.</p> <a href="#">Learn More</a> </div>
使用 WebAIM 现在启用的颜色对比度比较器，我们得到了这样的结果：
现在颜色对比度大于或等于 4.5：1，符合 WCAG 2.0 的颜色对比度要求。
总结
无障碍性是我们现代互联网应用的重要一环。 颜色方案与对比度是优化用户界面使它们面向所有人的关键因素。 通过实现足够的对比度并考虑文本和背景颜色之间的比例，您可以为所有用户创造出只有最小限度不同，并且使他们易于理解和使用的应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646dc2ef968c7c53b0c63c76