体验设计

为什么颜色对比是无障碍设计的重中之重

你的网站是否有合适的对比度?对比度是网页显示器的属性,是系统产生的最亮阴影和最暗阴影的亮度之比。高对比度是需要的,并且为所有用户(包括残疾人)提供合适的对比度,可以确保他们能够理解并与您的页面进行交互。一个不足的对比比例会让用户很难,有时甚至不可能理解页面上的内容。在设计页面时,颜色对比和所有用户与页面交互的能力应该放在首位吗-如果你遵循成功的标准网页内容易读性指引(WCAG)。

主要的颜色对比标准

让我们回顾一下需要牢记的一些主要标准:

1.4.3对比(最小)

这是一个Level标准,是每个公司都要遵循的标准,规定必须有4.5:1的对比度。大文本的对比是3:1,在需求中还定义了其他一些例外。

1.4.6对比(增强)

这是一个AAA级标准,这是一个高级标准,要求必须有一个7:1的对比度。大文本的对比是4.5:1,在需求中还定义了其他一些例外。

1.4.11非文本对比

非文本对比度是AA级标准,在2018年采用WCAG 2.1后扩展到非文本领域,对比度为3:1。例子包括图表、图形和图标中使用的颜色。

至少,设计应遵循AA标准,所陈述的比率是通过该标准的最低比率。比率越高,对比度就越高,页面对所有用户来说就越容易访问。如果是在项目的早期阶段,就更容易进行AAA级的设计。但是,如果这些更改是补救过程的一部分,那么就会变得更加困难、及时和昂贵。

但是等等,可访问性工具可以提供帮助

幸运的是,有一些工具可以帮助您为样式指南检测和定义适当的调色板。根据具体情况,您可以使用其中一个或所有工具来帮助确定正确的比率。

WebAim对比检查

WebAim对比度检查器允许您通过添加前景色和背景的十六进制代码来检查比例,以确定颜色组合是否通过或不通过适用的WCAG成功标准。

色彩对比分析仪。

在某些情况下,背景色要么来自图像,要么来自渐变,不会有十六进制代码。

颜色对比分析仪是一个本地应用程序(可用于Windows和苹果),以帮助确定对比度。除了十六进制代码的检查,其他功能还包括使用RGB和其他颜色格式的检查。该应用程序还有一个滴管工具,用于在页面上滴管,并根据滴管放置的位置显示十六进制代码。与WebAim一样,该工具还提供了颜色组合与标准比较的总结,您还可以扩展标准以获得更多信息。

Brandwood背景图像

背景图像工具允许你检查背景图像上的文本的对比度。如果你有一张图片,你需要找到最合适的地方放置文字,这就很方便了。要使用该工具,您可以上传图像并确定文本的颜色和大小。然后,移动文字周围的图像,找出最容易接近的地方。根据文本放置的位置,该工具将确定设计是否可访问。它可以在一个领域通过,在另一个领域失败。如果你对文本放置的位置有限制,这可以帮助你决定是否需要额外的渐变,或者是否应该将文本放置在图像上。

轻松解决颜色对比问题

还有许多其他工具可以帮助识别和确定颜色对比度。这是其中之一最常见的可访问性错误,但一旦识别出来,它也是最容易解决的错误之一。为了防止错误出现在您的站点上,请在设计、开发和测试期间使用这些工具。通过使用这些工具,您可以在客户看到任何问题之前识别并解决它们。欲了解更多关于辅助工具的信息,请下载我们的指南,数字可访问体验:为什么重要以及如何创造它们,阅读我们的UpSkills系列,并了解您的网站是否可访问,联系我们关于我们的可访问性智商。

关于作者

更多作者介绍

留下一个回复

这个网站使用Akismet来减少垃圾邮件。了解如何处理您的评论数据