Material Design Dark theme 深色主題如何應用

Google在2019 I/O大會慎重特別的推出了Material Design Dark theme，顧名思義就是在深色背景主題下的運用規劃，在這次發表主題裡也有解釋到，之所以重視是因為深色主題的介面在瀏覽上不僅能減少視覺疲勞，更因為整個使用環境螢幕亮度降低，電力也相對達到節省效果。

而深色主題下其環境與元素空間感如何正確使用呢？以下也做了幾點解釋。
關於material design 深色主題的重要屬性有以下：

對比度：深色表面和100％白色主要內文的對比度至少為15.8：1(對比度檢測參考網站) 深度：利用較淺的顏色表示物件在較高的高度 去飽和：飽和度高的原色會在深色背景上影響視覺容易造成視覺疲勞，內容文字顏色要通過WCAG的AA標準 4.5:1 (備註)， 在material design 選色工具上選擇200色調 圖片來源：material design dark theme 顏色限制：大面積顏色只能深色，主要色與輔助色避免被大面積使用。

 

深色主題背景顏色：

表面顏色應該使用深灰色而不是黑色，因為使用深灰色為背景更表現出元件在表面上的環境高度，而且深灰色與淺色文字對比度比在黑色上對比度低，助於減輕高對比度下的視覺疲勞。
推薦使用深灰色，色碼是#121212。

深色主題下的環境物件層級：

在深色主題下，元件高度越高，顏色會越亮
(設計畫面時加上白色覆蓋層(Elevation overla)，讓元件看起來越亮，material design 提供相對高度下的白色覆蓋透明度比對)
*此白色覆蓋不能蓋在主要顏色或次要顏色上，但為符合AA標準，主要色或次要色可以降低透明度來達到4.5:1。

顏色與文字

如同剛剛提到的，飽和度高的顏色在深色背景下容易影響視覺，所以建議在material design 選色工具上選擇主要色或次要色時應選擇顏色200色調；錯誤用的警告色應該是#CF6679（由material 原錯誤色#B00020覆蓋加上40%的白而產生）。

文字使用

高對比度，用於強調的文字為白色透明度為87%
中對比度，用於提示文字之類，文字為白色透明度60%
不能被使用的文字是白色透明度38%

被選取狀態與顏色使用

圖片來源：material design dark theme

備註說明：
WACG（Web Content Accessibility Guidelines），由W3C開發的網頁無障礙標準設計，因網頁閱覽者有可能是有視力障礙（Visual impairments）、聽力障礙（Hearing impairments）、運動障礙（Motor impairments）、智力障礙（Intellectual disabilities）等的身障者，為確保所有的網站瀏覽者都可以完全地得到平台資訊與功能，提出了「POUR無障礙原則」：易於感知的（Perceivable）、便於操作（Operable）、容易理解的（Understandable）、穩定耐用的（Robust），讓能力不一使用者更輕易使用網頁所提供的資訊和服務。
其中顏色（Color Accessibility）屬於「易於感知的」。 也就是說網站或app內容應該是要容易被看到的，尤其是文字和圖像，為了在背景中容易被辨識，應該要有足夠高的色彩對比度（high color contrast ratio），其中AA標準對比度應4.5:1，AAA標準對比度要7:1。