上一篇我們聊到「排版與佈局」是使用者理解介面的地圖。
那今天要來聊的 色彩對比與可見性，則是這張地圖上的「路標」。

好的設計不只是美觀，還要能被「看見」，而「看見」這件事，其實沒有我們想像的那麼理所當然。

色彩不只是風格，更是資訊傳達

在設計裡，顏色通常代表氛圍與品牌形象。
但在無障礙設計中，顏色有另一層含義：
👉 它是一種訊息線索，讓使用者理解畫面結構與狀態的語言。
舉例來說：

• 紅色代表錯誤，綠色代表成功。
• 深灰代表主體，淺灰代表輔助資訊。
• 強烈對比的按鈕表示「可操作」。

但問題在於，不是每個人都能準確感知顏色的差異。

不是只有全盲者會看不見顏色

我們在談「視障者」時，常以為是看不見畫面的人。但其實，色弱、色盲、老化視覺也是很容易被忽略的群體。
例如：

• 紅綠色盲的人幾乎無法區分紅色與綠色。
• 老年人因黃斑部退化，導致對比的敏感度不佳、模糊看不清楚。
• 高亮背景 + 淺灰字，對任何人都不友善，尤其是在陽光下或低解析螢幕上。

所以當我們用顏色傳達狀態時（ 例如錯誤欄位只用紅框顯示 ），
若沒有額外的文字或圖示輔助，就等於無法把狀態資訊傳達出去，讓一部分人無法理解。

圖片來源：Material Design

色彩對比

色彩對比（Contrast）指的是前景與背景之間的亮度差。
在 WCAG 2.1 的規範中，有明確定義：

• 一般文字的對比需達 4.5 : 1 以上。
• 大文字（ 18pt 以上或粗體 14pt 以上 ）可放寬至 3 : 1。
• 非文字內容（ 例如圖示、邊框、分隔線 ）至少為 3 : 1。
  
  色彩對比若未達4.5 : 1 ，可能會導致資訊不清晰。

如何檢測對比？

現在有很多線上工具可以快速幫你算出對比值，輸入文字顏色與背景色，會直接告訴你對比是否達標（ AA、AAA 等級 ）。
例如：

• WebAIM Contrast Checker
  

• Contrast Ratio by Lea Verou
  

• Figma ：軟體本身的色彩選擇器就可以直接看對比值
  

不靠顏色也能懂的設計

當顏色無法被區分時，仍應有其他方式傳達資訊。
常見的作法：

• 錯誤提示除了紅框外，加上文字說明：例如「請輸入正確的手機號碼」。
• 強調狀態不只靠顏色，還能加上圖示：例如「✅」代表成功，「❗」代表錯誤。
• 互動狀態用變化清楚的樣式呈現：像是 hover 加上陰影、邊框或亮度改變，而非只改顏色深淺。

這樣使用者如果分不出顏色，也能理解「現在的狀態 / 狀況是什麼」。

別忘了測試：用「不同的眼睛」看你的設計

在確認設計「可見」之前，不妨用工具來看看：
那些我們理所當然覺得「清楚漂亮」的畫面，在不同視覺條件下，其實會變成什麼樣子。

最推薦的方式之一，就是使用 Figma Plugin「Color Blind」。
這個外掛能 模擬各種類型的色覺缺陷（ 例如紅色盲、綠色盲、藍黃色弱、全色盲等 ），

只要套用一次，就能立即看到你的設計在不同使用者眼中會變成什麼樣。

舉例來說：

• 原本紅綠分明的成功/錯誤提示，在色盲模式下幾乎看不出差別。
• 淡灰底的輸入欄位，在低視覺對比模式下完全融入背景。

📌 總結

讓每個人都能看見，才算「看得見」。

當我們說「讓更多人能看見」時，指的不只是視覺上的明暗，
而是讓每個人都能理解你想傳達的重點。

不論是字型大小、色彩對比、或互動反饋，都像是在建一條通往理解的路，
而好的設計，就是讓那條路對每個人都一樣清晰。