1. 簡介
上次更新時間：2022 年 5 月 11 日
Material 3 色彩系統會使用動態色彩演算法建立無障礙色彩配置，但色彩的無障礙功能是什麼意思？Material Design 的新色彩系統如何建立無障礙色彩配置？有哪些工具可提供協助？
課程內容
- 顏色與無障礙和對比度規範的關係。
- 如何運用工具建立無障礙色彩配置、進行編輯及檢查對比度。
必要條件
本實驗室建立在以下基礎設計概念上：
- 瞭解目前的 Android 色彩配置和角色。
- Figma 相關知識。
軟硬體需求
- Figma 帳戶
- Figma Designlab 檔案
- Figma 外掛程式「Material Theme Builder」
2. 開始操作
設定
如要開始操作，請先存取這個 Designlab Figma 檔案。本研究室所需素材都在這個 Figma 檔案當中。您可以下載並匯入這個檔案，或從 Figma 社群複製。
首先，登入 Figma 或建立帳戶。
從 Figma 社群複製
前往「Designing with accessible colors」檔案，或在 Figma 社群內搜尋「Designing with accessible colors」。按一下右上角的「複製」，將檔案複製到你的檔案中。
檔案版面配置
瀏覽檔案時，您會發現這個檔案內容獨立完整，開頭是簡介。每個章節都劃分成一列相互連結的畫板，含有該章節的某些核心概念，隨後附上練習。章節和練習彼此相輔相成，因此應該依序完成。
本程式碼研究室會逐步詳細說明這些概念和練習。請參閱程式碼研究室，進一步瞭解 Material You 新功能！
從「Intro」畫板開始，有數個依序連結畫板的按鈕。按一下按鈕即可存取連結。
安裝 Figma 外掛程式
本程式碼研究室會大量使用新的 Figma 外掛程式，產生動態色彩配置和符記。直接從 Figma 社群頁面安裝 Figma 外掛程式，或在 Figma 社群中搜尋「Material Theme Builder」。
3. 顏色和無障礙功能
無障礙設計是為所有人設計產品的唯一方法，可確保產品能涵蓋盡可能多的使用者。
「我可以在螢幕上看到顏色嗎？」只是使用顏色設計時的第一個考量。視力不同的人對色彩的觀感也不同。
色盲可能代表檢查色彩組合，確保 UI 元素不會混在一起。
雖然不透明度和權重可能不是顏色的實際色調，但會對顏色的觀感產生強大的視覺效果。
如果使用低不透明度，顏色會變淺，文字可能難以辨識。舉例來說，如果使用者有近視，在合理距離下，可能無法閱讀不透明度設為 30% 的文字。
請謹慎使用不透明度，且絕不低於建議的規範。
字型粗細也可能產生類似效果，在深色背景上使用較細的字型。在印刷時，使用極細的字體會導致墨水「溢出」到字體內，造成文字擁擠。我們的眼睛也會在螢幕上產生這種效果，試圖填滿空間。
在深色背景上使用細字體，會產生壓迫感。
易讀性與可讀性。在本實驗室中，我們將會提到文字的可讀性。易讀性是指文字是否容易辨識，可讀性則是指文字是否容易理解。
4. 色彩對比
無障礙指南提供一致的專家導向檢查清單，協助設計人員和開發人員遵循最佳做法，打造具有包容性的產品。WCAG 是常見的標準，也是本實驗室的參考依據。
色彩對比度是指前景和背景元素亮度之間的差異，以比率格式呈現。這項比率條件會獲得評等。測量按鈕上的文字與容器之間的對比度，有助於判斷文字是否清晰易讀。
色彩對比不合格的範例。
色彩對比度指南分為文字和非文字，各有不同的等級。
文字
AA | AAA | |
大型文字 | 3:1 | 4.5:1 |
一般文字 (內文) | 4.5:1 | 7:1 |
非文字
AA | |
非文字 (圖形元素) | 3:1 |
我們來檢查一些對比，看看如何手動修正。
- 在 Figma 中找出 UI 元素中的顏色。從「Large text」(#C0BEC5) 開始，背景顏色為 (#F5F5FF)。使用線上對比檢查工具，將這些顏色輸入前景和背景，會發現所有評分都未通過。
- 文字太亮，不適合搭配背景顏色。在線上對比度檢查工具中，使用顏色選擇器將前景色調暗，直到通過 AAA 為止。
- 返回 Figma，將新的通過顏色套用至大型文字。
- 對內文和按鈕重複相同程序，並確保檢查每個項目的文字顏色和背景顏色。
- ，使用「圖形物件和使用者介面元件」下方的結果，對圖示套用相同程序**。**
- 將新顏色帶入 Figma，套用至每個元素。現在所有元素應該都會通過對比度評估！
通過色彩對比測試的範例。
這可能感覺是漫長的過程，而且結果可能產生不夠和諧的色調。這時工具就能派上用場！
5. 以亮度為基礎建構
Material Design 的全新動態色彩系統是使用亮度而非色調建構而成。也就是說，如果移除色調和彩度，我們就能透過深淺不同的顏色看出對比。
系統擷取顏色後，會產生 5 個經過轉移的主要顏色，並從中生成色調調色盤。色調調色盤包含 13 種色調，包括白色和黑色。色調值為 100 時，相當於光線達到最大值，因此會產生白色。介於 0 到 100 之間的每個色調值，都代表顏色中的光量。
色調調色盤系統是預設建立無障礙色彩配置的關鍵。
根據色調而非十六進位值或色相來組合顏色，是讓任何顏色輸出內容都能存取的關鍵系統之一。使用動態色彩的產品會符合相關規定，因為使用者可體驗的演算法組合均符合無障礙標準。
亮度相近的元素對比度不足，無法清楚辨識，而亮度不同的元素則較容易區分。
Material You 的動態色彩可因應各種情境，如要在各種觀看情境中管理對比度，亮度等級是重要屬性，即使產品團隊未測試每個特定顏色組合，也能讓顏色順利組合。
6. 建立無障礙主題
主題建構工具會以 Figma 樣式產生 Material Design 符記，讓您查看動態色彩並建構自訂主題。這項作業會遵循 Material 3 色彩系統，確保色彩配置中產生符合無障礙規範的顏色。
- 在外掛程式模式中，按一下「自訂」。這樣一來，主題就會切換為自訂主題。系統已產生 Material 主題，但您也可以視需要建立新主題。詳情請參閱「動態色彩視覺化」。
- 接著，設定主要按鍵顏色。主要顏色可以是主要品牌顏色，或最常使用的主要強調色。按一下標示為「主要」的顏色，開啟顏色挑選器並選擇顏色。主要顏色會用於來源顏色，與動態設定中的來源顏色非常相似。
為 MTB 新增顏色。
- 系統會根據主要顏色填入其餘主要顏色。也就是說，如果不需要，就不必新增其他顏色。視需要新增次要色和第三色。
- 色彩示意圖會顯示從輸入顏色解讀出的主要顏色、產生的色調調色盤，以及包含顏色角色所產生的色彩配置。淺色和深色配置皆可使用！
- 實驗室已提供範例 UI，方便您查看套用的色彩配置。選取 App UI 元件，然後按一下外掛程式中的「swap」。
色彩配置與連結的模擬裝置。
在這些練習中，Material Theme Builder 已在 Figma 檔案中產生必要權杖。
7. 使用 Material Design 主題設定建構工具檢查對比度
這很棒，但我們瞭解您想手動更新部分樣式，改用其他顏色。Material Design 主題設定建構工具內建核心色彩配置的對比度檢查功能，可協助您做出這些決定。
- 由於權杖是做為樣式建立，因此我們也可以設定產生的顏色值。在 Figma 樣式中，向下切換至目前主題的「Primary color」，然後選取右側的「Edit style」圖示。
- 在屬性中更新原色。這會反映在色彩輸出和應用程式 UI 中。這個顏色並非由色彩演算法生成，因此我們無法保證無障礙程度。
- 在外掛程式選單中，按一下「檢查對比度」，然後重新開啟主要樣式的「編輯樣式」模式。這會檢查對比度，並顯示對比度等級。
Figma 樣式對話方塊中的對比。
8. 恭喜
太棒了！無障礙設計應是您流程中不可或缺的一環，而透過 Material Design 和 Material Design 主題設定建構工具，無障礙設計變得更加簡單。
如有任何疑問，歡迎隨時透過 Twitter 上的 @MaterialDesign 提問。
更多設計內容和教學課程即將在 youtube.com/MaterialDesign 上線，敬請期待！