在日常的UI設(shè)計(jì)工作中，文本作為最重要的信息載體之一，其能否被用戶(hù)清晰識(shí)別顯得尤為重要。新手設(shè)計(jì)師在選擇字體顏色時(shí)往往找不到依據(jù)、不夠自信。本文旨在分析目前在這方面比較科學(xué)的做法，剖其緣由，希望能夠拋磚引玉，給大家?guī)?lái)新的思路與思考。

背景

早在 1862 年荷蘭眼科醫(yī)生斯奈倫 (Hermann Snellen) 為了定義視力標(biāo)準(zhǔn)發(fā)明了視力表，經(jīng)不斷優(yōu)化現(xiàn)已成為世界標(biāo)準(zhǔn)，我們常見(jiàn)的 E 字形的視力表也是由此演變而來(lái)。視力表由從大到小的字母行組成，每行對(duì)應(yīng)一個(gè)分?jǐn)?shù)，受檢者在距離視力表 20 英尺（約 6 米）處，所能看清的最小字母行對(duì)應(yīng)的數(shù)值即為視力值。

視力水平 = 測(cè)試距離 / 字母大小

據(jù)世界衛(wèi)生組織2014年統(tǒng)計(jì)數(shù)據(jù)：

• 世界范圍內(nèi)視力受損的人數(shù)約為 2.85 億，其中 3900 萬(wàn)人患有盲癥，2.46 億人患有弱視。
• 全世界大約 90％ 的視力受損者生活在低收入國(guó)家。
• 82% 的盲癥病人年齡在 50 歲及 50 歲以上。

在全球范圍內(nèi)，未經(jīng)矯正的屈光不正是中度和重度視力損害的主要原因，在中、低收入國(guó)家，白內(nèi)障仍然是致盲的主要原因。
對(duì)比 2014 年全球人口數(shù)量 72 億粗略換算一下患有眼疾的人群占比約為 4%，這是個(gè)相當(dāng)高的數(shù)字了。

如今互聯(lián)網(wǎng)產(chǎn)品涉及面廣，用戶(hù)群體龐大且多樣化；顯示設(shè)備種類(lèi)繁多，色彩差異較大，同時(shí)移動(dòng)設(shè)備比臺(tái)式機(jī)、筆記本電腦更有可能在包括戶(hù)外的各種環(huán)境中使用，戶(hù)外使用的情況下難免會(huì)遭到太陽(yáng)或其他光源的眩光干擾。在這種背景下，低視力用戶(hù)在閱讀時(shí)會(huì)遇到極大挑戰(zhàn)。鑒于此，產(chǎn)品設(shè)計(jì)中應(yīng)充分考慮各種使用場(chǎng)景及視障人群的使用體驗(yàn)。

規(guī)范

我們知道，內(nèi)容對(duì)比度過(guò)于激烈和過(guò)弱都是不利于閱讀的，萬(wàn)維網(wǎng)聯(lián)盟針對(duì)這個(gè)問(wèn)題通過(guò)大量研究在 WCAG 2.0 (Web Content Accessibility Guidelines 網(wǎng)絡(luò)內(nèi)容可用性規(guī)范) 中制定了相應(yīng)標(biāo)準(zhǔn)，目前包括 Google、Apple 在內(nèi)的很多大型互聯(lián)網(wǎng)公司都已遵守這個(gè)規(guī)范。

WCAG 針對(duì)字體大小及對(duì)比度規(guī)定了兩個(gè)級(jí)別：

• 大號(hào)文本：字號(hào)大于14磅且加粗，或字號(hào)大于18磅。
• 常規(guī)文本：字號(hào)小于18磅，或字號(hào)小于14磅且加粗。
• 用于識(shí)別的圖形如 Icon 等至少需滿(mǎn)足 Level AA 。

注：磅（pt）為長(zhǎng)度單位，1pt=1/72inch。分辨率為 72px/inch 圖像上的文字 100% 顯示時(shí) 1pt=1px=1dp (條件：顯示器的dpi=72，鑒于目前絕大部分屏幕分辨率已遠(yuǎn)超這個(gè)數(shù)值，請(qǐng)大家借助矢量軟件對(duì)比，或在軟件設(shè)置后借助打印尺寸預(yù)覽功能對(duì)比。單位這塊不同平臺(tái)有不同的處理方式，其共同的特點(diǎn)就是要保證文本的物理尺寸，這里就不展開(kāi)說(shuō)了)。

筆者根據(jù)規(guī)范簡(jiǎn)要的畫(huà)了張圖：

大號(hào)字體對(duì)應(yīng)的是在手機(jī)上查看時(shí)的大致尺寸，對(duì)比度值是在純白背景上的測(cè)試結(jié)果。

如何計(jì)算對(duì)比度

相對(duì)亮度定義

了解對(duì)比度首先要知道相對(duì)亮度（relative luminance）的概念：相對(duì)亮度表達(dá)的是單位面積內(nèi)光線(xiàn)通過(guò)的數(shù)量。在一個(gè)色彩空間內(nèi)，最暗到最亮的點(diǎn)相對(duì)亮度取值范圍為 0-1（這種取值方法很常見(jiàn)，比如攝氏度取值范圍是規(guī)定標(biāo)準(zhǔn)大氣壓下冰水混合物到沸水溫度的取值范圍為 1℃-100℃），拿我們?nèi)粘ＴO(shè)計(jì)工作中接觸最多的色彩空間 sRGB 舉例，相對(duì)亮度的計(jì)算方式為?L = 0.2126 * R + 0.7152 * G + 0.0722 * B?（此公式為理論值，RGB 分別對(duì)應(yīng) 8bits/Channel 時(shí)的數(shù)值，即 0-255）。

由于 sRGB 色彩空間范圍小于 RGB，所以每通道的實(shí)際數(shù)值會(huì)受到限制，對(duì)應(yīng)關(guān)系如下：

對(duì)比度計(jì)算方法

現(xiàn)有亮色點(diǎn) L1 和暗色點(diǎn) L2，那么 L1 和 L2 的對(duì)比度即為：L1 : L2 = (L1 + 0.05) : (L2 + 0.05)。對(duì)比度用于衡量?jī)蓚€(gè)顏色的明度對(duì)比強(qiáng)弱，比值越大對(duì)比越強(qiáng)烈。

上述方法是基于筆者的理解和總結(jié)，如想了解更詳細(xì)的介紹請(qǐng)查看 W3C Guideline。

發(fā)散與啟發(fā)

大家在觀(guān)察 L = 0.2126 * R + 0.7152 * G + 0.0722 * B 公式時(shí)可以發(fā)現(xiàn)，在 RGB 色彩模型中綠色通道提供了絕大部分的亮度，藍(lán)色最少。例如當(dāng)你在白色背景上使用綠色按鈕或文字的時(shí)候請(qǐng)盡量降低色彩明度、提高文本大小或字重。

我們可以大致總結(jié)個(gè)經(jīng)驗(yàn)。比如我們?cè)谡{(diào)色板中選擇字體顏色時(shí)為了保證最低 3:1 的對(duì)比度，字體色與背景色至少相距 33.3%，其他對(duì)比度同理。注意：由于每個(gè)通道對(duì)亮度的影響效果不同，此方法只適用于灰階。

提到亮度可能很多同學(xué)會(huì)想到 Lab 色彩模型，但筆者對(duì)比并查閱相關(guān)資料后發(fā)現(xiàn)這里的亮度與 Lab 中的 L 值并不是線(xiàn)性關(guān)系。

為什么要用相對(duì)亮度來(lái)制定標(biāo)準(zhǔn)呢？筆者猜想是因?yàn)榭紤]到色盲群體，比如全色盲患者只能感受到光線(xiàn)強(qiáng)弱，看到的都是灰階景象，所以只有通過(guò)亮度來(lái)衡量對(duì)比才是有意義的。這個(gè)問(wèn)題歡迎大家留言討論。

說(shuō)個(gè)題外話(huà)，理解對(duì)比度對(duì)設(shè)計(jì)工作格外重要，絕大部分設(shè)計(jì)工具都會(huì)碰到這個(gè)概念，只要碰到顏色總會(huì)遇到對(duì)比度，本文涉及的只是針對(duì)文本可視性的分支研究，大家切勿作片面的理解。比如，銳化其實(shí)就是調(diào)整影像邊緣兩側(cè)顏色的對(duì)比度、調(diào)整色階或曲線(xiàn)時(shí)理解對(duì)比度會(huì)讓你的調(diào)整效率大大提高、視頻處理時(shí)讓你在龐雜的調(diào)色面板中不會(huì)迷失方向。

如何驗(yàn)證

人肉驗(yàn)證

在IxDC的一次分享中，Airbnb的設(shè)計(jì)負(fù)責(zé)人@Vivian Wang @Alex Schleifer 在《如何在全球化設(shè)計(jì)理念和本土化需求中找到平衡》的主題中給出了視力水平與內(nèi)容對(duì)比度的對(duì)應(yīng)關(guān)系。本文末尾的附件中提供了斯奈倫標(biāo)準(zhǔn)視力表文件，感興趣的同學(xué)給自己測(cè)一下即可得到自己的視力水平。再根據(jù)上文我提到的對(duì)比度相關(guān)知識(shí)多設(shè)置幾組對(duì)比度樣本，可以多找些同學(xué)多獲取些數(shù)據(jù)，根據(jù)得到的結(jié)果統(tǒng)計(jì)出平均值。注意，結(jié)論應(yīng)充分考慮眼疾患者和室外環(huán)境的使用場(chǎng)景。

工具驗(yàn)證

網(wǎng)絡(luò)上有很多根據(jù)此規(guī)范設(shè)計(jì)的在線(xiàn)檢測(cè)工具，搜索關(guān)鍵詞 Color Contrast Accessibility 可以找到很多，筆者這里測(cè)試了幾個(gè)，推薦給大家。

1.?Contrast-A

顯示結(jié)果比較詳細(xì)，取色和顯示都比較直觀(guān)。注意：此工具依賴(lài)Flash??！

2.?tanaguru contrast finder

除了給出測(cè)試結(jié)果外還可以給出近似的建議值。

3.?Contrast 推薦

剛上架沒(méi)多久的 macOS 應(yīng)用，目前售價(jià) 6.99 刀，特點(diǎn)是輕量高效，可以直接吸取屏幕顏色并給出結(jié)果。

4.?Material Design Color Tool 力薦

Color Tool 是谷歌為設(shè)計(jì)師和工程師打造的全能配色工具。包含調(diào)色、可用性測(cè)試、導(dǎo)出工程文件三大功能。

調(diào)色

Color Tool 預(yù)置了全色相色彩模板，并支持自定義顏色。通過(guò)在右側(cè)調(diào)色面板可設(shè)置主色和輔色，在左側(cè)的預(yù)覽窗口可直接查看不同布局的顯示效果。

可用性測(cè)試

在可用性標(biāo)簽內(nèi)會(huì)非常詳細(xì)的顯示文本與背景的顯示效果，并給出極限值。值得注意的是 Material Design 通過(guò)控制字體顏色的不透明度來(lái)定義文本或 icon 的顏色層級(jí)，目前越來(lái)越多的互聯(lián)網(wǎng)公司已采用這種形式，這么做有很多好處，在這里就不一一列舉了，感興趣的同學(xué)可以到?Material Design?查看。

導(dǎo)出工程文件

顏色選定后可以一鍵導(dǎo)出開(kāi)發(fā)可用的工程文件，高效的簡(jiǎn)直令人發(fā)指！目前支持 iOS、Android、Html5。

結(jié)語(yǔ)

寫(xiě)這篇文章的過(guò)程中筆者檢查了國(guó)內(nèi)很多應(yīng)用，多數(shù)不滿(mǎn)足這個(gè)標(biāo)準(zhǔn)。使用較多的「369大法」其實(shí)缺乏理論支持。如果單純?yōu)榱藚^(qū)分信息層級(jí)除了顏色外還有大小、字重、間距等（層級(jí)這塊兒?@icojump?在 iOS 11 設(shè)計(jì)理念和 3 個(gè)設(shè)計(jì)方向的文章中有更加詳細(xì)的解答）。筆者也在思考到底是理論重要還是設(shè)計(jì)師的感覺(jué)重要？不同的人也許有不同的答案。

筆者想表達(dá)的觀(guān)點(diǎn)是：在制定顏色規(guī)范前要充分考慮目標(biāo)用戶(hù)群體特點(diǎn)，比如年齡分布、收入狀況、使用場(chǎng)景等，因?yàn)檫@些要素與視力水平及可用性都有著直接關(guān)系。在不完全確定的情況下請(qǐng)尊重標(biāo)準(zhǔn)，不要重新發(fā)明輪子。畢竟，也許我們眼中的美感往往是「自私」和帶有「偏見(jiàn)」的。

本文部分圖片源于網(wǎng)絡(luò)，如有侵犯到您的權(quán)益請(qǐng)聯(lián)系作者刪除。原創(chuàng)圖片皆標(biāo)有 ? 字樣，請(qǐng)您在使用前先聯(lián)系作者。

作者：王永全

本文來(lái)源于人人都是產(chǎn)品經(jīng)理合作媒體@餓了么UED，作者@王永全

題圖來(lái)自 Pexels，基于 CC0 協(xié)議