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

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

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

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

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

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

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

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

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

顏色對比度無障礙標準

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

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

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

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

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

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

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

顏色對比度如何計算

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

了解了數據指標后，我們就該探索顏色的對比度是如何計算得出的了。該公式可以在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 的取值」。

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

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

對比度工具及實例驗證

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

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

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

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

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

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

結語

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

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

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

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