运用色彩无障碍设计工具来提高你的网页设计

2019年9月24日14:22:40 发表评论 41 views

作者:Darren

你知道世界上百分之四的人口是色盲吗?不同类型的色盲以及其他视觉障碍,会影响网页的可读性与可用性。这取决于你是否确保了网页的设计,对所有用户群体来说都是无障碍设计,无论他们看到的色彩是怎么样的。而有了合适的工具,这种设计的运用比你想象的还要简单。

什么是无障碍性(Accessibility)?

运用色彩无障碍设计工具来提高你的网页设计

网页设计中,有众多无障碍检测与标准,整体旨在为任何一位用户提供一款一目了然的网页设计。无障碍设计涉及到方方面面,例如音频、网页导航、用户反馈、文本属性以及色彩。本文将着重于介绍后者色彩的运用,因其为早期设计环节中最易鉴定的项目之一,也容易在问题出现前更正过来。

对于一个像网页这样的视觉媒体来说,不同类型的视力障碍,包括色盲是首要问题。根据Colour Blind Awareness网站的数据显示,全世界有8.3%的男性和0.05%的女性有一定的色觉异常。

查看不同种类色觉的对比与介绍:colourblindawareness.org

无障碍指南与标准

对比(Contrast),是色彩无障碍设计中的重中之重。它包含了前景与背景中的色彩对比,文本色彩对比(包括粗细大小),以及所有用户界面元素的色彩对比。

有一份名叫《Web内容无障碍指南》(Web Content Accessibility Guidelines (WCAG) )的文章列出过网页无障碍设计的最佳操作,其中还包括了色彩方面。WCAG目前更新到了2.1版本,内容涵盖有关让网页设计更加无障碍化的所有方面。文章链接为:w3.org/TR/WCAG21/。其中写道:有关色彩方面,我们的建议是:“色彩并非传递信息、动作指示、策动回应或区别某一视觉元素的唯一视觉手法。”

最佳色彩无障碍设计操作:

  • 在背景与前景之间加入足够的对比;这也适用于其他相互联系的元素类型
  • 选用色彩或其他方式传递信息
  • 确保互动元素与网页导航的可识别性(仅对悬浮位置进行细微的颜色更改是不够的)
  • 确保表单标签的色彩可读性;同时也将此应用在误差与反馈上
  • 文本与互动元素至少要有4.5:1的对比度以上

10种色彩无障碍设计工具

有很多很好的工具可以帮助你检测从对比到配色的所有内容,以及构建尽可能无障碍的色板,以下是我们挑选的一些格外好用的例子。

01.WebAIM Color Contrast Checker

运用色彩无障碍设计工具来提高你的网页设计

WebAIM Color Contrast Checker检测的是背景与前景色彩之间的对比度,针对比例在4.5:1上或更高的对比。

02.Colorable

运用色彩无障碍设计工具来提高你的网页设计

Colorable测试对比的方法,是借助了能让每一种色彩变得清晰可辨的不同亮度(即发光亮度)。它不仅运用了基础色调,还将亮度与周围物体因素考虑了进去。

03.Color Safe

运用色彩无障碍设计工具来提高你的网页设计

Color Safe能根据WCAG指南,帮助你创建无障碍色板。这些色板可保证背景的正确使用与最优可读性的对比度。

04.Web Accessibility Guidelines

运用色彩无障碍设计工具来提高你的网页设计

Web Accessibility Guidelines拥有一组色彩对比工具,能将不同背景的不同色彩一一呈现出来,并确保内容是易读易懂的。而用它创建的背景与文本选项,也将会变得清晰明了。

05.Stark

运用色彩无障碍设计工具来提高你的网页设计

Stark是一款Adobe XD与Sketch插件,可在设计工作的时候用来测试无障碍性。检测对比,运行色盲模拟器,甚至是获取色彩改善提示,轻而易举。

06.Colors for All

运用色彩无障碍设计工具来提高你的网页设计

Color for All是一个巨大的网格式色彩可视化图,能显示符合WCAG标准的色彩组合的命令指示。

07.Color Blind Web Page Filter

运用色彩无障碍设计工具来提高你的网页设计
https://www.toptal.com/designers/colorfilter

Toptal家的这款Color Blind Web Page Filter能够输入URL链接,设置可见滤光片,还能预览网页的整体设计。这个工具能很好地帮助你直观地了解设计的无障碍性。

08.Color Review

运用色彩无障碍设计工具来提高你的网页设计
https://color.review/check/FEDC2A-5A3B5D

Color Review是一款具备样本与吸管工具的app,能帮助你检测色彩对比,还可用在浏览器上。可试试随便翻阅一组颜色,看看体验感极差的阅读感觉是怎么样。

09.Colors

运用色彩无障碍设计工具来提高你的网页设计

Colors包含了90种无障碍网页设计的颜色对,每一种组合代表了一种尺寸准则与比例,由此你也能够知道每一对颜色对是如何运作的。如果你想创建无障碍色板的话,不妨试试Colors。

10.Contrast Grid

运用色彩无障碍设计工具来提高你的网页设计

Contrast Grid能帮助你检测前景与背景色组是否符合WCAG的基本对比要求。通过输入你选择的颜色,可为你的设计选项创建一个表格。

对于设计一个网页来说,无障碍性不容或缺。拥有健全的色觉的你,不妨退一步站在那些有色觉缺陷的人的角度,去考虑如何设计。无障碍性应该是你设计的每一款网页时,都需要考虑的话题。如果有一部分的用户群体看不见你的设计,那么网页再多么的绚丽精致,又有什么意义呢?

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: