編輯導(dǎo)語：我們在使用手機和電腦時，長期的使用會讓我們眼睛感到疲勞，所以一個柔和的舒適的畫面很重要；比如手機和電腦的屏幕可以設(shè)置夜間模式，在晚上看手機可以舒緩一點；本文作者對配色中的顏色對比度做出了分析，我們一起來看一下。

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

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

前面我在《Google 用戶研究：文本框設(shè)計原則》中提到過，Google Design 對于文本框可用性研究的主要發(fā)現(xiàn)，其中有一條是：文本框的底部線條與背景的顏色對比度最小應(yīng)為3：1；因為有足夠的顏色對比才能夠讓控件在場景中具有更高的易見性。

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

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

這個問題其實很容易解答。

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

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

否則很可能在真實的使用場景中，你的產(chǎn)品幾乎沒法使用。

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

實際上WCAG中還包含了許多無障礙設(shè)計標準條例，從視力、聽力、運動和智力等諸多方面指導(dǎo)產(chǎn)品設(shè)計者做出更加易于使用的產(chǎn)品。

但今天我主要提煉出「顏色對比度無障礙標準」這一項來說一說。

二、顏色對比度無障礙標準

通過閱讀性能評估，色相和飽和度對可讀性的影響其實很小，甚至沒有；真正影響閱讀性能的其實是顏色明度造成的顏色對比度（顏色明度的概念，我在《用理性與數(shù)學(xué)，推導(dǎo)產(chǎn)品色彩系統(tǒng)》有提過，在這里就不再贅述了）。

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

WCAG制定了兩條標準條例，分別是「1.4.3條例：對比度（最?。藴省梗碅A標準）和「1.4.6條例：對比度（加強）標準」（即AAA標準）；AAA標準比AA標準要更加嚴苛，適合視覺要求更嚴格的產(chǎn)品類型。

兩條標準的定義分別為：

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

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

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

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

三、顏色對比度如何計算

（溫馨提示：數(shù)學(xué)不好的朋友…可以直接跳到下一節(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é)合了色系坐標系、矩陣運算等等一系列的演變；特別感興趣可以去查查，篇幅原因我就不在此做過多贅述了。

舉個例子：計算純黑色RGB（0,0,0）的文本與純白色RGB（255,255,255）背景的對比度。

• 對于黑色：RsRGB = GsRGB = BsRGB = 0/255 = 0
• 對于白色：RsRGB = GsRGB = BsRGB = 255/255 = 1
• 黑色：RsRGB = GsRGB = BsRGB = 0 ＜ 0.03928
• 黑色：R = G = B = 0/12.92 = 0
• 白色：RsRGB = GsRGB = BsRGB = 1 ＞ 0.03928
• 白色：R = G = B = [(1+0.055)/1.055]^2.4 = 1
• 黑色的相對亮度 L1 = 0.2126 * 0 + 0.7152 * 0 + 0.0722 * 0 = 0
• 白色的相對亮度 L2 = 0.2126 * 1 + 0.7152 * 1 + 0.0722 * 1 = 1
• 黑色文本與白色背景的對比度 = (0+0.05) / (1+0.05) = 1:21

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

四、對比度工具及實例驗證

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

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

由圖中可以看出，iOS規(guī)范直接在純黑色背景層上使用了純白文字，將顏色對比度拉到了出人意料的最大值。

這似乎和我們之前的常規(guī)認識有點不同：就像我們在設(shè)計淺色模式時，在白色背景下不會使用純黑文字；在黑色背景下也不會使用純白色字體。

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

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

在深灰色背景上使用淺色字體的對比度會比在黑色背景上低，更有助于減少用眼疲勞。

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

五、結(jié)語

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

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

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

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

#專欄作家#

UCD耍家，公眾號：UCD耍家（ID：ucdplayer），人人都是產(chǎn)品經(jīng)理專欄作家。

本文由 @UCD耍家 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議