了解网络可访问性颜色对比度和比率

网站颜色对比问题：看似较小的细节会严重影响用户体验。看起来完全可以阅读的东西可能对别人难以辨认。本文探讨了如何确保每个人都可以访问您的设计。

快速检查（例如在明亮的电话屏幕上查看网站或应用灰度过滤器）的快速检查可以提供提示，但它们并不是万无一失。主观视觉评估是不可靠的；数学精度是关键。

Web内容可访问性指南（WCAG）2.1提供了必要的标准。对于通过等级（AA），大多数文本的对比度为4.5：1，对于较大的文本而言，对比度为3：1。

WCAG比率背后的科学

WCAG指南可容纳无辅助技术的用户，考虑到诸如抗恶化文本之类的进步。比率的目标可读性针对具有20/40视觉的个体（类似于80岁的愿景）。抗氧化剂虽然在视觉上吸引人，但可以稍微降低对比度。

WCAG利用了现有标准，例如ANSI/HFES 100-2007（计算机工作站的人为因素工程），旨在为90％的计算机用户提供可访问性。

了解对比度

对比比量化了最轻和最暗色之间亮度的差异。这表示为相对亮度。

让我们检查一个可怜的例子：浅灰色（＃888888）背景上的蓝绿色文本（＃1ABC9C）。

<h1 id="您很棒的网站的标题">您很棒的网站的标题</h1>

H1 {
  背景色：＃888888;
  颜色：＃1ABC9C;
}

即使您可以阅读它，对比比仅是1.47：1 ，失败的WCAG标准。许多平台，例如WordPress，都为这种低对比度提供警告。

计算对比需要了解相对的亮度和一些数学。

相对亮度：更深的潜水

相对亮度表示颜色的亮度在0（黑色）至1（白色）的尺度上。计算它：

1. 将十六进制转换为RGB：将您的十六进制颜色代码（例如，＃1ABC9C）转换为相当于RGB（26，188，156）。在线工具简化了这一点。

2. 线性化RGB值：将每个RGB组件除以255。

3. 应用伽马校正：这说明了计算机和人类对亮度的看法之间的差异。如果线性化值小于0.03938，则除以12.92；否则，添加0.055，除以1.055，并提高到2.4的功率。

4. 计算亮度：将经伽马校正的R，G和B值分别乘以0.2126、0.7152和0.0722，然后将结果汇总。

对于我们的蓝绿色示例：最终亮度（L1）约为0.386。重复灰色背景可产生L2（约0.246）。

然后，对比度为（L1 0.05） /（L2 0.05）。在这种情况下，它大大低于WCAG最小值。

幸运的是，许多在线工具可以自动化这些计算。

确保正确对比

几种可访问性工具可以审核您的网站。波浪是一个很好的起点，确定对比度问题并提出改进。遵循其建议，重新测试和迭代，直到达到可接受的对比度为止。

主动可访问性

从一开始就合并可访问性指南。使用已建立的框架（例如引导程序或材料设计），这些框架通常提供预先测试的调色板。始终验证对比度，特别是对于自定义元素。

Derek Kay的框架审查和美国网页设计系统等资源提供了宝贵的见解和工具。

理解对比度对于创建包容性的网络体验至关重要。优先考虑可访问性有利于所有用户。请记住，即使看似较小的对比度问题也会显着影响可读性和用户体验。

以上是了解网络可访问性颜色对比度和比率的详细内容。更多信息请关注PHP中文网其他相关文章！