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

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

Google Design 對(duì)于文本框可用性研究的主要發(fā)現(xiàn)，其中有一條是： 文本框的底部線條與背景的顏色對(duì)比度最小應(yīng)為3：1。因?yàn)橛凶銐虻念伾珜?duì)比才能夠讓控件在場(chǎng)景中具有更高的易見(jiàn)性。

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

為什么會(huì)有「對(duì)比度標(biāo)準(zhǔn)」

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

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

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

實(shí)際上WCAG中還包含了許多無(wú)障礙設(shè)計(jì)標(biāo)準(zhǔn)條例，從視力、聽(tīng)力、運(yùn)動(dòng)和智力等諸多方面指導(dǎo)產(chǎn)品設(shè)計(jì)者做出更加易于使用的產(chǎn)品。但今天我主要提煉出「顏色對(duì)比度無(wú)障礙標(biāo)準(zhǔn)」這一項(xiàng)來(lái)說(shuō)一說(shuō)。

顏色對(duì)比度無(wú)障礙標(biāo)準(zhǔn)

通過(guò)閱讀性能評(píng)估，色相和飽和度對(duì)可讀性的影響其實(shí)很小，甚至沒(méi)有。真正影響閱讀性能的其實(shí)是顏色明度造成的顏色對(duì)比度。

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

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

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

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

我們?cè)?iOS人機(jī)交互規(guī)范 和 Material Design 指導(dǎo)規(guī)范中，可以看到有許多顏色對(duì)比度指標(biāo)都是履行WCAG標(biāo)準(zhǔn)的。

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

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

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

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

• 對(duì)比度 = (L1 + 0.05)/(L2 + 0.05)「其中：L指顏色的相對(duì)亮度」
• 相對(duì)亮度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 的取值」。

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

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

對(duì)比度工具及實(shí)例驗(yàn)證

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

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

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

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

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

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

結(jié)語(yǔ)

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

最近逐漸流行起來(lái)的「暗黑模式」就特別講究對(duì)比度的推敲。

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

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