關(guān)于如何做好深色模式的對(duì)比度設(shè)計(jì)，我們可以通過解讀各大平臺(tái)的指南得出一些基本原則， 并根據(jù)產(chǎn)品差異選擇合適的對(duì)比度。

在深色模式的設(shè)計(jì)中，對(duì)比度是十分重要的，合適的對(duì)比度可以保證產(chǎn)品具備可用性和易用性。深色模式需要兼顧光線強(qiáng)弱兩種條件下用戶對(duì)于內(nèi)容仍然能夠充分進(jìn)行識(shí)別，還要避免在弱光線環(huán)境中受到眩光的影響。可以說，對(duì)比度控制的好不好，影響著用戶的使用體驗(yàn)。

01?從平臺(tái)指南了解對(duì)比度設(shè)計(jì)

1. iOS

在iOS人機(jī)界面色彩準(zhǔn)則中，給出了深色灰階。

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

這似乎和我們之前的常規(guī)認(rèn)識(shí)有點(diǎn)不同：就像我們?cè)谠O(shè)計(jì)淺色模式時(shí)，在白色背景下不會(huì)使用純黑文字；在黑色背景下也不會(huì)使用純白色字體。

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

同時(shí)Apple提供了9種預(yù)定義的系統(tǒng)顏色，這些顏色是經(jīng)過精心選擇以保證在不同模式之間能保持一致的感覺。

而對(duì)于除系統(tǒng)顏色以外的自定義顏色，官方給出的對(duì)比度建議是7:1。

2. Material Design System

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

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

官方定義對(duì)于深色表面和白色文本的對(duì)比度至少為15.8:1。

3. WCAG

WCAG全稱為Web內(nèi)容無(wú)障礙指南，其中包含分為可感知性、可操作性、可理解性、可兼容性和一致性五大類的相關(guān)建議，這些建議可使網(wǎng)站內(nèi)容更容易訪問。iOS人機(jī)界面準(zhǔn)則以及Material Design System都是基于WCGA之上。其中關(guān)于色彩對(duì)比度的部分，分別是條例1.4.3、1.4.6、1.4.11。這邊僅簡(jiǎn)述，有興趣的可以自行搜索一下全文。

• 對(duì)于最小對(duì)比度（AA級(jí)）：文本及文本圖像至少需要4.5:1的對(duì)比度；大號(hào)文本及大號(hào)文本圖像則至少要3:1的對(duì)比度。
• 加強(qiáng)對(duì)比度（AAA級(jí)）：文本及文本圖像至少需要7:1的對(duì)比度；大號(hào)文本及大號(hào)文本圖像則至少要4.5:1的對(duì)比度。
• 非文本對(duì)比度（AA級(jí)）：用戶界面組件及圖形圖像等在視覺呈現(xiàn)時(shí)，與相鄰顏色的對(duì)比度至少為3:1。

02?根據(jù)產(chǎn)品差異選擇合適的對(duì)比度

以上平臺(tái)設(shè)計(jì)指南給出的終究只是一個(gè)建議參考，在深色模式的設(shè)計(jì)中，除了要考慮適配平臺(tái)規(guī)則之外，更應(yīng)該思考的是適用于產(chǎn)品的定位和使用場(chǎng)景。

1. 釘釘

釘釘?shù)恼w深色模式設(shè)計(jì)很明顯更偏向于適配iOS設(shè)計(jì)。

從上圖可知，在主要文字信息的對(duì)比度上已經(jīng)大于了15.8:1，其他顏色的對(duì)比度也大于4.5:1。其中整個(gè)頁(yè)面的最大對(duì)比度達(dá)到了滿值。

釘釘從產(chǎn)品上說屬于工具型的產(chǎn)品，使用場(chǎng)景更多是在企業(yè)辦公，為了讓信息內(nèi)容突出，加大對(duì)比度的刺激可以保證用戶在使用時(shí)更為清晰，更為高效。

2. 微信

微信在深色模式設(shè)計(jì)中并未使用iOS官方模式。而是降低了整個(gè)頁(yè)面的對(duì)比度，整體以較為灰暗的樣式呈現(xiàn)。

可以看到文字信息的對(duì)比度僅大于7:1。更多的是考慮微信的聊天場(chǎng)景中，用戶可能長(zhǎng)時(shí)間沉浸式使用。這里微信將深色模式與夜間模式進(jìn)行了兼容，避免大的對(duì)比造成強(qiáng)烈的視覺刺激，可以在深夜環(huán)境下獲得更好的感知度。

以上兩者在深色模式的設(shè)計(jì)上差異雖然較大，但其宗旨都在于為用戶服務(wù)，都是在充分考慮使用場(chǎng)景及定位之后，希望提供更為良好的用戶體驗(yàn)。所以深色模式中的對(duì)比度設(shè)計(jì)不應(yīng)該死搬硬套平臺(tái)規(guī)范指南，更多的還需要分析自身產(chǎn)品的特性，適合的才是最好的。

03?對(duì)比度的計(jì)算

在對(duì)對(duì)比度設(shè)計(jì)有了一定了解之后，怎么才能知道自己選擇的顏色對(duì)比度是多少呢？其實(shí)對(duì)比度是通過色彩的相對(duì)亮度來計(jì)算的。在WCAG中已經(jīng)告訴了我們相對(duì)亮度的計(jì)算公式：

For the sRGB colorspace, the relative luminance of a color is defined as

L = 0.2126 * R + 0.7152 * G + 0.0722 * B

where R, G and B are defined as:

* 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

and RsRGB, GsRGB, and BsRGB are defined as:

* RsRGB = R8bit/255

* GsRGB = G8bit/255

* BsRGB = B8bit/255

上面的R8bit、G8bit、B8bit其實(shí)就是我們色彩面板中顯示的通道數(shù)值。這里要注意，這里使用的色彩文件需要是sRGB色彩。

有了相對(duì)亮度，就可以計(jì)算對(duì)比度了：

(L1+0.05)/(L2+0.05)

其中L1為淺色的相對(duì)亮度，L2為深色的相對(duì)亮度。

如果沒看懂公式也沒關(guān)系，這里推薦一個(gè)網(wǎng)站，直接輸入兩個(gè)色的色值，就能直接計(jì)算出對(duì)比度。

對(duì)比度查詢工具：

https://contrast-ratio.com/?ref=uxprocc#

可以使用多種色彩值表達(dá)方式，可以直接輸入常規(guī)色的英文，也可以使用#333333，或者h(yuǎn)sla(200,0%,0%,.7)都可以。這樣就很方便的可以查詢自己的配色是否符合最小對(duì)比度了。

以上希望能對(duì)于設(shè)計(jì)深色模式有所幫助！

參考

Material Design Dark theme：

https://material.io/design/color/dark-theme.html#usage

iOS Human Interface Guidelines：

https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/dark-mode/

Web內(nèi)容無(wú)障礙指南（WCAG）2.1 中文版：

https://www.w3.org/Translations/WCAG21-zh/

作者：『夜。微信公眾號(hào)：夜的UE筆記

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

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