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

2019-09-2414:22:40网页设计Comments3,359 views字数 2092阅读模式

作者:Darren文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/16639.html

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

什么是无障碍性(Accessibility)?

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

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

对于一个像网页这样的视觉媒体来说,不同类型的视力障碍,包括色盲是首要问题。根据Colour Blind Awareness网站的数据显示,全世界有8.3%的男性和0.05%的女性有一定的色觉异常。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/16639.html

查看不同种类色觉的对比与介绍:colourblindawareness.org文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/16639.html

无障碍指南与标准

对比(Contrast),是色彩无障碍设计中的重中之重。它包含了前景与背景中的色彩对比,文本色彩对比(包括粗细大小),以及所有用户界面元素的色彩对比。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/16639.html

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

最佳色彩无障碍设计操作:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/16639.html

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

10种色彩无障碍设计工具

有很多很好的工具可以帮助你检测从对比到配色的所有内容,以及构建尽可能无障碍的色板,以下是我们挑选的一些格外好用的例子。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/16639.html

01.WebAIM Color Contrast Checker文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/16639.html

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

WebAIM Color Contrast Checker检测的是背景与前景色彩之间的对比度,针对比例在4.5:1上或更高的对比。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/16639.html

02.Colorable文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/16639.html

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

Colorable测试对比的方法,是借助了能让每一种色彩变得清晰可辨的不同亮度(即发光亮度)。它不仅运用了基础色调,还将亮度与周围物体因素考虑了进去。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/16639.html

03.Color Safe文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/16639.html

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

Color Safe能根据WCAG指南,帮助你创建无障碍色板。这些色板可保证背景的正确使用与最优可读性的对比度。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/16639.html

04.Web Accessibility Guidelines文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/16639.html

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

Web Accessibility Guidelines拥有一组色彩对比工具,能将不同背景的不同色彩一一呈现出来,并确保内容是易读易懂的。而用它创建的背景与文本选项,也将会变得清晰明了。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/16639.html

05.Stark文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/16639.html

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

Stark是一款Adobe XD与Sketch插件,可在设计工作的时候用来测试无障碍性。检测对比,运行色盲模拟器,甚至是获取色彩改善提示,轻而易举。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/16639.html

06.Colors for All文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/16639.html

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

Color for All是一个巨大的网格式色彩可视化图,能显示符合WCAG标准的色彩组合的命令指示。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/16639.html

07.Color Blind Web Page Filter文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/16639.html

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

Toptal家的这款Color Blind Web Page Filter能够输入URL链接,设置可见滤光片,还能预览网页的整体设计。这个工具能很好地帮助你直观地了解设计的无障碍性。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/16639.html

08.Color Review文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/16639.html

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

Color Review是一款具备样本与吸管工具的app,能帮助你检测色彩对比,还可用在浏览器上。可试试随便翻阅一组颜色,看看体验感极差的阅读感觉是怎么样。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/16639.html

09.Colors文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/16639.html

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

Colors包含了90种无障碍网页设计的颜色对,每一种组合代表了一种尺寸准则与比例,由此你也能够知道每一对颜色对是如何运作的。如果你想创建无障碍色板的话,不妨试试Colors。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/16639.html

10.Contrast Grid文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/16639.html

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

Contrast Grid能帮助你检测前景与背景色组是否符合WCAG的基本对比要求。通过输入你选择的颜色,可为你的设计选项创建一个表格。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/16639.html

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

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/16639.html
  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/sheji/16639.html

Comment

匿名网友 填写信息

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

确定