配色的用户体验——颜色对比度

访客4年前黑客工具891

编辑导语:我们在利用手机和电脑时,恒久的利用会让我们眼睛感想疲惫,所以一个柔和的舒适的画面很重要;好比手机和电脑的屏幕可以配置夜间模式,在晚上看手机可以舒缓一点;本文作者对配色中的颜色比拟度做出了阐明,我们一起来看一下。

配色的用户体验——颜色比拟度

我猜在你踏入设计这个圈子的时候,必然有被推荐过 Robin Williams 的《写给各人看的设计书》——巨大的设计道理在书中被凝炼为亲密性、对齐、反复和比拟四个根基原则。

但其实我本日要说到的内容和这本书的干系不大,我只是想引出「比拟」这个观念,在设计中有何等基本且重要。

前面我在《Google 用户研究:文本框设计原则》中提到过,Google Design 对付文本框可用性研究的主要发明,个中有一条是:文本框的底部线条与配景的颜色比拟度最小应为3:1;因为有足够的颜色比拟才气够让控件在场景中具有更高的易见性。

配色的用户体验:颜色比拟度

但你是否真的相识颜色比拟度的观念?这个值为什么是「3:1」,又应该怎么获得「3:1」?颜色比拟度对我们在设计进程有什么影响,能起到什么浸染?

一、为什么会有「比拟度尺度」

这个问题其实很容易解答。

在硬件设备制造商繁多的当下,产物设计者其实是无法确保每一个用户在利用你的产物时,所看到的界面和设计师在显示器上看起来的一样完美。

总会有用户利用的是显示机能较差的设备。甚至你需要思量的还不只仅是设备因素,产物的利用情况(室外或暗淡室内)、主流用户群体的视力环境等等,都大概要求你做到越发无障碍的视觉体验。

不然很大概在真实的利用场景中,你的产物险些没法利用。

配色的用户体验:颜色比拟度

但仅凭设计师的履历举办判定虽然是不现实的,于是乎业界便降生了WCAG(Web Content Accessibility Guideline,Web内容无障碍指南)尺度;固然该尺度是为了满意有视觉障碍用户的视觉体验,但满意该尺度后,同样也能辅佐普通用户更利便地利用。

实际上WCAG中还包括了很多无障碍设计尺度条例,从视力、听力、举动和智力等诸多方面指导产物设计者做出越发易于利用的产物。

但本日我主要提炼出「颜色比拟度无障碍尺度」这一项来说一说。

二、颜色比拟度无障碍尺度

通过阅读机能评估,色相和饱和度对可读性的影响其实很小,甚至没有;真正影响阅读机能的其实是颜色明度造成的颜色比拟度(颜色明度的观念,我在《用理性与数学,推导产物色彩系统》有提过,在这里就不再赘述了)。

WCAG颜色比拟度尺度界说的目标是让文本和配景之间存在足够的比拟度,确保绝大范畴视力水平的人群都易于阅读;也就是说,切合WCAG该尺度的文字或图像,将有足够高的色彩比拟度,使之很容易地从配景中被辨识出来。

WCAG拟定了两条尺度条例,别离是「1.4.3条例:比拟度(最小)尺度」(即AA尺度)和「1.4.6条例:比拟度(增强)尺度」(即AAA尺度);AAA尺度比AA尺度要越发严苛,适合视觉要求更严格的产物范例。

两条尺度的界说别离为:

1.4.3 比拟度(最小): 普通文本的视觉泛起与配景至少要有4.5:1的比拟度,大文本¹与配景至少有3:1的比拟度。

1.4.6 比拟度(增强): 普通文本的视觉泛起与配景至少有7:1的比拟度,大文本¹与配景至少有 4.5:1的比拟度。

备注:¹大文本:WCAG划定 「≥18pt通例字重」的文本或 「≥14pt字重加粗」的文本为大文本。

我们在 iOS人机交互类型 和 Material Design 指导类型中,可以看到有很多颜色比拟度指标都是推行WCAG尺度的。

譬喻:我们前面说到的「文本框的底部线条与配景的颜色比拟度最小应为3:1」,以及MD类型中暗黑模式下「明度比拟至少4.5:1」;这些数据,均是来自WCAG尺度。

三、颜色比拟度如何计较

(温馨提示:数学欠好的伴侣…可以直接跳到下一节利用便捷东西…)

相识了数据指标后,我们就该摸索颜色的比拟度是如何计较得出的了。

该公式可以在WCAG尺度中可以找到:

比拟度 = (L1 + 0.05)/(L2 + 0.05)「个中:L指颜色的相对亮度」

相对亮度L = 0.2126 * R + 0.7152 * G + 0.0722 * B

个中 R, G , B 取值为:若 XsRGB <= 0.03928 则 X = XsRGB/12.92 ;不然 X = ((XsRGB+0.055)/1.055) ^ 2.4

XsRGB 在此指代 RsRGB, GsRGB, 或 BsRGB,取值为 XsRGB = X8bit/255 「X8bit 指R、G、B通道各自在8位/通道下 0-255 的取值」。

我发起不消过多地去纠结公式底层的逻辑,好比0.2126这样的数据是怎么来的。

相关文章

笔记本自动关机是什么原因,笔记本自动关机

笔记本电脑因为其体积小巧,便于携带等特点受到了很多企业高管和IT从业者的欢迎,有些朋友在使用笔记本电脑的时候会遇到笔记本自动关机的情况,下面小编就来跟你说说解决方法。 随着人们生活水平的不断提高,许...

接单盒子,黑客服务在哪找,找一本黑客小说排行榜

例如,在Linux指令行下: div id="console">/div>缺点:简单误报,无法对加密或许经过特别处理的Webshell文件进行检测。 尤其是针对保密型Webshell无法做...

杨谦 黑客,黑客家庭网络摄像头tp,打开某网站说被黑客

int start_byte; /* The start byte, negative if unknown. */1.6.1 尽量运用正规厂商(当然正规厂商也有被黑的危险)21.5 该项目是开源项目...

高质量内容建设,助力网站SEO效果飞速提升!

在优化网站时,百度都是比较喜欢一些高质量的文章内容的,发表一些高质量的文章对网站本身有很好的影响,那么高质量的文章对网站优化有什么帮助呢?   1、提升网站权重的方法   众所周知,网站优化的核心工作...

小康食品加盟优势都有什么?加盟怎么样?

小康食品加盟优势都有什么?加盟怎么样?

现如今小康食品加盟项目在市场上的成长长短常不错的,许多加盟商都想要通过加盟这个项目来实现本身的人生抱负。可是呢,固然说各人都较量看好这个项目,可是各人也不敢等闲的选择加盟,因为,各人都不知道小康食品加...

安溪铁观音的功效与作用(常喝铁观音养生就在身边)

  著名营养学家于若木说:“能调节人体新陈代谢的许多有益成分,茶叶中多数具备。对于茶抗癌、防衰老以及提高人体生理活性的机理也都基本研究清楚。所以,茶是大自然赐予人类的最佳饮料。”鲁迅先生说过:“有好茶...