对比度 css_更好的颜色和对比度可访问性CSS技巧

对比度 css

颜色可访问性是视觉可访问性的重要部分。 患有各种类型的视觉障碍（例如色盲和低视力）的人以不同的方式感知颜色。 结果，对于视觉障碍的用户，颜色的含义变得不太重要或完全消失。

要了解受视觉障碍影响的人们如何感知颜色，您可以使用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文章之一返回的颜色对比审核：

使用