關於如何做好深色模式的對比度設計，我們可以通過解讀各大平臺的指南得出一些基本原則， 並根據產品差異選擇合適的對比度。
在深色模式的設計中，對比度是十分重要的，合適的對比度可以保證產品具備可用性和易用性。深色模式需要兼顧光線強弱兩種條件下用戶對於內容仍然能夠充分進行識別，還要避免在弱光線環境中受到眩光的影響。可以說，對比度控制的好不好，影響著用戶的使用體驗。
01 從平臺指南瞭解對比度設計
1. iOS
在iOS人機界面色彩準則中，給出了深色灰階。
由圖中可以看出，iOS的規範指南將最大對比度拉到了出人意料的最大值，直接在純黑色背景層上使用了純白文字！
這似乎和我們之前的常規認識有點不同：就像我們在設計淺色模式時，在白色背景下不會使用純黑文字；在黑色背景下也不會使用純白色字體。
這或許是因為蘋果在推出深色模式之初，所希望打造的就是一個不論在白天和夜晚都可以使用的色彩模式，而不是僅為弱光環境打造的“夜間模式”。它需要同時兼容不同光線情況下人眼對於光線的捕捉，從這一點上來講，深色模式的設計會比夜間模式更難，不是單純的降低對比度就是對的。
同時Apple提供了9種預定義的系統顏色，這些顏色是經過精心選擇以保證在不同模式之間能保持一致的感覺。
而對於除系統顏色以外的自定義顏色，官方給出的對比度建議是7:1。
2. Material Design System
Google在色彩對比度上的設計比Apple保守一點，在背景色的選擇上更偏愛深灰色。
在深灰色背景上使用淺色字體的對比度會比在黑色背景上低，更有助於減少用眼疲勞。在設計上， 谷歌常用陰影來表現層級關係，在更換為深色模式時，系統會保留默認的陰影，使用深灰色背景也更容易看到這些灰色陰影。
官方定義對於深色表面和白色文本的對比度至少為15.8:1。
3. WCAG
WCAG全稱為Web內容無障礙指南，其中包含分為可感知性、可操作性、可理解性、可兼容性和一致性五大類的相關建議，這些建議可使網站內容更容易訪問。iOS人機界面準則以及Material Design System都是基於WCGA之上。其中關於色彩對比度的部分，分別是條例1.4.3、1.4.6、1.4.11。這邊僅簡述，有興趣的可以自行搜索一下全文。
- 對於最小對比度（AA級）：文本及文本圖像至少需要4.5:1的對比度；大號文本及大號文本圖像則至少要3:1的對比度。
- 加強對比度（AAA級）：文本及文本圖像至少需要7:1的對比度；大號文本及大號文本圖像則至少要4.5:1的對比度。
- 非文本對比度（AA級）：用戶界面組件及圖形圖像等在視覺呈現時，與相鄰顏色的對比度至少為3:1。
02 根據產品差異選擇合適的對比度
以上平臺設計指南給出的終究只是一個建議參考，在深色模式的設計中，除了要考慮適配平臺規則之外，更應該思考的是適用於產品的定位和使用場景。
1. 釘釘
釘釘的整體深色模式設計很明顯更偏向於適配iOS設計。
從上圖可知，在主要文字信息的對比度上已經大於了15.8:1，其他顏色的對比度也大於4.5:1。其中整個頁面的最大對比度達到了滿值。
釘釘從產品上說屬於工具型的產品，使用場景更多是在企業辦公，為了讓信息內容突出，加大對比度的刺激可以保證用戶在使用時更為清晰，更為高效。
2. 微信
微信在深色模式設計中並未使用iOS官方模式。而是降低了整個頁面的對比度，整體以較為灰暗的樣式呈現。
可以看到文字信息的對比度僅大於7:1。更多的是考慮微信的聊天場景中，用戶可能長時間沉浸式使用。這裡微信將深色模式與夜間模式進行了兼容，避免大的對比造成強烈的視覺刺激，可以在深夜環境下獲得更好的感知度。
以上兩者在深色模式的設計上差異雖然較大，但其宗旨都在於為用戶服務，都是在充分考慮使用場景及定位之後，希望提供更為良好的用戶體驗。所以深色模式中的對比度設計不應該死搬硬套平臺規範指南，更多的還需要分析自身產品的特性，適合的才是最好的。
03 對比度的計算
在對對比度設計有了一定了解之後，怎麼才能知道自己選擇的顏色對比度是多少呢？其實對比度是通過色彩的相對亮度來計算的。在WCAG中已經告訴了我們相對亮度的計算公式：
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其實就是我們色彩面板中顯示的通道數值。這裡要注意，這裡使用的色彩文件需要是sRGB色彩。
有了相對亮度，就可以計算對比度了：
(L1+0.05)/(L2+0.05)
其中L1為淺色的相對亮度，L2為深色的相對亮度。
如果沒看懂公式也沒關係，這裡推薦一個網站，直接輸入兩個色的色值，就能直接計算出對比度。
對比度查詢工具：
https://contrast-ratio.com/?ref=uxprocc#
可以使用多種色彩值表達方式，可以直接輸入常規色的英文，也可以使用#333333，或者hsla(200,0%,0%,.7)都可以。這樣就很方便的可以查詢自己的配色是否符合最小對比度了。
以上希望能對於設計深色模式有所幫助！
參考
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內容無障礙指南（WCAG）2.1 中文版：
https://www.w3.org/Translations/WCAG21-zh/
作者：『夜。微信公眾號：夜的UE筆記
本文由 @『夜。 原創發佈於人人都是產品經理。未經許可，禁止轉載。
題圖來自 Unsplash，基於CC0協議
