UI界面設(shè)計中，關(guān)于色彩對比度測試的五大誤區(qū)

隨著用戶體驗(yàn)設(shè)計行業(yè)的越發(fā)成熟，很多設(shè)計也越來越需要確保用戶UI界面對所有用戶都做到易于訪問。特別是在照顧殘障人士的需求上至關(guān)重要，但是仍有許多設(shè)計師卻對色彩對比的測試和可訪問性持有很深的誤解。甚至常常重復(fù)這些謬論來貶低設(shè)計，卻不了解色彩對比標(biāo)準(zhǔn)在哪些場景下適用。下面隨著我們維好維可設(shè)計一起看一下關(guān)于色彩對比度測試的五大誤區(qū)。

誤區(qū)一：教條性遵守WCAG標(biāo)準(zhǔn)
WCAG 要求是最佳的 Web 內(nèi)容無障礙指南 ( WCAG ) 是一套用于確定無障礙色彩對比度的原則。然而，這些指南在實(shí)際應(yīng)用中并不總是100%適用。我們認(rèn)為與其教條地遵循這些規(guī)則，倒不如用利用規(guī)則來指導(dǎo)你的設(shè)計決策，而不是強(qiáng)加于人。 首先，WCAG 標(biāo)準(zhǔn)中不適用的一個情況就是：白色文本的亮度對比度。下面兩個按鈕都是橙色背景，但一個按鈕是白色文本，另一個是黑色文本。當(dāng)你調(diào)查用戶哪個按鈕更易于閱讀時，大多數(shù)人會告訴你白色文本的按鈕更易讀。但可訪問性色彩對比度測試結(jié)果卻相反。



黑色文本的對比度為4.92，符合要求。然而，白色文本的對比度為 2.57，不符合要求。根據(jù)對比度要求，白色文本的按鈕應(yīng)該可讀性較差，但實(shí)際上它的可讀性更強(qiáng)。 在另外一項(xiàng)類似的研究比較了白色和黑色按鈕文本，證實(shí)了這一發(fā)現(xiàn)。不僅視力正常的用戶發(fā)現(xiàn)白色文本更容易閱讀，色盲用戶也同樣如此。

白色文本對比度不達(dá)標(biāo)的原因是，白色文本本身亮度高，并且背景亮度也高。淺色背景上的淺色文本在計算上會呈現(xiàn)低對比度。你的設(shè)計應(yīng)該滿足人們所看到的，而不是計算算法。


誤區(qū)二：UI界面組件的對比度標(biāo)準(zhǔn)與文本必須一致？
許多設(shè)計師會錯誤地將UI界面組件的對比度標(biāo)準(zhǔn)與文本保持一致，但實(shí)際上它們之間存在很大差異。UI界面組件的對比度為 3:1，而文本的對比度為 4.5:1。所以文本需要更高的對比度，因?yàn)橛脩粜枰ǜ鄷r間進(jìn)行文本閱讀。而UI界面組件則不需要閱讀，所以標(biāo)準(zhǔn)也更低。

再比如，有許多細(xì)微的差別也會影響文本對比度，例如：字體大小和粗細(xì)。較大的文本大?。?8 pt）和較粗字體（14 pt 加粗）需要的對比度也相對較低。不僅如此，某些UI界面組件甚至不受此要求的限制。在將UI界面組件或文本設(shè)定為對比度標(biāo)準(zhǔn)之前，請確保在正確的場景下能正確的應(yīng)用該標(biāo)準(zhǔn)。


誤區(qū)三：文本必須滿足 AAA 要求，否則無法訪問？
WCAG 的無障礙合規(guī)性級別各不相同，很多設(shè)計師自認(rèn)為所有文本都必須符合最高級別要求 (AAA)，否則很大一部分用戶將無法訪問。這種觀點(diǎn)是可笑的，記住你是設(shè)計師，不是程序員，如果你還是認(rèn)識不到自己的錯誤，請你轉(zhuǎn)行做程序員。

只要了解 AAA 要求的制定過程，就會明白這一點(diǎn)。 AAA 要求對比度達(dá)到 7:1，以補(bǔ)償視力損失為 20/80 或以上的低視力用戶的對比敏感度損失。這些用戶中的許多人使用具有對比度增強(qiáng)功能的輔助技術(shù)。他們需要這項(xiàng)技術(shù)，因?yàn)樗麄冊谑褂镁W(wǎng)絡(luò)時，不僅僅是在單個界面上瀏覽內(nèi)容，而是在多個界面上瀏覽內(nèi)容。AAA 要求僅適用于不使用輔助技術(shù)的 20/80 視力損失用戶，他們是一個較小的群體。

在普通人群中，視力下降至20/80的情況并不常見，主要影響患有與年齡相關(guān)的眼部疾病的老年人。一項(xiàng)研究發(fā)現(xiàn)，大多數(shù)低視力與衰老有關(guān)。大多數(shù)擁有健康眼睛的用戶在70歲時視力開始下降。如果您的用戶群中大多數(shù)年齡在70歲或以上，那么滿足部分AAA要求可能會對他們有益。WCAG不建議滿足所有AAA要求，因?yàn)閷τ谀承﹥?nèi)容來說這是不可能的。 滿足AA要求對大多數(shù)用戶來說已經(jīng)足夠了。AA要求的對比度為4.5:1，以補(bǔ)償視力喪失（20/40）的用戶的對比敏感度損失。一項(xiàng)研究發(fā)現(xiàn)，“大多數(shù)人到八十多歲仍然至少保持良好的視力（20/40或更高） ?！?這項(xiàng)發(fā)現(xiàn)表明，滿足AA要求將使您的文本能夠被大多數(shù)用戶輕松理解。

誤區(qū)四：灰色文本和按鈕難以訪問
許多人認(rèn)為用戶無法閱讀灰色文本，因?yàn)樗雌饋韺Ρ榷鹊停鞘聦?shí)上并不一定如此，例如：灰色按鈕上的文本，有些人會認(rèn)為它難以閱讀。然而，用對比度檢查器檢查后發(fā)現(xiàn)，它不僅符合AA標(biāo)準(zhǔn)，而且對比度遠(yuǎn)高于標(biāo)準(zhǔn)。特別是對于禁用按鈕，因?yàn)榻冒粹o本身就是灰色的，很多設(shè)計師不理解非活動性UI組件的正確含義，禁用按鈕是通過與文本標(biāo)簽缺乏對比度來表示的。當(dāng)按鈕難以閱讀時，用戶就不會費(fèi)心去操作它，這正是禁用按鈕的目的所在，所以對比度要求并不適用于非活動性UI組件。

誤區(qū)五：色盲用戶無法區(qū)分對比色
如果設(shè)計使用顏色對比來傳達(dá)信息，色盲用戶將不會注意到其中的差異。色調(diào)和顏色對比度是兩個不同的維度。色盲用戶難以區(qū)分特定的色調(diào)，但他們卻能感知顏色對比的差異，色盲用戶可以相當(dāng)清楚地區(qū)分對比色。

最后，很多時候即使你遵循了所有 WCAG 要求，也難以做出舒適的用戶界面，因?yàn)闊o障礙設(shè)計無法滿足所有用戶的需求，真正理解無障礙設(shè)計的設(shè)計師會去努力平衡，結(jié)合不同設(shè)計場景下進(jìn)行靈活設(shè)計，而不是教條式遵守，因?yàn)樵O(shè)計過程中要考慮的因素太多，比如品牌營銷，有時候品牌色就是高亮的，從品牌學(xué)的角度看，品牌大于一切。記住你是設(shè)計師，你不是程序員，如果你還是傻傻的搞不清楚，請轉(zhuǎn)行。