介面標準怎麼控制顏色與無障礙

一個介面用了幾種顏色？多數團隊答不出來。一開始可能只有品牌藍，後來加了一個提醒用的黃、一個看起來比較活潑的紫、某個頁面為了「跳一點」又多了一個橘。每一次都合理，加總起來卻變成一片沒有規則的色彩。

顏色失控的代價不只是不好看。使用者會開始分不清哪個按鈕最重要、哪個訊息需要處理；視力較弱、在戶外看手機、或使用暗色模式的人，可能根本讀不清楚。這篇文章說明我們怎麼用色票、對比檢查和定期稽核，把顏色變成可以管理的東西。

顏色是有意義的色票

我們的第一個原則是：先決定角色，再決定色值。介面裡的每個顏色都必須回答「你在這裡代表什麼」。答得出來，就成為一個有名字的色票；答不出來，多半就不該存在。

• 主要藍：代表主要動作與重點資料，例如送出按鈕、連結、最重要的數字。
• 黃色：代表需要注意，例如待處理、即將到期。它提醒，但不代表出錯。
• 紅色：只用於錯誤，例如失敗、無法完成。不拿來裝飾，也不拿來強調一般內容。
• 綠色：代表完成或成功；墨色與灰階負責文字、標題和框線。

元件在程式裡只引用色票的名字，例如「主要動作」，而不是直接寫一個色碼。這樣一來，要調整品牌藍時只改一處；某個頁面想「偷偷換個顏色」也會變得很明顯。

色票的名字也很重要。我們用角色命名，例如「主要動作」「提醒」「錯誤」，而不是「藍色一號」「亮黃」。用顏色命名的色票，遲早會被拿去做和原意無關的事；用角色命名，使用的人每次都會被提醒：這個顏色在這裡應該代表什麼。

色票數量也刻意保持少。一組能說清楚的角色，加上少數輔助色給圖表或插圖使用，就足以撐起大多數畫面。當有人想新增一個顏色時，第一個問題永遠是：現有的角色裡，有沒有一個已經能表達這件事？

對比度：看得清楚是最低要求

好看的配色不一定讀得清楚。淺灰字配白底、白字配亮黃，在設計稿上很雅緻，到了陽光下的手機螢幕就幾乎消失。

我們採用常見的無障礙標準：一般內文與背景的對比至少 4.5:1，大字與圖示等非文字元素至少 3:1。這是硬性門檻，不是建議。每個色票組合在定案前都要實際算過，例如「白字放在主要藍上」「深色字放在黃色提醒底上」。

有時這代表要為同一個角色準備兩個色值：一個給大面積的底色，一個給上面的文字。黃色就是典型例子，亮黃很適合當提醒底色，但黃字放在白底上幾乎讀不到，所以提醒的文字會用較深的黃褐色。

亮色與暗色，來自同一組色票

暗色模式不是把所有顏色反過來。白底上清楚的藍，放到深色底上可能太暗、太刺眼，或對比不足。

我們的做法是：元件只認角色名稱，主題只負責提供色值。亮色主題的「主要動作」是飽和的品牌藍，暗色主題則換成較亮的藍，讓它在深底上同樣清楚。兩種主題各自都要通過對比檢查，不能只驗一邊。

顏色從不是唯一的信號

有些人分不清紅與綠，有些人在灰階螢幕或強光下看介面。如果「錯誤」只用紅色表示，這些人就會錯過它。

• 錯誤訊息同時有圖示與文字說明，而不只是把框線變紅。
• 圖表的不同系列除了顏色，也用標籤、形狀或線型區分。
• 必填欄位、目前所在頁面，都有顏色以外的標示。

動態也是同樣的道理。淡入、滑動和色塊漂移能讓介面有生命感，但對某些人會造成不適。當使用者在系統裡開啟「減少動態」，我們的介面就停止非必要的動畫，內容直接出現，資訊一樣完整。

好看是加分；每個人都看得清楚，是及格。

定期稽核：盤點、對應、檢查、修正

規則寫好之後，真正的挑戰是維持。新頁面、新元件、新的合作者，都可能帶進一個「只用這一次」的顏色。因此我們會定期做一次顏色稽核，步驟很固定：

• 盤點：列出畫面與樣式裡實際用到的每一個色值，不靠記憶。
• 對應色票：把每個色值歸到一個角色，近似但不同的顏色合併成同一個色票。
• 檢查對比：逐一計算文字與背景、亮色與暗色主題的對比度。
• 修正：把散落的色碼換成色票，並記錄改了什麼、改之前長什麼樣子，方便回頭比對。

稽核常會發現一些意外，例如背景色太跳、某個紫色彩度過高，或兩個幾乎一樣的藍同時存在。這時候的原則是收斂，而不是再加一個新顏色。

稽核也要記得哪些顏色「刻意不改」。例如第三方平台的標誌色，只用在標示該通路的地方，就保留原樣並註明原因；示意內容裡虛構品牌的識別色，也屬於故事本身，而不是介面的一部分。把例外寫清楚，下一次稽核才不會反覆討論同一件事，也不會有人誤把例外當成新的標準。

最後，每次稽核的結果都會留下紀錄：盤點到哪些顏色、合併了哪些、哪些組合沒通過對比、修正後的樣子。這份紀錄讓下一次稽核有比較的基準，也讓新加入的人很快理解，為什麼介面長成現在這樣。

重點回顧

顏色是介面裡最容易失控、也最容易被忽略的部分。把它當成有角色、有規則、會被檢查的系統，好看與看得清楚就不必二選一。

• 先定角色再定色值：藍色是動作，黃色是提醒，紅色只給錯誤。
• 內文對比至少 4.5:1，亮色與暗色主題各自都要通過。
• 顏色不是唯一信號，動畫尊重減少動態設定。
• 定期盤點、對應色票、檢查對比、修正，並記錄前後差異。