快速避免【视觉无障碍设计】中的雷

01.考虑有视觉障碍的用户

·视觉障碍是什么?(色盲用户眼中的世界)
·设计解决方案
·典型案例·推荐工具

02.考虑不完美的使用场景·不完美的使用场景有哪些?

·设计解决方案
·典型案例·推荐工具

快速避免【视觉无障碍设计】中的雷

 

左边为正常人眼能看到的,右边为色盲能看到的图像。

 

世界上有约2亿人,超过8%的男性和0.4%的女性都被色觉障碍的问题困扰,他们在识别部分或者全部颜色时有困难。

 

快速避免【视觉无障碍设计】中的雷

色盲用户眼中的世界演示:

快速避免【视觉无障碍设计】中的雷

设计解决方案1 – 多样的视觉变量

避免完全依赖颜色来表达信息,可将颜色、形状、尺寸、注释等视觉变量结合,同时使用。

下图中睁着眼睛的图标代表正常视图,眼睛上一划的图标代表色盲模拟视图。

快速避免【视觉无障碍设计】中的雷

设计解决方案2 – 安全的配色方案

研究得出一组无障碍配色建议。这组配色针对色盲和非色盲人士都是易辨识的。

快速避免【视觉无障碍设计】中的雷

设计解决方案3 – 尽量避免的配色

·绿&红
·绿&棕
·蓝&紫
·浅绿&黄

快速避免【视觉无障碍设计】中的雷

设计解决方案4 – 辅助的交互手段

为了在美观和友好之间权衡,我们也可以采用辅助的交互手段,避免界面中元素太多太过杂乱。

例如仅当悬停到具体位置时,出现对应的信息注释,或者为色盲人士提供单独的色盲模式切换。

快速避免【视觉无障碍设计】中的雷

快速避免【视觉无障碍设计】中的雷

快速避免【视觉无障碍设计】中的雷

快速避免【视觉无障碍设计】中的雷

推荐工具 1 :利用Photoshop

PS:选择“视图→校样设置→红色盲型/绿色盲型”

快速避免【视觉无障碍设计】中的雷

推荐工具 2 :Color Oracle

Color Oracle:   http://colororacle.org

快速避免【视觉无障碍设计】中的雷

推荐工具 3 :Colorblind Web Page Filter

Colorblind Web Page Filter   https://www.toptal.com/designers/colorfilter

快速避免【视觉无障碍设计】中的雷

考虑不完美的使用场景

快速避免【视觉无障碍设计】中的雷

考虑过不完美的使用场景吗?

快速避免【视觉无障碍设计】中的雷

设计解决方案 1 – WCAG对比度无障碍标准

快速避免【视觉无障碍设计】中的雷

设计解决方案 2 – 文本用色有足够的对比度

一般文本:白背景上能用的最浅的灰色是#767676
大文本:白背景上能用的最浅的灰色是#959595

快速避免【视觉无障碍设计】中的雷

推荐工具1

对比度测试:https://leaverou.github.io/contrast-ratio/

快速避免【视觉无障碍设计】中的雷

 

快速避免【视觉无障碍设计】中的雷

 

经验证,Google在明暗两种背景下的配色是有细微差异的,且都满足WCAG标准。

 

快速避免【视觉无障碍设计】中的雷

 

经验证,iOS在明暗两种背景下的配色,几乎都满足WCAG标准。

 

快速避免【视觉无障碍设计】中的雷

快速避免【视觉无障碍设计】中的雷

经验证,Twitter除了蓝色差一点,几乎都满足WCAG标准。

*以下情况无需考虑对比度哦~
·未激活的部分
·表单字段的占位符
·纯粹的装饰
·文本作为logo的一部分

快速避免【视觉无障碍设计】中的雷

一些小思考:

并不是要求设计能够被每个人使用,而是至少先认识到用户群体的多样性,将其拓展至一个相对的「能够受益于此设计的最大化用户群体」。希望在设计的过程和结果中减少对用户产生无意识的排除。我们可以以关注主流健全用户为前提,同时有意识地提升设计对于特殊用户群体的适用性。

快速避免【视觉无障碍设计】中的雷

 



属性标签: ,

欢迎留言

页面生成消耗的时间 0.445 秒,此页面一共查询了 117 次数据库!缓存时间:2020-08-06 18:50:14你的IP为:58.211.2.54