色彩在网页设计中总是很重要的，但它在网页设计中起着至关重要的作用用户体验与视力有关的残疾的人。选择错误的颜色可能是一个代价高昂的错误。
想象一下，您的访问者无法读取您的内容，请从图表中挑出重要信息，或点击您的呼叫动作（CTA）按钮．最有可能的是，他们想离开你的网站 - 也许，没有任何兴趣的返回。这就是为什么颜色网络无障碍很重要。
影响颜色感知的情况比你想象的要普遍。因此，在这篇文章中，我们将介绍一些残疾人，如低视力、诵读困难和色盲，是如何体验网络的。
然后我们会解释一下你怎么能提高网站的可访问性和UX通过使聪明的颜色和设计选择．
视觉障碍如何影响Web用户体验
让我们来看看不同的视觉障碍如何为特定访问者影响你网站的UX。
低视野的网页颜色可访问性
白内障，40多人的最常见类型的视力丧失，是一种低视力的形式，影响对比感知。具有白内障的人将难以阅读在低对比度背景上的文本，例如白色浅灰色。
什么低视力人群需要有高对比度配色方案。高对比度模式实际上是内置在Windows和Mac操作系统。
然而，不是每个人谁需要高对比度模式实现它的存在或知道如何打开它。因此，它是明智的，只是坚持高对比度的颜色在您的网站，以便于访问。
Web颜色无障碍阅读障碍
诵读困难是一种影响阅读和写作的学习困难。英国阅读障碍协会估计10％的人你现在有诵读困难症。阅读障碍会影响人们对颜色的看法，这可能会影响可读性。
虽然在白色的纯黑色如纯黑色的高对比度的颜色方案，将使某人受益于视力丧失，这可能对困难人物的对比度太大 - 它们可能会在页面上的单词一起发现。更安全的选择是在白色背景的深灰色。
一些网站提供了可供选择的配色方案，这对阅读困难的用户很有帮助。例如，爱尔兰读写困难协会有一个控件，允许用户改变背景颜色。
看看 - 用户可以从这一变化的背景下...
... 为此：
接下来让我们回顾一下色盲是如何看待网络的。
Web颜色无障碍色盲
你能看到下面的图像中的数字吗？好吧，颜色盲人不能。
色盲影响视力占世界人口的4.5%男性在这一比例中所占比例最大，因为男性色盲是女性的16倍。这是8%对0.5%。
红绿色色盲占绝大多数的颜色视觉不足。这包括与红色盲（红色盲症）的人，红色弱视（红弱点），绿色盲（绿色盲）和绿色弱（绿色弱点）。
颜色盲人的大问题是关于仅通过颜色传达的网站的信息。这可以减慢或混淆色盲访客，因为它们必须停止并弄清楚含义。
例如，对于视力正常的人来说，看下面的饼图，很容易判断哪个分数与哪个百分比相符。
现在再看看患有红色盲的人看到的图表:
这张图表很难解释，因为有些颜色看起来太相似了。很难说哪个片段与哪个值对应。
更好的方法是将彩色段链接到等级和百分比，或者叠加在每个段的等级和百分比。
标签彩色区域的另一种解决方案是使用图案。Trello为标签卡设计了一种彩色盲友好模式，它使用纹理和颜色。
现在，返回我们的颜色对比度讨论 - 您如何知道您的网站是否可访问或不可访问？幸运的是，有指导方针和工具可以帮助您了解。
网页可访问性颜色对比
满足最低对比度水平，如下所示Web内容可访问性指南（WCAG），颜色需要满足网页上文本和背景之间的正确对比度。徽标不符合web可访问性颜色对比度要求。
当浏览WCAG时，您可能会看到术语级别A、级别AA和级别AAA。这些表示WCAG定义的不同一致性级别，其中A为最低，AAA为最高。虽然每个级别都符合标准的要求，但鼓励站点所有者超越最低合规级别，并朝着更高的级别前进。
您可以了解更多有关这些符合和要求的更多信息W3的理解一致性．
文本要求
WCAG要求您在文本和背景颜色之间提供足够的对比度，以便任何人(包括视力中等低的人)都能阅读它。
文本和背景颜色之间所需的对比度取决于文本的大小和重量。例如，较大的文本在较低的对比度下更容易阅读，因此对比度要求较低。让我们具体说明以下要求。
- 正常文本：文本和背景之间应该具有4.5：1的对比度。这是为AA水平选择的比率。
- 大文本。对于大文本，文本和背景之间的对比度应为3:1。18pt（约24px）或更大的文本被视为“大文本”。如果文本为粗体，则只需14pt（约18.5px）或更大的文本即可被视为大文本。
- 增强对比度。1为普通文本，和4.5：将7对比度1为大型文本被视为增强。这是级别AAA所选择的比率。黑色白色具有最高的对比度，21：1。
颜色要求
只有使用颜色来指示一个动作，提示响应，或区分网站上的元素将排除难以感知颜色的用户。这就是为什么WCAG包括一个指导指南，禁止颜色是传达信息的唯一可视化手段。
为了满足这一成功标准时，必须提供另一视觉手段除了颜色来传达信息。举例来说，其标签所需的输入栏用红色文字形式不能满足成功标准的用色。但是，如果这种形式也被标记了必填字段与替代文字说的图标“必需”，那么它将符合标准。
背景色网站
WCAG的另一个要求是将前景区分开背景，使用户能够容易地查看内容。
这就是为什么必须指定背景色。如果指定了文本颜色，但您的站点上没有背景颜色，则会被视为不符合WCAG的“可分辨指南”。这是因为用户的默认背景颜色未知，无法评估是否有足够的对比度。如果指定了背景颜色，但未指定文本颜色，则同样适用。
Web Accessibility Color Checkers
虽然您应该熟悉上面的要求，但您不需要记住它们。这是因为今天被称为颜色检查器的在线工具可以使用WCAG指南来自动评估颜色组合。大多数网站不仅会告诉你一个颜色组合是否符合指导方针，他们还会修改任何失败的组合，以找到最接近的接近。
让我们看看下面两个最流行的颜色检查器。
WebAIM颜色对比检查
WebAIM提供了两种对比检查。
的标准对比检查测试前景色和背景色之间的对比度。在前景色色和背景色框中输入颜色的十六进制代码。
在下面的这个例子中，粉红色和白色背景之间的对比度为2.97：1。这失败了WCAG水平AA和WCAG级别AAA的对比测试。
对于失败的颜色组合，使用前景色或背景色下的亮度滑块使其变亮或变暗。对比度会立即更新，让你知道你的颜色是否通过。如果你的品牌颜色刚好低于所需的对比度，这是很有用的。
在背景下加深粉红色产生的对比度为4.52:1，满足最小对比度要求。
第二个对比检查器链接对比检查，对检查未下划线的链接是有用的。在这种情况下，对比度应在链接文本和正文文本之间至少为3：1。
对比检查
使用ACart的对比检查，在前景和背景色框中输入十六进制代码，如下面的截图突出显示。不要包含#符号，只包含6个数字或字母。
如果您在查看所有绿色点时添加颜色时，颜色已达到增强的对比度 - 所有用户都可以完全访问颜色。
如果你用绿色圆点表示AA级，而用红色圆点表示AAA级，你的颜色仍然满足AA级的最小对比度。
为方便起见，您可以将颜色样本保存在浏览器历史记录。您还可以共享或将它们保存到一个PDF。
如果你的颜色组合是不可访问的，你没有办法改变它们，与你的网页设计师或讨论情况开发商．您可能需要使用以下在线工具之一来找到可访问的配色方案。
颜色可访问性测试
想看看你的网站是如何达到上述标准的吗？您可以通过几个步骤来完成。我们将在下面介绍测试网站颜色可访问性的过程。
第1步：识别网站上颜色的十六进制代码。
要使采摘和测试颜色更容易，熟悉自己的概念十六进制的编码．十六进制代码是以散列开头的六个字符代码，其代表颜色。它们的范围从＃000000（黑色）到#ffffff（白色）。
找出网站颜色的十六进制代码的最佳方式是咨询您的样式指南，如果您有一个，或者向您的设计师或开发人员询问列表。否则，您可以使用颜色选择器工具查找所使用的颜色的十六进制代码。
ColorZilla是一个浏览器扩展的Firefox和Chrome浏览器，它可以让你从一个网页挑选颜色。一旦你已经在你的浏览器上安装ColorZilla，点击ColorZilla的吸管图标，并选择从页面中选择颜色．
当颜色选择器处于活动状态时，光标将变为+．将鼠标悬停在您要检查的页面部分，然后单击将十六进制代码复制到剪贴板。
然后，您可以将代码粘贴到文档中。你的颜色也将被保存到ColorZilla的挑选颜色的历史。请记住，查找和保存文本颜色和背景颜色，你会他们都需要测试，如果他们访问。
第2步：计算所有现有颜色的对比度。
现在是时候审核您网站现有的配色方案了。使用上面提到的易于使用的工具，在网站的背景颜色中测试调色板中的不同颜色。
假设我正在审核配色方案数字杂志娜娜。以下是其中一个特色的帖子：
我将通过测试该宏主要用于标题和段落文本（＃1C1C76）对背景颜色（＃FBFAF5）的颜色开始。
因为这符合AAA级的标准，我将转向下一种颜色:浅粉色“Bittersweet”(#FE7773)。
由于这不符合一致性的任何级别的标准，我将不得不调整或者为了满足所需的比率替换这种颜色。现在，我就注意到了需要更多的对比的任意组合。
步骤3：调整现有颜色，直到它们满足比率。
一旦完成了整个配色方案的测试，就可以确定并提出新的颜色，以满足最低对比度要求。最简单的方法是增加文本颜色的不透明度，直到它满足对比度。
例如，假设我想调整纳纳网站上使用的粉刺粉红色颜色。使用Webaim的对比检查器，我可以简单地将滑块拖到左侧，以增加不透明度，直到它符合所需的对比度。
您可以重复此过程为每个未能达到所要求的对比度色彩。当你有符合颜色无障碍指南的完整的配色方案，你可以在你的样式表推出新的颜色。
上述流程将帮助您重新设计exisint网站。但是如果你还没有创建你的网站，或者你准备进行网站改版这将需要一个全新的配色方案？在这种情况下，你不必从头开始。
无障碍网页调色板
创建一个可访问的配色方案不一定是一个挑战。有几十种在线工具可以自动为您生成可访问的调色板。
让我们仔细看看什么是可访问的调色板是什么，什么工具可以帮助您创建下面的一个。
残疾人专用调色板
可访问的颜色调色板必须满足WCAG指南中指定的对比度（我们讨论过以上).
提醒一下，你需要在AA级中，普通文本的对比度为4.5:1，大文本的对比度为3:1。要达到AAA级，您需要普通文本的对比度为7:1，大型文本的对比度为4.5:1。
那么你如何采取这些数字标准并将它们转变为美丽的调色板？挑选一种颜色来启动。从一种颜色构建方案比从多种颜色构建方案更容易。
从那里，您可以根据您的目标和需求识别类似的，互补的单色，三合一或分体式互补颜色。
因为类似的颜色是两种颜色直接在颜色轮上的颜色旁边，它们可能不会产生满足对比度的颜色方案。相反，你最好禁止识别互补色彩。
互补颜色是两种颜色在色轮上彼此直接跨越。由于它们将提供最高的对比度，因此您应该选择一种颜色以主要使用，另一个颜色谨慎使用，作为重音。
要更深入地查看不同类型的颜色方案，请退房色彩理论、颜色轮和配色方案的设计师指南．
用于创建可访问的调色板的工具
没有工具，创建一个可访问的调色板将需要大量的试验和错误的。你必须选择那些看上去很好在一起，然后进行测试和调整对背景颜色每一个颜色。
为简化过程，您可以使用将为您生成可访问和美丽的调色板的工具。让我们看看下面的两个流行选项。
色安全
色安全产生美丽和可访问的颜色方案。开始，选择开始．
找到合适的颜色，首先选择要使用的背景颜色。如果您知道HEX代码，您可以在背景颜色框中输入它。
如果没有，单击背景色框打开颜色选择器。右边的滑块从光谱中选择主要的颜色。
一旦选择了一般颜色，将左侧的面板中的点移动以调整颜色的亮度和强度。您选择的颜色的十六进制代码将出现在框中。
你也可以指定字体和像素字体大小和字体重量。字体重量为100，这是最轻的文本，至900，这是最大胆。常规的文本是字体粗细400对于WCAG标准选项，AA对应于最小对比度和AAA到增强的对比度。
您可以看到ColorSafe找到的所有可访问的颜色，以匹配您的背景。或者，通过选择颜色样本过滤列表。要查看特定颜色的所有色度，请从行中选择一个色板。
这里有一些适合桃色背景的紫色。点击一种颜色会显示它的十六进制代码和与背景的对比度。
如果你没有看到很多你想要的背景色选项，使用重新开始按钮，并尝试增大字体大小或加粗文本。记住要注意你喜欢的任何颜色的十六进制代码。
访问颜色发电机
访问颜色发电机是用于查找适当的对比色的简单工具。AA或AAA的可进入等级设置的色彩对比程度。
通过输入十六进制值选择基色颜色，或单击颜色选择器的颜色。发电机输出六个颜色阴影，对原始颜色的白色，灰色或变体具有足够的对比度。
一个有用的功能是，可以选择复制当前颜色的共享URL或将其添加到书签中，这样您就不必记住它们。您可以查找无限数量的可访问颜色。
可访问的调色板示例
需要一些方便的吗调色板灵感？看看下面的一些例子
在调色板下面是使用创建的配色方案生成器冷却- 并且 - 在最低限度 - 符合WCAG级别的大型文本指南。要测试任何调色板，您可以使用最轻的阴影作为背景颜色测试任何颜色。
海洋调色板
十六进制代码：＃587291，＃1F86FB，#EDFCFD，＃19A388，＃2B7494
假日调色板
十六进制代码：#DA3338、#2F6F55、#4B9555、#F9F7DC、#43291F
碎花调色板
十六进制代码：＃4947f6，＃785bd7，＃b178bf，＃f9f3f0，＃b45558
热带调色板
十六进制代码:#031627，#FDFFFC， #389F91， #E8373A,EF6C01
让你的网站的颜色更易于访问
在您的网站实现高对比度的颜色和标签用的战术，指导帮助下，和工具我们刚刚审核，您的网站和内容将为具有视力障碍等用户提供的用户消费品，例如低视野，诵读和色盲。如果您的普遍观众发现您的网站更容易使用，请不要惊讶！
编者按:本文最初发表于2020年3月，为全面起见已进行更新。
最初发布于2021年2月23日上午7:00:00，更新于2021年3月18日
主题:
网络可访问性相关文章
