當(dāng)前位置：首頁 > 專業(yè)知識 > 網(wǎng)頁制作時文字與背景間對比度的選擇

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

作者：天晴創(chuàng)藝發(fā)布時間：2/18/2019 2:44:07 PM瀏覽次數(shù)：12705文章出處：北京網(wǎng)站開發(fā)公司

一、顏色對比度 - 關(guān)注色弱人群
我們都知道對比的重要性，通過合適的對比增強(qiáng)內(nèi)容的可識別性，讓用戶快速理解并吸收信息，增強(qiáng)用戶閱讀的體驗(yàn)感。
今天這里講的主要是文字與背景色之間的對比。界面中常見的背景色是白色，但為了增強(qiáng)視覺效果，設(shè)計(jì)師也經(jīng)常會將文字放置在有顏色的背景上，例如個人中心頭部、直播界面、卡片等等。那如果在做設(shè)計(jì)的時候不注意對比度的考慮，文字的可識別性就會很差。eg. 抖音將文字放置在視頻上，因?yàn)橐曨l顏色的不可控性，為了保證良好的閱讀效果就必須添加蒙層。

  你可能會說在做圖時肯定會注意到文字的可識別性，但是設(shè)計(jì)不僅是給自己看的，我們要將它展現(xiàn)給用戶，而用戶中就存在著這樣一群視覺障礙的群體，他們對色彩的識別度比正常人低很多，普通人可以清晰看見的內(nèi)容，他們看的時候就會很費(fèi)勁，或者看不見。你可能覺得他們離你很遠(yuǎn)，但其實(shí)他就在你我身邊。我們的大家族就有紅綠色盲基因，我的叔叔伯伯們的都有一定程度的色弱和色盲癥。
  下面，我們來看看Salesforce 的無障礙設(shè)計(jì)顧問 Cathy O’ Connor 提供了一組數(shù)據(jù)：
  約有4%的人口視力低下重慶浪濤科技，0.6%為視盲。
  7-12% 的男性有不同形式的色覺缺陷（如色盲），不到1％的女性這樣。
  低視力狀況隨著年齡的增長而增加，50歲以上的一半人有一定程度的低視力低狀況。
  全球增長最快的人群是60歲以上的人
  這組數(shù)據(jù)表明，色覺缺陷在男性中的占比例比高達(dá)7-12%，也就是說100個人里面就有7-12個人有不同形式的色覺缺陷；同時隨著年齡的增長人們對顏色的對比度會喪失，這部分的用戶群體還在不斷增大；所以我們在做設(shè)計(jì)的時候就不得不考慮這部分人的使用需求。
  二、如何選擇合適的顏色對比度
  MD規(guī)范里說：文本應(yīng)該保持至少 4.5:1 （基于亮度值計(jì)算）的對比度以保持文本清晰；最佳對比度為 7:1。
  看著這一段話很有深意，但是為什么是基于亮度計(jì)算，計(jì)算方式是什么？為什么最佳對比度是7:1？為什么最低對比度是4.5:1 ？下面我來試著解答一下。
  1. 為什么基于亮度計(jì)算
  W3C（萬維網(wǎng)聯(lián)盟）中提到，對沒有顏色缺陷的人進(jìn)行閱讀性能評估，發(fā)現(xiàn)色調(diào)和飽和度對易讀性的影響很小或者是沒有影響，而亮度對比度對易讀性的影響很大。所以，顏色差別不是關(guān)鍵做網(wǎng)站的公司，即使對色弱的人，只要有足夠的亮度對比度就不會影響閱讀。由此也可以看到，在做設(shè)計(jì)時選擇HSB顏色模式的一大益處。

2.計(jì)算方式
我并不會給出一個高深莫測的計(jì)算公式，因?yàn)檠芯恳环矝]弄特別明白中興禮業(yè)，所以直接給一個快速獲取對比度數(shù)值的方式。如下圖，只要將兩種顏色代碼輸入進(jìn)去就可以直接幫你計(jì)算出對比數(shù)值。并且會將兩種顏色直接展示出來，簡單直觀。

  網(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)行識別。