如何更加科學地提高文字可讀性
前言
在日常的UI設計工作中，文字作為最重要的資訊載體之一，其能否被使用者清晰識別顯得尤為重要。新手設計師在選擇字型顏色時往往找不到依據、不夠自信。本文旨在分析目前在這方面比較科學的做法，剖其緣由，希望能夠拋磚引玉，給大家帶來新的思路與思考。
背景
早在 1862 年荷蘭眼科醫生斯奈倫 （Hermann Snellen） 為了定義視力標準發明了視力表，經不斷最佳化現已成為世界標準，我們常見的 E 字形的視力表也是由此演變而來。視力表由從大到小的字母行組成，每行對應一個分數，受檢者在距離視力表 20 英尺（約 6 米）處，所能看清的最小字母行對應的數值即為視力值。
視力水平 = 測試距離 / 字母大小
。
據世界衛生組織2014年統計資料：
世界範圍內視力受損的人數約為 2。85 億，其中 3900 萬人患有盲症，2。46 億人患有弱視。
全世界大約 90％ 的視力受損者生活在低收入國家。
82% 的盲症病人年齡在 50 歲及 50 歲以上。
在全球範圍內，未經矯正的屈光不正是中度和重度視力損害的主要原因，在中、低收入國家，白內障仍然是致盲的主要原因。
對比 2014 年全球人口數量 72 億粗略換算一下
患有眼疾的人群佔比約為 4%
，這是個相當高的數字了。
如今網際網路產品涉及面廣，使用者群體龐大且多樣化；顯示裝置種類繁多，色彩差異較大，同時移動裝置比桌上型電腦、膝上型電腦更有可能在包括戶外的各種環境中使用，戶外使用的情況下難免會遭到太陽或其他光源的眩光干擾。在這種背景下，低視力使用者在閱讀時會遇到極大挑戰。鑑於此，產品設計中應充分考慮各種使用場景及視障人群的使用體驗。
規範
我們知道，內容對比度過於激烈和過弱都是不利於閱讀的，全球資訊網聯盟針對這個問題透過大量研究在 WCAG 2。0 （Web Content Accessibility Guidelines 網路內容可用性規範） 中制定了相應標準，目前包括 Google、Apple 在內的很多大型網際網路公司都已遵守這個規範。
WCAG 針對字型大小及對比度規定了兩個級別：
大號文字：字號大於14磅且加粗，或字號大於18磅。
常規文字：字號小於18磅，或字號小於14磅且加粗。
用於識別的圖形如 Icon 等至少需滿足 Level AA 。
注：磅（pt）為長度單位，1pt=1/72inch。解析度為 72px/inch 影象上的文字 100% 顯示時 1pt=1px=1dp （條件：顯示器的dpi=72，鑑於目前絕大部分螢幕解析度已遠超這個數值，請大家藉助向量軟體對比，或在軟體設定後藉助列印尺寸預覽功能對比。單位這塊不同平臺有不同的處理方式，其共同的特點就是要保證文字的物理尺寸，這裡就不展開說了）。
筆者根據規範簡要的畫了張圖：
上圖中大號字型對應的是在手機上檢視時的大致尺寸，對比度值是在純白背景上的測試結果。
如何計算對比度（後文有工具，不過希望大家可以研究下原理，這樣日後才能舉一反三，靈活應用。）
相對亮度定義
瞭解對比度首先要知道相對亮度（relative luminance）的概念：相對亮度表達的是單位面積內光線透過的數量。在一個色彩空間內，最暗到最亮的點相對亮度取值範圍為 0-1（這種取值方法很常見，比如攝氏度取值範圍是規定標準大氣壓下冰水混合物到沸水溫度的取值範圍為 1℃-100℃），拿我們日常設計工作中接觸最多的色彩空間 sRGB 舉例，相對亮度的計算方式為
L = 0.2126 * R + 0.7152 * G + 0.0722 * B
（此公式為理論值，RGB 分別對應 8bits/Channel 時的數值，即 0-255）。
由於 sRGB 色彩空間範圍小於 RGB，所以每通道的實際數值會受到限制，對應關係如下：
if RsRGB <= 0。03928 then R = RsRGB/12。92 else R = （（RsRGB+0。055）/1。055） ^ 2。4
if GsRGB <= 0。03928 then G = GsRGB/12。92 else G = （（GsRGB+0。055）/1。055） ^ 2。4
if BsRGB <= 0。03928 then B = BsRGB/12。92 else B = （（BsRGB+0。055）/1。055） ^ 2。4
對比度計算方法
現有亮色點 L1 和暗色點 L2，那麼 L1 和 L2 的對比度即為：
L1 : L2 = (L1 + 0.05) : (L2 + 0.05)
。對比度用於衡量兩個顏色的明度對比強弱，比值越大對比越強烈。
上述方法是基於筆者的理解和總結，如想了解更詳細的介紹請檢視 W3C Guideline。
發散與啟發
1.
大家在觀察 L = 0。2126 * R + 0。7152 * G + 0。0722 * B 公式時可以發現，在 RGB 色彩模型中綠色通道提供了絕大部分的亮度，藍色最少。例如當你在白色背景上使用綠色按鈕或文字的時候請儘量降低色彩明度、提高文字大小或字重。
2.
我們可以大致總結個經驗。比如我們在調色盤中選擇字型顏色時為了保證最低 3：1 的對比度，字型色與背景色至少相距 33。3%，其他對比度同理。注意：由於每個通道對亮度的影響效果不同，此方法只適用於灰階。
3.
提到亮度可能很多同學會想到 Lab 色彩模型，但筆者對比並查閱相關資料後發現這裡的亮度與 Lab 中的 L 值並不是線性關係。
4.
為什麼要用相對亮度來制定標準呢？筆者猜想是因為考慮到色盲群體，比如全色盲患者只能感受到光線強弱，看到的都是灰階景象，所以只有透過亮度來衡量對比才是有意義的。這個問題歡迎大家留言討論。
說個題外話，理解對比度對設計工作格外重要，絕大部分設計工具都會碰到這個概念，只要碰到顏色總會遇到對比度，本文涉及的只是針對文字可視性的分支研究，大家切勿作片面的理解。比如，銳化其實就是調整影像邊緣兩側顏色的對比度、調整色階或曲線時理解對比度會讓你的調整效率大大提高、影片處理時讓你在龐雜的調色面板中不會迷失方向？。
日後有機會會針對「光與色」單獨寫篇文章，在這裡就不展開說了，感興趣的同學請持續關注餓了麼UED哦！
如何驗證
人肉驗證
在IxDC的一次分享中，Airbnb的設計負責人@Vivian Wang @Alex Schleifer 在《如何在全球化設計理念和本土化需求中找到平衡》的主題中給出了視力水平與內容對比度的對應關係。本文末尾的附件中提供了斯奈倫標準視力表檔案，感興趣的同學給自己測一下即可得到自己的視力水平。再根據上文我提到的對比度相關知識多設定幾組對比度樣本，可以多找些同學多獲取些資料，根據得到的結果統計出平均值。注意，結論應充分考慮眼疾患者和室外環境的使用場景。
工具驗證
網路上有很多根據此規範設計的線上檢測工具，搜尋關鍵詞 Color Contrast Accessibility 可以找到很多，筆者這裡測試了幾個，推薦給大家。
1. Contrast-A
顯示結果比較詳細，取色和顯示都比較直觀。注意：此工具依賴Flash！！？
2. tanaguru contrast finder
除了給出測試結果外還可以給出近似的建議值。
3. Contrast 推薦
剛上架沒多久的 macOS 應用，目前售價 6。99 刀，特點是輕量高效，可以直接吸取螢幕顏色並給出結果。
4. Material Design Color Tool 力薦
Color Tool 是谷歌為設計師和工程師打造的全能配色工具。包含調色、可用性測試、匯出工程檔案三大功能。
調色
Color Tool 預置了全色相色彩模板，並支援自定義顏色。透過在右側調色面板可設定主色和輔色，在左側的預覽視窗可直接檢視不同佈局的顯示效果。
可用性測試
在可用性標籤內會非常詳細的顯示文字與背景的顯示效果，並給出極限值。值得注意的是 Material Design 透過控制字型顏色的不透明度來定義文字或 icon 的顏色層級，目前越來越多的網際網路公司已採用這種形式，這麼做有很多好處，在這裡就不一一列舉了，感興趣的同學可以到 Material Design 檢視。
匯出工程檔案
顏色選定後可以一鍵匯出開發可用的工程檔案，高效的簡直令人髮指！目前支援 iOS、Android、Html5。
結語
寫這篇文章的過程中筆者檢查了國內很多應用，多數不滿足這個標準。使用較多的「369大法」其實缺乏理論支援。如果單純為了區分資訊層級除了顏色外還有大小、字重、間距等（層級這塊兒 @icojump 在 iOS 11 設計理念和 3 個設計方向的文章中有更加詳細的解答）。筆者也在思考到底是理論重要還是設計師的感覺重要？不同的人也許有不同的答案。筆者想表達的觀點是：在制定顏色規範前要充分考慮目標使用者群體特點，比如年齡分佈、收入狀況、使用場景等，因為這些要素與視力水平及可用性都有著直接關係。在不完全確定的情況下請尊重標準，不要重新發明輪子。畢竟，也許我們眼中的美感往往是「自私」和帶有「偏見」的。
相關連結
Snellen chart
Visual impairment and blindness
Color blindness
2014年全球人口狀況簡要報告
WCAG 2。0（中文版）
Rec。709 標準
Google Material Design
Apple Human Interface Guidelines
附件
Snellen 標準視力表
版權說明
本文部分圖片源於網路，如有侵犯到您的權益請聯絡作者刪除。原創圖片皆標有 © 字樣，請您在使用前先聯絡作者。轉載文章需註明出處。
August 25， 2017， 2：19 AM
