網(wǎng)頁(yè)制作時(shí)文字與背景間對(duì)比度的選擇

一、顏色對(duì)比度 - 關(guān)注色弱人群
我們都知道對(duì)比的重要性，通過(guò)合適的對(duì)比增強(qiáng)內(nèi)容的可識(shí)別性，讓用戶快速理解并吸收信息，增強(qiáng)用戶閱讀的體驗(yàn)感。
今天這里講的主要是文字與背景色之間的對(duì)比。界面中常見的背景色是白色，但為了增強(qiáng)視覺效果，設(shè)計(jì)師也經(jīng)常會(huì)將文字放置在有顏色的背景上，例如個(gè)人中心頭部、直播界面、卡片等等。那如果在做設(shè)計(jì)的時(shí)候不注意對(duì)比度的考慮，文字的可識(shí)別性就會(huì)很差。eg. 抖音將文字放置在視頻上，因?yàn)橐曨l顏色的不可控性，為了保證良好的閱讀效果就必須添加蒙層。
你可能會(huì)說(shuō)在做圖時(shí)肯定會(huì)注意到文字的可識(shí)別性，但是設(shè)計(jì)不僅是給自己看的，我們要將它展現(xiàn)給用戶，而用戶中就存在著這樣一群視覺障礙的群體，他們對(duì)色彩的識(shí)別度比正常人低很多，普通人可以清晰看見的內(nèi)容，他們看的時(shí)候就會(huì)很費(fèi)勁，或者看不見。你可能覺得他們離你很遠(yuǎn)，但其實(shí)他就在你我身邊。我們的大家族就有紅綠色盲基因，我的叔叔伯伯們的都有一定程度的色弱和色盲癥。
下面，我們來(lái)看看Salesforce 的無(wú)障礙設(shè)計(jì)顧問 Cathy O’ Connor 提供了一組數(shù)據(jù)：
約有4%的人口視力低下，0.6%為視盲。
7-12% 的男性有不同形式的色覺缺陷（如色盲），不到1％的女性這樣。
低視力狀況隨著年齡的增長(zhǎng)而增加，50歲以上的一半人有一定程度的低視力低狀況。
全球增長(zhǎng)最快的人群是60歲以上的人
這組數(shù)據(jù)表明，色覺缺陷在男性中的占比例比高達(dá)7-12%，也就是說(shuō)100個(gè)人里面就有7-12個(gè)人有不同形式的色覺缺陷；同時(shí)隨著年齡的增長(zhǎng)人們對(duì)顏色的對(duì)比度會(huì)喪失，這部分的用戶群體還在不斷增大；所以我們?cè)谧鲈O(shè)計(jì)的時(shí)候就不得不考慮這部分人的使用需求。
二、如何選擇合適的顏色對(duì)比度
MD規(guī)范里說(shuō)：文本應(yīng)該保持至少 4.5:1 （基于亮度值計(jì)算）的對(duì)比度以保持文本清晰；好對(duì)比度為 7:1。
看著這一段話很有深意，但是為什么是基于亮度計(jì)算，計(jì)算方式是什么？為什么好對(duì)比度是7:1？為什么最低對(duì)比度是4.5:1 ？下面我來(lái)試著解答一下。
1. 為什么基于亮度計(jì)算
W3C（萬(wàn)維網(wǎng)聯(lián)盟）中提到，對(duì)沒有顏色缺陷的人進(jìn)行閱讀性能評(píng)估，發(fā)現(xiàn)色調(diào)和飽和度對(duì)易讀性的影響很小或者是沒有影響，而亮度對(duì)比度對(duì)易讀性的影響很大。所以，顏色差別不是關(guān)鍵，即使對(duì)色弱的人，只要有足夠的亮度對(duì)比度就不會(huì)影響閱讀。由此也可以看到，在做設(shè)計(jì)時(shí)選擇HSB顏色模式的一大益處。
2.計(jì)算方式
我并不會(huì)給出一個(gè)高深莫測(cè)的計(jì)算公式，因?yàn)檠芯恳环矝]弄特別明白，所以直接給一個(gè)快速獲取對(duì)比度數(shù)值的方式。如下圖，只要將兩種顏色代碼輸入進(jìn)去就可以直接幫你計(jì)算出對(duì)比數(shù)值。并且會(huì)將兩種顏色直接展示出來(lái)，簡(jiǎn)單直觀。
網(wǎng)址：http://t.cn/EVo4rxU
3. 對(duì)比度的選擇
WCAG 2.0 中將顏色對(duì)比等級(jí)分為3種，A級(jí)，AA級(jí)，AAA級(jí)，等級(jí)越高意味著顏色的對(duì)比度越高，呈現(xiàn)出來(lái)的視覺壓力越大：
A級(jí)：采用3:1的對(duì)比度，是普通觀察者可接受的最低對(duì)比度。
字號(hào)大，字重高的文字在較低的對(duì)比度下也易于閱讀，這時(shí)就可以選擇3:1的對(duì)比度。
AA級(jí)： 采用4.5:1 的對(duì)比度，是普通視力損失的人可接受的最低對(duì)比度。這個(gè)數(shù)據(jù)來(lái)自80歲老人的典型視力。
AAA級(jí)：采用7:1的對(duì)比度，是嚴(yán)重視力損失的人可接受的最低對(duì)比度，超出這種視力損傷的用戶就需要借助輔助技術(shù)幫助其進(jìn)行信息識(shí)別了，所以不再考慮范圍內(nèi)。
所以MD就是根據(jù)這3個(gè)顏色對(duì)比等級(jí)得出：對(duì)比度最低不小于4.5:1，好對(duì)比度是7:1，這樣才可以保證大的用戶群體對(duì)內(nèi)容進(jìn)行識(shí)別。
三、總結(jié)
這篇文章主要是講了兩件事情：
1. 我們?cè)谧鲈O(shè)計(jì)的時(shí)候要考慮色弱人群，畢竟有7~12%的男同胞需要被照顧；

2. 文字與背景的對(duì)比度至少要保持4.5:1，如果是針對(duì)年齡大的用戶群體7:1是更合適的選擇。

（鄭重聲明：本文版權(quán)歸原作者海鹽社小火焰所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如有侵權(quán)，請(qǐng)聯(lián)系我們刪除；如作者信息標(biāo)記有誤，請(qǐng)聯(lián)系我們修改。）

當(dāng)前標(biāo)題：網(wǎng)頁(yè)制作時(shí)文字與背景間對(duì)比度的選擇
文章轉(zhuǎn)載：http://www.muchs.cn/news38/112688.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供關(guān)鍵詞優(yōu)化、定制網(wǎng)站、云服務(wù)器、App開發(fā)、自適應(yīng)網(wǎng)站、網(wǎng)站內(nèi)鏈

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)