颜色在网络设计中总是很重要 - 但它在user experience与视力有关的残疾人。选择错误的颜色可能是一个昂贵的错误。
想象一下您的访问者无法阅读您的内容，从图表中挑选重要信息或单击您的通话行动（CTA）按钮。Most likely, they'd want to leave your site — perhaps, finding no interest in ever returning. That's why color inWeb可访问性很重要。
影响颜色感知的条件比您想象的要普遍。因此，在这篇文章中，我们将介绍诸如低视力，阅读障碍和色盲之类的残疾人如何体验网络。
然后我们将解释how you can improve your website's accessibilityand UX by makingsmarter color and design choices。
视力障碍如何影响网络用户体验
Let's take a look at how various vision impairments impact the UX of your website for specific visitors.
Web Color Accessibility for Low Vision
白内障是40岁以上人群最常见的视力丧失类型，是影响对比感知的一种低视力形式。有白内障的人将难以阅读低对比度背景的文本，例如白色的浅灰色。
What people with low vision need are high contrast color schemes. High-contrast modes are actually built into Windows and Mac operating systems.
However, not everyone who needs high-contrast mode realizes it exists or knows how to turn it on. So, it’s wise to just stick to high-contrast colors on your website for ease of access.
Web Color Accessibility for Dyslexia
阅读障碍是一种学习困难，会影响阅读和写作。英国阅读障碍协会估计10% of people今天是阅读障碍。阅读障碍会影响人们看到颜色的方式，这可能会影响可读性。
虽然高对比度的配色方案，例如白色的纯黑色，将使视力丧失的人受益，但对于内乐人员来说，这可能是对比度的太大，他们可能会在页面上发现这些单词在一起。更安全的选择是在灰白色背景上深灰色。
一些网站提供了替代的配色方案，这可能对阅读障碍用户有所帮助。例如，爱尔兰的阅读障碍协会具有一个控制，该协会允许用户更改背景颜色。
Take a look — users can change the background from this...
...对此：
接下来，让我们回顾一下色盲人们如何看网络。
Web Color Accessibility for Color Blindness
您能在下图中看到数字吗？好吧，色盲的人不能。
色盲会影响世界人口的4.5％而且，与女性相比，男性占该百分比的最大部分是该百分比的最大部分。那是8％对0.5％。
Red-green color blindness accounts for the vast majority of color vision deficiency. This includes people with protanopia (red-blindness), protanomaly (red-weakness), deuteranopia (green-blindness), and deuteranomaly (green-weakness).
色盲人群的一个大问题是有关仅通过颜色传达的网站的信息。这可能会减慢或混淆色盲访问者，因为他们必须停下来找出含义。
例如，对于有正常视力的人看下面的饼图，很容易分辨出哪个百分比。
现在查看与Protanopia的人看到的相同图表：
该图表确实具有挑战性，因为某些颜色看起来太相似了。很难分辨出哪个段都有哪些值。
A better approach is to link the colored segments to the grade and percentage, or else superimpose the grade and percentage on each segment.
标记彩色区域的另一个解决方案是使用图案。Trello设计了一种色盲模式，用于使用纹理和颜色的标签卡。
Now, returning to our color contrast discussion — how do you know if your site's colors are accessible or not? Fortunately, there are guidelines and tools to help you find out.
网络可访问性颜色对比度
要达到最低对比度，如Web Content Accessibility Guidelines (WCAG)，颜色需要满足网页上文本和背景之间正确的对比度。徽标不符合Web可访问性颜色对比要求。
浏览WCAG时，您可能会看到术语A级别A，AA级和AAA级别。这些代表由WCAG定义的不同级别的符合度，最低和最高的AAA。尽管每个级别都符合标准的要求，但鼓励现场所有者超出最低符合水平，并旨在朝着更高级别迈进。
You can learn more about these levels of conformance and requirements inW3的理解水平。
Text Requirements
WCAG要求您在文本和背景颜色之间提供足够的对比度，以便任何人，包括中等视力的人，都可以阅读它。
文本和背景颜色之间所需的对比度取决于文本的大小和重量。例如，较大的文本在较低的对比度更容易读取，因此对比度要求较低。让我们指定以下要求。
- Normal Text:文本和背景之间的对比度应为4.5：1。这是AA级别选择的比率。
- 大文字。对于大文本，文本和背景之间的对比度应为3：1。18pt（大约24px）或更大的文本被认为是“大”。如果文本是粗体，则仅需要14pt（约18.5px）或更高的文本即可被视为大文本。
- 增强对比度。A contrast ratio of 7:1 for normal text, and 4.5:1 for large text is considered enhanced. This is the ratio chosen for level AAA. Black on white has the highest contrast ratio of all, at 21:1.
颜色要求
仅使用颜色指示操作，提示响应或区分您网站上的元素，才能排除难以感知颜色的用户。这就是为什么WCAG包含一个禁止颜色成为传达信息的唯一视觉手段的准则。
To meet this success criterion, you must provide another visual means besides color to convey the information. For example, a form that labels its required input fields with red text fails to meet the success criteria for use of color. However, if this form also labelled its required fields with an icon with alt text that said “Required,” then it would meet the criterion.
Background Colors for Websites
WCAG的另一个要求是将前景与背景区分开，以使用户可以轻松查看内容。
这就是为什么您必须指定背景颜色的原因。如果指定文本颜色，但您的网站上没有背景颜色，则将被认为无法满足WCAG的“可区分指南”。这是因为用户的默认背景颜色未知，无法评估足够的对比度。如果指定了背景颜色，但文本颜色却没有。
网络可访问性颜色检查器
尽管您应该熟悉上述要求，但您不需要记住它们。这是因为当今称为彩色检查器的在线工具将使用WCAG指南自动评估颜色组合，以实现对比度可访问性。大多数人不仅会告诉您颜色组合是否符合指南，还会修改任何失败的组合，以找到最接近的近似值。
让我们看一下下面最受欢迎的彩色检查器。
Webaim颜色对比检查器
Webaim提供两个对比检查器。
这standard contrast checker测试前景和背景颜色之间的对比度。在前景颜色和背景颜色框中输入您的颜色的十六进制代码。
在下面的此示例中，粉红色背景和白色背景之间的对比度为2.97：1。这使WCAG级AA和WCAG级AAA的对比度测试未能通过。
对于颜色组合失败，请使用前景或背景颜色下的亮度滑块来减轻或变暗。对比度将立即更新，以便让您知道您的颜色是否通过。如果您的品牌颜色略高于所需的对比度，这将很有用。
将粉红色与背景变暗的对比度为4.52：1，符合最小对比度要求。
第二个对比检查器，链接对比检查器，对于检查未下划线的链接非常有用。在这种情况下，对比比在链接文本和身体文本之间至少应为3：1。
Contrast Checker
使用Acart的Contrast Checker，在前景和背景颜色框中输入您的十六进制代码，并在下面的屏幕截图中突出显示。不要包括＃符号，仅包括代码的六个数字或字母。
If when you add colors you see all green dots, your colors have reached the enhanced contrast level — the colors will be fully accessible to all users.
如果您对AA的绿色点但AAA的红点，则您的颜色仍然符合AA级的最小对比度。
For convenience, you can save your color samples to the browser history. You can also share them or save them to a PDF.
如果您的颜色组合无法访问并且您没有能力更改它们，请与您的网页设计师或开发人员。You might want to use one of the following online tools to find an accessible color scheme.
Color Accessibility Test
是否想查看您的网站如何遵守上述标准？您可以分几步。我们将介绍下面网站的色彩可访问性的过程。
步骤1：确定网站上颜色的十六进制代码。
To make picking and testing colors easier, familiarize yourself with the concept of十六进制代码。十六进制代码是六个字符代码，以代表颜色的哈希开始。它们范围从＃000000（黑色）到#FFFFFF（白色）。
最好的方式找到你的网页的十六进制代码site colors is to consult your style guide if you have one, or to ask your designer or developer for a list. Otherwise, you can use a color picker tool to find the hex codes of the colors you’re using.
ColorZillais a browser extension for Firefox and Chrome browsers which lets you pick colors from a web page. Once you have installed ColorZilla in your browser, click on ColorZilla’s eyedropper icon and select从页面挑选颜色。
当彩色选择器处于活动状态时，您的光标将更改为+。Hover over the part of the page you want to check, and click to copy the hex code to your clipboard.
You can then paste the code into a document. Your colors will also be saved to ColorZilla’s picked color history. Remember to find and save the text colors and background colors, as you’ll need them both to test if they’re accessible.
步骤2：计算所有现有颜色的对比度。
现在是时候审核您网站的现有配色方案了。使用上面提到的易于使用的工具，一对一地测试调色板中的不同颜色。
假设我正在审核配色方案数字杂志娜娜（Nana）这是其特色帖子之一：
I would start by testing the color that's primarily used for heading and paragraph text (#1C1C76) against the background color (#FBFAF5).
由于这符合AAA级别的标准，因此我会进入下一种颜色：浅粉红色，称为“苦乐参半”（＃FE7773）。
Since this fails to meet the standard for any level of conformance, I'll have to adjust or replace this color in order to meet the required ratio. For now, I'll just take note of any combinations that need more contrast.
步骤3：调整现有颜色，直到达到比率为止。
测试整个配色方案后，您可以识别并提出新的颜色，以满足最小对比度。最简单的方法是提高文本颜色的不透明度，直到达到对比度为止。
For example, let's say I want to adjust the Bittersweet pink color used on NANA's site. Using WebAIM's Contrast Checker, I can simply drag the slider to the left to increase the opacity until it meets the required contrast ratio.
You can repeat this process for every color that failed to meet the required contrast ratio. When you have a full color scheme that meets the color accessibility guidelines, you can roll out the new colors in your stylesheet.
以上过程将帮助您重新设计Exisint网站。但是，如果您还没有创建网站，或者您preparing for a website redesignthat will require a whole new color scheme? In that case, you don't have to start from scratch.
Web可访问性Color Palettes
创建可访问的配色方案并不一定是一个挑战。有数十个在线工具可以自动为您生成可访问的调色板。
让我们仔细看看什么是可访问的调色板，以及哪些工具可以帮助您在下面创建一个。
Accessible Color Palette
An accessible color palette has to meet the contrast ratios designated in the WCAG guidelines (which we discussed多于）。
提醒您，您需要正常文本的对比度为4.5：1，对于AA级别的大型文本3：1。要达到AAA级，您需要正常文本的对比度为7：1，大型文本为4.5：1。
So how you do take these numerical standards and turn them into a beautiful color palette?Pick one color to start.从一种颜色中构建您的方案比多种颜色更容易。
从那里，您可以根据您的目标和需求来识别类似，互补，单色，三合会或分裂互补颜色。
Because analogous colors are thetwo colors directly next to a color on the color wheel, they probably won't create a color scheme that meets the contrast ratio. Instead, you're better off identifying complementary colors.
Complementary colors are the two colors directly across from each other on the color wheel. Since they will provide the highest amount of contrast, you should select one color to use predominantly and the other to use sparingly, as an accent.
要更深入地了解不同类型的配色方案，请查看设计师的颜色理论指南，颜色轮和配色方案。
创建可访问调色板的工具
Without tools, creating an accessible color palette would require a lot of trial and error. You'd have to pick colors that looked good together, then test and adjust each one against the background color.
To simplify the process, you can use a tool that will generate an accessible and beautiful color palette for you. Let's take a look at two popular options below.
颜色安全
颜色安全generates beautiful and accessible color schemes. To begin, chooseGet started。
要查找合适的颜色，请首先选择要使用的背景颜色。如果您知道十六进制代码，则可以在背景颜色框中输入它。
如果没有，请单击“背景颜色”框以打开颜色选择器。右侧的滑块杆从频谱中选择主要颜色。
选择一般颜色后，将左侧的圆点移动到左侧的面板中，以调节颜色的亮度和强度。您选择的颜色的十六进制代码将出现在盒子中。
You can also specify a font and font size in pixels, and a font-weight. Font-weight ranges from 100, which is the lightest text, to 900, which is the boldest. Regular text is font weight 400. For the WCAG standard option, AA corresponds to minimum contrast and AAA to enhanced contrast.
您可以看到与您的背景相匹配的所有可访问的颜色。或者，通过选择颜色色板来过滤列表。要查看特定颜色的所有阴影，请从行中选择一种颜色色板之一。
这是适合桃子背景的紫色阴影。单击颜色显示其十六进制代码以及与背景的对比度。
如果您没有看到想要的背景颜色的多种选择，请使用重来按钮并尝试增加字体大小或大胆文本。切记注意您喜欢的任何颜色的十六进制代码。
可访问的颜色生成器
可访问的颜色生成器is a simple tool for finding suitably contrasting colors. The accessibility level of AA or AAA sets the degree of color contrast.
Choose your base color by entering a hex value, or click on the color for a color picker. The generator outputs six color shades which have sufficient contrast for text which is white, gray or a variant on your original color.
一个有用的功能是将共享URL复制或添加为当前颜色的共享URL的选项，因此您不必记住它们。您可以寻找无限数量的可访问颜色。
Accessible Color Palette Examples
需要一些访问调色板灵感？查看一些例子low
这color palettes below were created using the配色方案发电机冷却器至少 - 符合WCAG级别的大型文本指南。要测试任何调色板，您可以使用最浅色的阴影作为背景颜色测试任何颜色。
Ocean Color Palette
Hex codes: #587291, #1F86FB, #EDFCFD, #19A388, #2B7494
节日调色板
十六进制代码：＃DA3338，＃2F6F55，＃4B9555，＃F9F7DC，＃43291F
Floral Color Palette
十六进制代码：＃4947F6，＃785BD7，＃B178BF，＃F9F3F0，＃B45558
热带调色板
十六进制代码：＃031627，#FDFFFC，＃389F91，＃E8373A，EF6C01
Make Your Website Colors More Accessible
By implementing high-contrast colors and labels on your website with the help of the tactics, guidelines, and工具we just reviewed, your website and content will be consumable for users with vision impairments such as low vision, dyslexia, and color blindness. Don’t be surprised if your general audience finds your website easier to use, too!
编者注：该帖子最初于2020年3月发表，并已更新以进行全面性。
最初发布于2021年2月23日7:00：00 AM，更新2021年3月18日
话题：
Web可访问性Related Articles
