关于网站中文字颜色的易读性研究

饱和度与易读性;关于视觉神经兴奋临界值;关于明度,色相,饱和度之间的关系;根据这些研究,我们能够得到什么可以运用的东西;参考文献

关于网站中文字颜色的易读性研究

一 饱和度与易读性:

上周在做F同学的一个项目时,涉及到较多列表性的文字链接。

目前除去频道和首页,全站文字链接使用一致的蓝色,色值为#014ccc,饱和度较高,在用户浏览时更易于吸引注意,但同样也容易引起视觉疲劳,高饱和度的文字并不易于阅读。

其实,大多数门户类的网站也是使用低饱和度的蓝色作为列表链接颜色的:

结论一:

颜色饱和度达到一定值,视觉神经对此颜色就会产生兴奋,就容易在阅读中产生疲劳感。

二 关于视觉神经兴奋临界值:

因为每一种颜色的光因主波长不一样,所以造成人眼神经兴奋的饱和度临界值也不一致。

在光谱中,红橙黄绿青蓝紫,波长依次减小,眼部神经兴奋所需要达到的饱和度呈先增后减的弧状:

波长较长的颜色和波长较短的颜色,相对较低的饱和度都就能够刺激视觉神经兴奋,而波长处于中间的绿色青色,则需要相对较高的饱和度才能刺激视觉神经兴奋。

同等饱和度的颜色,红色和紫色最易产生视觉神经兴奋,其次是黄色和蓝色,再次是绿色和青色。

因此从单纯的色彩来讲,在设计中应:

1.尽量使用低饱和度的红色,紫色;

2.禁止使用高饱和度的红色,紫色;

3.少量使用高饱和度的黄色,蓝色。

三 关于明度,色相,饱和度之间的关系。

1.名词解释:

a)先说说明度:就是明暗程度,也有叫亮度的,计算机把明度分成256级色阶,黑得伸手不见五指就是0级,白茫茫的一片什么都看不见就是255级:

b)再说说色相:就是平时所说的哪种颜色,光谱中的红橙黄青蓝紫,以及千千万万种组合都是不同的色相。

c)最后说说饱和度:就是通常所说的颜色纯度,鲜艳程度等等。

2.与Red,Green,Blue单色光之间的关系:

a)先弄清计算机中色彩生成的几点规则:

i.RGB三种原色光,同时以1:1:1比例混合,就能产生1份白色的光;

ii.RGB中的任意两种原色光,混合只能产生另一种色相的光,而不是白色的光;

iii.任意一种原色光,对明度色阶的影响为其数值的一半,转换成色阶均不会超过127级;

因为任意两种有色光混合产生的颜色,色阶均不能超过255级即白色光。

比如#000002的蓝色

b)明度与RGB中最小值,最大值有关,计算方法如下:

i.RGB中最大值越小,意味着有色光越少,则明度越低;

ii.RGB中最小值越小,意味着生成的白色光越少,则明度越低

c)相同明度下,色相与RGB中最大值,最小值的位置,以及中间值的大小有关:

i.在相同明度下,不同色相的颜色RGB最大值和最小值始终保持恒定;

ii.RGB中最大值和最小值的位置会影响色相,例如#775533和#557733;

iii.变换RGB的中间值可以影响色相,例如#FF0055和#FF0088;

d)饱和度与RGB中最大值,最小值之间的差值有关:

i.RGB中最大值,最小值之间的差值越大,饱和度越高;

ii.RGB中当最小值趋于00,或者最大值趋于FF后,饱和度不能再提高。

结论三:

1.在颜色较暗时(即RGB没有一项数值达到FF),增加明度可以起到增加饱和度的目的,降低明度就会降低饱和度;

2.在颜色较亮时(即RGB没有一项数值达到00),增加明度可以起到降低饱和度的目的,降低明度反而会增加饱和度;

3.颜色饱和度越大(即RGB中最大值与最小值差值越大),在相同明度下的光谱范围越大(即可变换的颜色种类越少);

4.颜色饱和度越小(即RGB中最大值与最小值差值越小),在相同明度下的光谱范围越小(即可变换的颜色种类越少);

5.色相的变化不会影响到明度和饱和度;

四 根据这些研究,我们能够得到什么可以运用的东西?

1.高饱和度的红色(#FF0000),紫色(#FF00FF)推荐不使用;

2.高饱和度的蓝色(#1834D1),橙色(#FF4E00),可以用于少量的文字可以更好地吸引视觉注意,但最好不要用于列表中的链接;

3.根据前面的分析,我们得出调制可以用于列表链接蓝色的方法:

通过降低蓝色通道色阶来降低颜色整体的饱和度(例如将#0000FF调整为#000099),为避免过暗,和黑色混淆,我们还可以增加其他原色通道的色阶,调整其明度(例如将#000099调整为#005599)。

4.颜色不协调,可以通过降低饱和度来达到协调,也可通过采用调整色相来达到目的:

一个现成的例子就是我们网页中采用的#FF4E00色值,和#FF0000的饱和度其实是一致的(不信可以变成灰度

《基于色度学的人眼彩色探测特性分析》张建勇 等……北京理工大学……2003年

《计算机求解颜色刺激的主波长和兴奋纯度》周丰崑 等……长春光学精密机械学院……1990年

作者:熊松

本文来自投稿,不代表【】观点,发布者:【

本文地址: ,如若转载,请注明出处!

举报投诉邮箱:253000106@qq.com

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2024年5月3日 14:47:41
下一篇 2024年5月3日 14:49:49

相关推荐

  • javapdf加盖公章,java 编辑pdf添加文字

    如何给电子版文件加盖公章? 点击插入打开文件,点击插入。插入公章点击图片,将公章插入文件中。点击环绕文字鼠标右键单击图片,点击环绕文字。点击衬于文字下方在弹出的下拉菜单中点击衬于文字下方。 打开一份需要盖公章的文档,例如公章需要盖到日期的位置。打开了文档之后,点击文档工具栏上的插入选项。在插入的选项里选择图片,就可以在电脑里面选择公章图片。选择了之后,就将公…

    2024年5月23日
    4000
  • c语言颜色编码,c语言颜色代码

    颜色代码是什么? 1、颜色代码可以用rgb(红绿蓝)值或者十六进制代码(hex)值来表示,比如红色red,rgb值为 255,0,0 换成十六进制为 #ff000。在rgb中从0至255的三个值中,0是最低阶的(如没有红色),255是最高阶(如全是红色)。 2、准确的说颜色代码不是0-255的。颜色是由红、绿、蓝三色组成,都是0~255之间数字,这是由十进制…

    2024年5月23日
    4600
  • excel文字淡化,excel文字1淡色50%

    excel文字1淡色50% 1、先打开电脑,打开电脑上面的excel,选中制作表区域。然后点击套用表格样式。之后点击选择浅色中的一个选择项。之后点击确定。 2、电脑打开Excel表格,然后选中要把颜色变淡的单元格。选中单元格后,点击工具栏中的字体颜色,然后选择其他颜色。点击其他颜色后,选择一个颜色比较淡的颜色,然后点击确定。 3、首先在电脑桌面上找到exce…

    2024年5月23日
    3900
  • excel函数关于颜色,excel函数教程视频全集自学

    excel怎么用函数设置达到条件自动填充颜色? 1、在excel中使用if函数的方法1举一个简单的例子,在excel中打开一份成绩单,如图所示在表格的文件中选中90的数字后面的那个单元格。2点击菜单中的函数的fx的选项。 2、电脑打开Excel表格,然后选中要设置颜色的一列。选中单元格之后,点击条件格式-突出显示单元格规则-其他规则。进入其他规则页面后,选中…

    2024年5月22日
    4500
  • excel缩小行距,Excel缩小行距文字缩进去了

    excel如何调整行距 Excel行间距可以在直接拉动或输入数值调整。Excel行间距可以在直接拉动或输入数值调整。 一次性调整行距的方法是,点选sheet工作表左上角的三角标志全选sheet工作表,用滑鼠右键点选选取其中的“行高”,在出现的对话方块中互整行高资料,可以实现整体设定行距。 怎样调整excel行间距单击鼠标右键,在菜单选项中点击段落功能。然后在…

    2024年5月22日
    3700
  • excel单元格文字编号,excel单元格文字按序号对齐

    如何在Excel单元格内容前加上序列号呢? 1、使用文本函数 可以使用Excel中的文本函数,如CONCATENATE、TEXTJOIN和IF函数等,将多个内容拼接在一起,并添加序号或分隔符。 2、Ctrl+Enter 框选【总价】一列单元格区域,输入公式=B2*C2,按【Ctrl+Enter】进行公式填充。双击填充 双击填充柄可以实现“序列填充”和“复制填…

    2024年5月22日
    4600
  • excel文字行间距怎么设置,excel行间距15倍怎么设置

    excel表格中的文字行间距怎么调整? 方法一:使用鼠标右键菜单 鼠标右键单击Excel表格中的任意单元格。在弹出的右键菜单中选择“行高”选项。在弹出的“行高”对话框中,输入所需的行间距值,然后点击“确定”按钮即可。 调整行间距:强行换行法,即双击这个单元格,在第一行文字的结尾按住“ALT键”,再按回车键,即可增加空行,重复一次,便增加一个空行。调整字间距:…

    2024年5月22日
    4800
  • 黑客技术学习励志图片文字,黑客技术基础知识

    励志文字好看的图片素材 爱,永远是一样的。【母爱地震】照片是第五届国际新闻摄影比赛(华赛)年度新闻照片。由摄影师邹森拍摄。2008年8月30日16时30分,四川攀枝花市、会理县交界处发生1级地震,造成36人死亡,675人受伤。 一马平川,顺风顺水时我们不妨挑一个好的道,看看沿途的景,也无需那么急;千沟万壑时我们也可退走几步,找找看是否有其他路途,即使没有也无…

    2024年5月22日
    3700
  • javagraphics2d文字居中的简单介绍

    java使用Graphics2D给图片上写字 你的电脑系统上要有那个字体,java才可以设置。GraphicsEnvironment ge = GraphicsEnvironment.getLocalGraphicsEnvironment ();String [] fontList = ge.getAvailableFontFamilyNames ();用这…

    2024年5月22日
    3700
  • java颜色值,java中颜色怎么定义

    java中将颜色值和透明度能否转换成一个16进制 透明色16进制代码代表不透明度的十六进制,00表示完全透明,FF就是全不透明,化成十进制的范围就是0~255,剩下的RRGGBB就是颜色的十六进制代码。 将透明度转换成不透明度。如透明度为40%,则不透明度为60%。 不透明度乘以255。 我们得到结果:153。 将计算结果转换成16进制。得到最终的不透明度:…

    2024年5月22日
    3700

发表回复

登录后才能评论



关注微信