svg 颜色_可访问的 SVG：超越模式的包容性

Carie Fisher 是一位数字无障碍开发人员和教练，他热衷于包容性前端代码和促进技术多样性。

可扩展矢量图形 (SVGs) 在 1999 年成为W3C 开放标准- 早在新技术热是黑莓手机，Napster 第一次入侵大学宿舍，Y2K 错误引发了我们所有人的恐惧。快进我们的现代数字世界，你会发现，虽然其他技术趋势已经减弱，SVG仍然围绕和蓬勃发展。这在一定程度上是由于 SVG 在带宽和性能比以往任何时候都更加重要的世界中占用空间小，尤其是在移动设备和数据量过高的情况/位置。但也因为 SVG 具有集成样式、交互性和动画选项，因此非常灵活。我们今天对SVG可以做的事情远远超出了昔日的基本形状。

如果我们专注于 SVG 的可访问性方面，我们也走过了漫长的道路。今天，我们有许多强大的模式和技术来帮助我们优化包容性。这是事实，无论你是创建图标，简单的图像，或更复杂的图像。虽然您决定使用的特定模式可能因您的特定情况和目标WCAG 符合性级别而异， 但现实是，大多数人会停止使用，专注于代码合规性，而不是实际最终用户及其需求。如果真正的包容性超出模式范围，那么在设计和开发可访问的 SVG 时，我们应考虑哪些其他因素？

SVG 颜色和对比度

可访问的 SVG 的主要焦点是屏幕阅读器合规性，这只是问题的一部分，也是解决方案的一部分。在全球范围内，视力低下和色盲的人数比失明者多14：1。我们谈论的总数是惊人的5.46亿(2.46亿低视用户加上3亿色盲用户)，而3900万合法失明的用户。 许多视力低下和色盲症患者并不依赖屏幕阅读器，而是可能使用浏览器调整大小、自定义样式表或放大软件等工具来帮助他们查看屏幕上的内容。对于这 5.46 亿人来说，屏幕阅读器输出对于他们来说可能不如确保颜色和对比度足够大，以至于他们可以在屏幕上看到 SVG，但我们该如何检查呢？

在设计 SVG 调色板时，您应该采取的第一步是查看WCAG 颜色对比度准则。虽然 SVG 和其他图标不久前不受颜色对比度要求的约束(在针对 WCAG AA 合规性时)，但最近对WCAG 2.1 准则的更新使得所有必需的非文本图像都必须遵守与相邻颜色至少 3：1 的对比度。本质上，这意味着如果您的 SVG 消失，它会从根本上改变内容的信息或功能吗？如果你能回答"否"，那么你很可能不受此准则的约束。如果可以回答"是"或"可能"，则需要确保 SVG 颜色对比度处于选中。

在演示中使用的房屋图标与浅色轮廓与深色轮廓 - 哪个更容易访问？

#svg##设计##互联网##电商##科技#