成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

網(wǎng)頁制作時文字與背景間對比度的選擇

2021-05-07    分類: 網(wǎng)站建設(shè)

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

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

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

當(dāng)前標(biāo)題:網(wǎng)頁制作時文字與背景間對比度的選擇
文章轉(zhuǎn)載:http://jinyejixie.com/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)請盡快告知,我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)

h5響應(yīng)式網(wǎng)站建設(shè)
两当县| 鄂伦春自治旗| 洞口县| 得荣县| 铁岭县| 抚远县| 平远县| 高雄县| 十堰市| 乃东县| 盐源县| 永年县| 行唐县| 调兵山市| 颍上县| 海丰县| 仁化县| 鹤壁市| 全南县| 宜都市| 房山区| 盐池县| 临邑县| 历史| 宜宾县| 辽阳市| 玉溪市| 和林格尔县| 左云县| 京山县| 彝良县| 任丘市| 九江县| 布拖县| 玉龙| 连云港市| 若尔盖县| 桦南县| 五大连池市| 桑日县| 台江县|