颜色可访问性是视觉可访问性的重要部分。 患有各种类型的视觉障碍（例如色盲和低视力）的人以不同的方式感知颜色。 结果，对于视觉障碍的用户，颜色的含义变得不太重要或完全消失。
要了解受视觉障碍影响的人们如何感知颜色，可以使用ColorHexa的色盲模拟器测试任何颜色。 例如，以下是具有单色性，双色性和三色性的人如何看到红色（＃ff0000）：
1.检查文本的可读性
尽管使用高对比度的颜色是可访问设计的总体目标，但检查文本的可读性尤为重要。 这意味着文本（前景）和其背后的背景必须具有以下对比度：
- 普通文本至少
4.5:1，大文本至少3:1符合WCAG 2.1 AA级标准， - 普通文本至少
7:1，大文本至少4.5:1，以符合WCAG 2.1 AAA级要求。
要了解有关WCAG 2.1合规性级别的更多信息，请查阅W3C的Web内容可访问性指南 。 对于标准网站，您应该至少争取达到AA级标准。 如果您的网站专门针对弱势群体，例如老年人或残疾人，请尝试至少在连续文本块中达到AAA级标准。
为了确保文本的可读性，您可以使用在线对比度检查器工具，例如WebAIM对比度检查器 。 但是，此类工具通常需要您在应用程序中手动输入颜色值。 另外，您也可以使用浏览器扩展程序，例如适用于Chrome的WCAG色彩对比检查器，可让您快速检查页面上每个元素的色彩对比。 例如，这是针对我们的TutsPlus文章之一返回的颜色对比审核：
使用Lighthouse ，您还可以运行可访问性审核，该审核将返回所有没有足够的颜色对比度的失败HTML元素。
尽管您不必在页面上的任何地方都具有较高的色彩对比度，但是您应该使标题，文本块，超链接以及诸如按钮和输入字段之类的控件至少符合AA级标准，以确保正确的文本可读性。
2.增加字体大小或粗细
在CSS中，有两种快速解决方案可解决低色彩对比度的问题：
- 您可以增加
font-size或font-weight。 - 您可以调整前景或背景的颜色亮度（请参阅下一节）。
首先，让我们看看增加font-size或font-weight属性的值如何改善对比度可访问性。 如果您查看上面的WCAG 2.1的颜色对比度要求，您会发现对于较大的文本，使用较小的对比度就足够了。 原因是不言而喻的； 在屏幕上阅读较大的字母会更容易。
根据WCAG 2.1， 大规模文本表示：
“至少18磅或14磅的加粗字体大小将产生与中文，日文和韩文（CJK）字体相同的大小”。
由于WebAIM的文档提到它，这通常意味着至少18.66px大胆的文字， 24px正常体重的文本。 另一方面， WCAG 2.1文档建议使用相对单位而不是像素，以便用户可以在其网络浏览器中使用“仅缩放文本”功能。 在数字上，这意味着粗体文本至少为1.2em ，普通重量文本至少为1.5em 。
因此，如果您的设计允许，则可以简单地增加font-size和/或font-weight属性的值，例如：
h3 {
font-weight: bold;
font-size: 1.4em;
}3.使用HSL颜色改善颜色对比度
如果您不能增加font-size和/或font-weight ，也可以将前景色的亮度调整为背景色。 在深色背景下，您需要使字体更浅，而在浅色背景下，则需要使字体更暗。
这样做有多种方法，但我将分别向您展示最佳方法，即如何使用HSL颜色模型快速调整颜色亮度。 HSL代表色相，饱和度，亮度。 与RGB（红色，绿色，蓝色）和十六进制表示法相比，它是一种使用较少的颜色模型，但是它更加直观。 CSS-Tricks还建议使用它进行程序化颜色控制，并且浏览器支持也相对较好（当前，全球有93.42％的浏览器支持它）。
因此，让我们看一下如何使用HSL颜色模型调整颜色亮度的简单示例。 前面提到的WCAG颜色对比度检查器扩展发现，我们文章页面上的蓝色超链接的对比度比建议的最小值（ 4.14而不是4.5 ）略低。 如果在浏览器窗口的左侧打开WCAG Color Contrast Checker，在右侧打开DevTools，您将看到：
尽管颜色以十六进制表示法（ #0085b6 ）定义，但是您可以使用ColorHexa 将其快速转换为HSL值 ：
在下面的代码中，两个CSS声明导致相同的结果。 此外，十六进制符号还可以用作hsl()函数的后备方法：
a {
color: #0085b6;
color: hsl(196.2, 100%, 35.7%);
}现在，在Chrome DevTools的“样式”标签中，您只需双击并覆盖HSL，即可将其替换为十六进制值：
由于HSL是一种人类可读的格式，因此您只需更改“亮度”值（ 35.7% ）即可改善颜色对比度。 在这种情况下，您需要减少它，因为在白色背景上，您将需要稍深的字体。 您可以对其进行试验，直到左侧的WCAG颜色对比度检查器返回的值大于4.5 （不要忘记单击刷新结果按钮）。
在下面的屏幕截图中，您可以看到将亮度值从35.7%降低到33.7%足以达到4.6的色彩对比度，达到AA级要求。 这是一个很小的差异，几乎看不见，并且不会改变设计的美观性：
如果要将十六进制值作为后备添加到CSS，则可以使用ColorHexa的转换器以与以前相同的方式快速将新的HSL值转换回：
a {
color: #007dac;
color: hsl(196.2,100%,33.7%);
}4.向背景图像添加半透明的覆盖
如果在背景图像上使用文本，则还应考虑添加具有适当调整的opacity的覆盖层，以改善颜色的可访问性。 例如，看看“ Explore the World”文本字符串后面的以下背景图像：
实际上，颜色对比度并不可怕，但可以肯定地提高。 您可以通过向包含背景图像HTML元素添加深色叠加层来实现。
HTML非常简单：
<div class="overlay">
<p>Explore the World</p>
</div> CSS使用绝对定位和::after伪元素将叠加层放置在背景图片上方：
.overlay {
position: relative;
}
.overlay::after {
position: absolute;
content: "";
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: black;
opacity: 0.3;
}
p {
color: white;
opacity: 1;
z-index: 999;
} 当您需要使背景变暗时，请使用黑色覆盖层，其opacity值为0.3左右。 这样，前景（白色文本）和背景之间的颜色对比度会更高：
要完整地查看代码，请查看以下CodePen演示：
5.使用灰度滤镜测试颜色
要查看看不见颜色的人的网站外观，可以将具有grayscale()值的filter CSS属性应用于页面的body标签：
body {
filter: grayscale(100%);
}例如，这是TutsPlus Web设计教程页面的外观，没有颜色：
尽管总色盲很少见，并且大多数视力障碍者确实看到了不同的（有限的）色谱，但是这种技术仍然可以使您深入了解颜色是如何失去其含义以及需要进行哪些调整的。
包起来
您可以使用几种易于实现CSS技术来改善颜色的可访问性。 最重要的是确保文本块具有较高的颜色对比度，尤其是在字体较小的情况下。 此外，您还可以利用HSL颜色模型，图像叠加层以及opacity和filter属性，以实现前景元素和背景元素之间更好的对比度。