我猜在你踏入設計這個圈子的時候，一定有被推薦過 Robin Williams 的《寫給大家看的設計書》。復雜的設計原理在書中被凝煉為親密性、對齊、重復和對比四個基本原則。

但其實我今天要說到的內(nèi)容和這本書的關(guān)系不大…我只是想引出「對比」這個概念，在設計中有多么基礎且重要。

Google Design 對于文本框可用性研究的主要發(fā)現(xiàn)，其中有一條是： 文本框的底部線條與背景的顏色對比度最小應為3：1。因為有足夠的顏色對比才能夠讓控件在場景中具有更高的易見性。

但你是否真的了解顏色對比度的概念?這個值為什么是 「3：1」，又應該怎么得到「3：1」?顏色對比度對我們在設計過程有什么影響，能起到什么作用?

為什么會有「對比度標準」

這個問題其實很容易解答。在硬件設備制造商繁多的當下，產(chǎn)品設計者其實是無法確保每一個用戶在使用你的產(chǎn)品時，所看到的界面和設計師在顯示器上看起來的一樣完美。

總會有用戶使用的是顯示性能較差的設備。甚至你需要考慮的還不僅僅是設備因素，產(chǎn)品的使用環(huán)境(室外或昏暗室內(nèi))、主流用戶群體的視力情況等等，都可能要求你做到更加無障礙的視覺體驗。 否則很可能在真實的使用場景中，你的產(chǎn)品幾乎沒法使用…

但僅憑設計師的經(jīng)驗進行判斷當然是不現(xiàn)實的。于是乎業(yè)界便誕生了WCAG(Web Content Accessibility Guideline，Web內(nèi)容無障礙指南)標準。 雖然該標準是為了滿足有視覺障礙用戶的視覺體驗，但滿足該標準后，同樣也能幫助普通用戶更方便地使用。

實際上WCAG中還包含了許多無障礙設計標準條例，從視力、聽力、運動和智力等諸多方面指導產(chǎn)品設計者做出更加易于使用的產(chǎn)品。但今天我主要提煉出「顏色對比度無障礙標準」這一項來說一說。

顏色對比度無障礙標準

通過閱讀性能評估，色相和飽和度對可讀性的影響其實很小，甚至沒有。真正影響閱讀性能的其實是顏色明度造成的顏色對比度。

WCAG顏色對比度標準定義的目的是讓文本和背景之間存在足夠的對比度，確保絕大范圍視力程度的人群都易于閱讀。也就是說，符合WCAG該標準的文字或圖像，將有足夠高的色彩對比度，使之很容易地從背景中被辨識出來。

WCAG制定了兩條標準條例，分別是「1.4.3條例：對比度(最小)標準」(即AA標準)和「1.4.6條例：對比度(加強)標準」(即AAA標準)。AAA標準比AA標準要更加嚴苛，適合視覺要求更嚴格的產(chǎn)品類型。兩條標準的定義分別為：

• 1.4.3 對比度(最小): 普通文本的視覺呈現(xiàn)與背景至少要有 4.5:1 的對比度，大文本¹與背景至少有 3:1 的對比度。
• 1.4.6 對比度(加強): 普通文本的視覺呈現(xiàn)與背景至少有 7:1 的對比度，大文本¹與背景至少有 4.5:1 的對比度。

備注：¹大文本：WCAG規(guī)定 「≥18pt常規(guī)字重」的文本或 「≥14pt字重加粗」的文本為大文本。

我們在 iOS人機交互規(guī)范 和 Material Design 指導規(guī)范中，可以看到有許多顏色對比度指標都是履行WCAG標準的。

例如：我們前面說到的「文本框的底部線條與背景的顏色對比度最小應為3：1」，以及MD規(guī)范中暗黑模式下「明度對比至少4.5：1」。這些數(shù)據(jù)，均是來自WCAG標準。

顏色對比度如何計算

(溫馨提示：數(shù)學不好的朋友…可以直接跳到下一節(jié)使用便捷工具…)

了解了數(shù)據(jù)指標后，我們就該探索顏色的對比度是如何計算得出的了。該公式可以在WCAG標準中可以找到：

• 對比度 = (L1 + 0.05)/(L2 + 0.05)「其中：L指顏色的相對亮度」
• 相對亮度L = 0.2126 * R + 0.7152 * G + 0.0722 * B
• 其中 R, G , B 取值為： 若 XsRGB <= 0.03928 則 X = XsRGB/12.92 ;否則 X = ((XsRGB+0.055)/1.055) ^ 2.4
• XsRGB 在此指代 RsRGB, GsRGB, 或 BsRGB，取值為 XsRGB = X8bit/255 「X8bit 指R、G、B通道各自在8位/通道下 0-255 的取值」。

我建議不用過多地去糾結(jié)公式底層的邏輯，比如0.2126這樣的數(shù)據(jù)是怎么來的。畢竟通過官方給出的公式，已經(jīng)足夠用于計算顏色對比度了。通過我前期的調(diào)研，這些數(shù)據(jù)的來源結(jié)合了色系坐標系、矩陣運算等等一系列的演變…特別感興趣可以去查查，篇幅原因我就不在此做過多贅述了。

根據(jù)上面的例子，我們不但知道了如何計算兩個顏色的對比度，同時也得出了： 顏色中對比度的最大值為21:1(純黑與純白)的結(jié)論。

對比度工具及實例驗證

上面如此復雜的公式，確實不可能每一次都通過手動計算去得到對比度…好在現(xiàn)在已經(jīng)有許多在線工具已經(jīng)可以輔助我們完成對比度校驗的工作了，比如有類似 WebAIM’s Color Contrast Checker 這樣的單色對比度工具，或者類似 EightShapes Contrast Grid 這樣的色組對比度工具。

有了這樣的快捷工具，我快速驗證了iOS與MD兩個規(guī)范的顏色可用性。

由圖中可以看出， iOS規(guī)范直接在純黑色背景層上使用了純白文字，將顏色對比度拉到了出人意料的最大值。這似乎和我們之前的常規(guī)認識有點不同：就像我們在設計淺色模式時，在白色背景下不會使用純黑文字;在黑色背景下也不會使用純白色字體。

這或許是因為蘋果在推出深色模式之初，所希望打造的就是一個不論在白天和夜晚都可以使用的色彩模式，而不是僅為弱光環(huán)境打造的「夜間模式」。它需要同時兼容不同光線情況下人眼對于光線的捕捉，從這一點上來講，深色模式的設計會比夜間模式更難，不是單純的降低對比度就可以的。

而MD在色彩對比度上的設計比iOS保守一點，在背景色的選擇上更偏愛深灰色。

在深灰色背景上使用淺色字體的對比度會比在黑色背景上低，更有助于減少用眼疲勞。在設計上， MD更常用陰影來表現(xiàn)層級關(guān)系，在更換為深色模式時，系統(tǒng)會保留默認的陰影，使用深灰色背景也更容易看到這些灰色陰影。官方定義對于深色表面和白色文本的對比度至少為15.8:1。

結(jié)語

不得不說，顏色對比度的細節(jié)確實很難把握，但也從細節(jié)體現(xiàn)出了一個設計師的耐心與深入程度。

最近逐漸流行起來的「暗黑模式」就特別講究對比度的推敲。

我記得微信「暗黑模式」剛推出時，飽受詬病，被很多網(wǎng)友說辣眼睛…后來一位同行隨即分析了原因，得出的結(jié)論就是因為顏色對比度的把控沒有做到位，導致用戶長時間看對比度較弱的界面，造成視覺疲勞。當然現(xiàn)在微信團隊已經(jīng)逐步進行了優(yōu)化。

因為篇幅原因，我在此只為大家科普了顏色對比度的概念。后面有機會我會繼續(xù)給大家再分享MD團隊是如何完成「暗黑模式」配色推敲的，以及到底應該如何使用顏色對比度來校驗你的產(chǎn)品配色方案。