文字色彩與可讀性分析
![](http://image.woshipm.com/wp-files/img/97.jpg)
一.飽和度與易讀性:
上周在做F同學(xué)的一個(gè)項(xiàng)目時(shí),涉及到較多列表性的文字鏈接。
目前除去頻道和首頁(yè),全站文字鏈接使用一致的藍(lán)色,色值為#014ccc,飽和度較高,在用戶瀏覽時(shí)更易于吸引注意,但同樣也容易引起視覺(jué)疲勞,高飽和度的文字并不易于閱讀。
上圖中,下半部分的文字降低了飽和度,是不是比上半部分讀起來(lái)更舒服?
其實(shí),大多數(shù)門(mén)戶類(lèi)的網(wǎng)站也是使用低飽和度的藍(lán)色作為列表鏈接顏色的:
結(jié)論一:
顏色飽和度達(dá)到一定值,視覺(jué)神經(jīng)對(duì)此顏色就會(huì)產(chǎn)生興奮,就容易在閱讀中產(chǎn)生疲勞感。
二.關(guān)于視覺(jué)神經(jīng)興奮臨界值:
因?yàn)槊恳环N顏色的光因主波長(zhǎng)不一樣,所以造成人眼神經(jīng)興奮的飽和度臨界值也不一致。
在光譜中,紅橙黃綠青藍(lán)紫,波長(zhǎng)依次減小,眼部神經(jīng)興奮所需要達(dá)到的飽和度呈先增后減的弧狀:
波長(zhǎng)較長(zhǎng)的顏色和波長(zhǎng)較短的顏色,相對(duì)較低的飽和度都就能夠刺激視覺(jué)神經(jīng)興奮,而波長(zhǎng)處于中間的綠色青色,則需要相對(duì)較高的飽和度才能刺激視覺(jué)神經(jīng)興奮。
由圖中可以看出,藍(lán)色也屬于飽和度興奮臨界點(diǎn)比較低的顏色,所以,應(yīng)該慎用高飽和度的藍(lán)色。
結(jié)論二:
同等飽和度的顏色,紅色和紫色最易產(chǎn)生視覺(jué)神經(jīng)興奮,其次是黃色和藍(lán)色,再次是綠色和青色。
因此從單純的色彩來(lái)講,在設(shè)計(jì)中應(yīng):
1.盡量使用低飽和度的紅色,紫色;
2.禁止使用高飽和度的紅色,紫色;
3.少量使用高飽和度的黃色,藍(lán)色。
三.關(guān)于明度,色相,飽和度之間的關(guān)系。
1.名詞解釋?zhuān)?br />
a)先說(shuō)說(shuō)明度:就是明暗程度,也有叫亮度的,計(jì)算機(jī)把明度分成256級(jí)色階,黑得伸手不見(jiàn)五指就是0級(jí),白茫茫的一片什么都看不見(jiàn)就是255級(jí):
b)再說(shuō)說(shuō)色相:就是平時(shí)所說(shuō)的哪種顏色,光譜中的紅橙黃青藍(lán)紫,以及千千萬(wàn)萬(wàn)種組合都是不同的色相。
c)最后說(shuō)說(shuō)飽和度:就是通常所說(shuō)的顏色純度,鮮艷程度等等。
2.與Red,Green,Blue單色光之間的關(guān)系:
a)先弄清計(jì)算機(jī)中色彩生成的幾點(diǎn)規(guī)則:
i.RGB三種原色光,同時(shí)以1:1:1比例混合,就能產(chǎn)生1份白色的光;
ii.RGB中的任意兩種原色光,混合只能產(chǎn)生另一種色相的光,而不是白色的光;
iii.任意一種原色光,對(duì)明度色階的影響為其數(shù)值的一半,轉(zhuǎn)換成色階均不會(huì)超過(guò)127級(jí);
因?yàn)槿我鈨煞N有色光混合產(chǎn)生的顏色,色階均不能超過(guò)255級(jí)即白色光。
比如#000002的藍(lán)色圖片,在其藍(lán)色通道的色階是2級(jí),但將其轉(zhuǎn)換成灰度圖片,色值為#010101,說(shuō)明此圖片的明度色階為1級(jí)。
iv.下面提到的RGB數(shù)值,是指的各顏色通道十六進(jìn)制數(shù)值:
b)明度與RGB中最小值,最大值有關(guān),計(jì)算方法如下:
i.RGB中最大值越小,意味著有色光越少,則明度越低;
ii.RGB中最小值越小,意味著生成的白色光越少,則明度越低
c)相同明度下,色相與RGB中最大值,最小值的位置,以及中間值的大小有關(guān):
i.在相同明度下,不同色相的顏色RGB最大值和最小值始終保持恒定;
ii.RGB中最大值和最小值的位置會(huì)影響色相,例如#775533和#557733;
iii.變換RGB的中間值可以影響色相,例如#FF0055和#FF0088;
d)飽和度與RGB中最大值,最小值之間的差值有關(guān):
i.RGB中最大值,最小值之間的差值越大,飽和度越高;
ii.RGB中當(dāng)最小值趨于00,或者最大值趨于FF后,飽和度不能再提高。
結(jié)論三:
1.在顏色較暗時(shí)(即RGB沒(méi)有一項(xiàng)數(shù)值達(dá)到FF),增加明度可以起到增加飽和度的目的,降低明度就會(huì)降低飽和度;
2.在顏色較亮?xí)r(即RGB沒(méi)有一項(xiàng)數(shù)值達(dá)到00),增加明度可以起到降低飽和度的目的,降低明度反而會(huì)增加飽和度;
3.顏色飽和度越大(即RGB中最大值與最小值差值越大),在相同明度下的光譜范圍越大(即可變換的顏色種類(lèi)越少);
4.顏色飽和度越?。碦GB中最大值與最小值差值越?。?,在相同明度下的光譜范圍越小(即可變換的顏色種類(lèi)越少);
5.色相的變化不會(huì)影響到明度和飽和度;
四.根據(jù)這些研究,我們能夠得到什么可以運(yùn)用的東西?
1.高飽和度的紅色(#FF0000),紫色(#FF00FF)推薦不使用;
2.高飽和度的藍(lán)色(#1834D1),橙色(#FF4E00),可以用于少量的文字可以更好地吸引視覺(jué)注意,但最好不要用于列表中的鏈接;
3.根據(jù)前面的分析,我們得出調(diào)制可以用于列表鏈接藍(lán)色的方法:
通過(guò)降低藍(lán)色通道色階來(lái)降低顏色整體的飽和度(例如將#0000FF調(diào)整為#000099),為避免過(guò)暗,和黑色混淆,我們還可以增加其他原色通道的色階,調(diào)整其明度(例如將#000099調(diào)整為#005599)。
4.顏色不協(xié)調(diào),可以通過(guò)降低飽和度來(lái)達(dá)到協(xié)調(diào),也可通過(guò)采用調(diào)整色相來(lái)達(dá)到目的:
一個(gè)現(xiàn)成的例子就是我們網(wǎng)頁(yè)中采用的#FF4E00色值,和#FF0000的飽和度其實(shí)是一致的(不信可以變成灰度圖看看),之所以色值為#FF0000的顏色顯得更刺眼,是因?yàn)樵谕瑯拥娘柡投认拢t色比橙色更讓視覺(jué)神經(jīng)敏感,還記得這張圖么?
參考文獻(xiàn):
《基于色度學(xué)的人眼彩色探測(cè)特性分析》張建勇 等……北京理工大學(xué)……2003年
《計(jì)算機(jī)求解顏色刺激的主波長(zhǎng)和興奮純度》周豐崑 等……長(zhǎng)春光學(xué)精密機(jī)械學(xué)院……1990年
來(lái)源:http://www.xso.name/blog/2010/06/text-color/
- 目前還沒(méi)評(píng)論,等你發(fā)揮!