色彩和對比

你是否曾嘗試閱讀畫面上的文字，但發現色彩配置導致螢幕難以閱讀，或是無法在極光或光線不足的環境中看清畫面？或者，您也許有更嚴重的色彩視覺問題，例如估計有 30 億人有色盲問題，或是有 2 億 5300 萬人有低視力問題？

身為設計師或開發人員，您必須瞭解使用者如何看待色彩和對比，無論是暫時、特定情況或永久。這有助於您妥善滿足他們的視覺需求。

本單元將介紹一些無障礙顏色和對比的基礎知識。

感知色

您知道物體並沒有顏色，而是反射光線的波長嗎？看到顏色時，您的眼睛會接收並處理這些波長，並將其轉換為顏色。

一隻眼睛正在觀看色彩輪。

在數位無障礙方面，我們會以色調、飽和度和亮度 (HSL) 這兩個波長來討論這些波長度。HSL 模型是 RGB 顏色模式的替代方案，更貼近人類對顏色的感知方式。

色調是描述顏色 (例如紅色、綠色或藍色) 的定性方式，每個色調在色彩光譜上都有特定位置，值介於 0 到 360，其中紅色為 0、綠色為 120，藍色為 240。

飽和度是顏色的強度，以介於 0% 到 100% 的百分比值表示。飽和度為 100% 的顏色會非常鮮豔，而飽和度為 0% 的顏色則會呈現灰階或黑白。

亮度是顏色的淺色或深色字元，以 0% (黑色) 到 100% (白色) 之間的百分比值測量。

測量色彩對比

為了協助不同視覺障礙人士提供支援，WAI 群組建立了色彩對比公式，確保文字和背景之間具備足夠的對比度。只要遵循這些顏色對比度比率，中度低視力使用者就能閱讀背景文字，無須使用對比度增強輔助技術。

查看色調鮮豔的圖片，並比較圖片在不同色盲患者眼中呈現的樣貌。

原始彩虹沙。
相片來源：Alexander Grey 在 Unsplash 網站上提供。
原始彩虹圖案。
相片來源：Clark Van Der Beken 在 Unsplash 網站上提供。

左圖顯示彩虹沙，有紫色、紅色、橘色、黃色、藍綠色、淺藍色和深藍色。右側是較亮的彩虹圖案。

綠色盲

患有紅綠色盲症的人看到的彩虹沙。
彩虹圖案，對露齒細菌的人所見。

綠色盲人 (通常稱為綠色盲) 出現在男性的 1% 到 5% 之間，0.35% 到 0.1% 的女性。

患者對綠光的敏感度會降低。這個色盲濾鏡可模擬這種色盲類型可能呈現的樣貌。

紅色盲

患有色盲症的人看到的彩虹沙。
紅綠色盲患者看到的彩虹圖案。

紅色弱視 (通常稱為紅色盲) 發生率為男性 1.01% 至 1.08%，女性 0.02% 至 0.03%。

紅色弱視患者對紅光的敏感度會降低。這個色盲濾鏡模擬了這種色盲症的可能樣貌。

氯或單體主義

彩虹沙，由色盲者拍攝。
彩虹圖案，對著刺青的人所觀察的景象。

全色盲 (或全色盲) 極少發生。

患有單色盲或全色盲的人幾乎無法感知紅、綠或藍光。這個色盲篩選器可模擬這種色盲類型可能呈現的樣貌。

計算色彩對比

色彩對比度公式會使用顏色的相對亮度來判斷對比度，範圍為 1 到 21。這個公式通常會縮寫為 [color value]:1。舉例來說，純黑色與純白色的色彩對比度比率最高，為 21:1。

(L1 + 0.05) / (L2 + 0.05)
L1 is the relative luminance of the lighter color
L2 is the relative luminance of the darker colors

一般大小的文字 (包括文字圖片) 必須具有 4.5:1 的色彩對比度，才能通過 WCAG 對色彩的最小要求。大型文字和必要圖示的色彩對比度必須為 3:1。大型文字的特色是至少 18pt/24px 或 14pt/18.5px 的粗體。標誌和裝飾元素不受這些色彩對比規定的影響。

幸好，您不需要使用進階數學，因為有許多工具可以為您計算色彩對比。Adobe Color、Color Contrast Analyzer、Leonardo 和 Chrome 開發人員工具的色彩挑選器等工具可快速顯示色彩對比度，並提供建議，協助您建立最具包容性的色彩組合和色盤。

使用顏色

如果沒有良好的色彩對比度，文字、圖示和其他圖形元素就會難以辨識，設計很快就會變得難以使用。不過，請務必留意畫面上的顏色使用方式，因為不能只用顏色傳達資訊、動作或區別視覺元素。

舉例來說，如果您說「按下綠色按鈕繼續」，但省略任何額外內容或按鈕的 ID，某些色盲人士就很難知道要按哪個按鈕。同樣地，許多圖表和表格都只使用顏色來傳達資訊。新增其他 ID (例如圖案、文字或圖示) 將有助於使用者瞭解內容。

以灰階模式查看數位產品，是快速偵測潛在色彩問題的好方法。

以顏色為主的媒體查詢

除了檢查色彩對比度和螢幕上的顏色使用情形，您也應考慮套用越來越受歡迎且支援媒體查詢，讓使用者能進一步控制螢幕上顯示的內容。

舉例來說，使用 @prefers-color-scheme 媒體查詢時，你可以建立深色主題，對有身心障礙或感光度的使用者很有幫助。你也可以使用 @prefers-contrast 打造高對比主題，藉此支援色彩模糊和對比度的人物。

偏好的色彩配置

瀏覽器支援

  • Chrome：76。
  • Edge：79，
  • Firefox：67。
  • Safari：12.1.

資料來源

媒體查詢 @prefers-color-scheme 可讓使用者選擇要以淺色或深色主題顯示造訪的網站或應用程式。如要查看主題變更的效果，請變更淺色或深色偏好設定，並前往支援此媒體查詢的瀏覽器。請參閱 Mac 和 Windows 的深色模式操作說明。

macOS 外觀一般設定。
比較淺色和深色模式。
淺色模式下的程式碼範例。
淺色模式。
深色模式的程式碼範例。
深色模式。

偏好對比度

瀏覽器支援

  • Chrome：96。
  • Edge：96。
  • Firefox：101。
  • Safari：14.1。

資料來源

@prefers-contrast 媒體查詢會檢查使用者的 OS 設定，查看高對比模式是否已開啟或關閉。您可以變更對比設定偏好設定，並前往支援此媒體查詢的瀏覽器 (Mac 和 Windows 對比模式設定)，查看此主題變更的實際效果。

比較一般和高反差模式。
在淺色模式中，沒有對比度偏好的程式碼範例。
淺色模式，未設定對比偏好設定。
在深色模式下使用高對比偏好設定的程式碼範例。
深色模式，高對比度偏好設定。

圖層媒體查詢

您可以使用多個以顏色為重點的媒體查詢，為使用者提供更多選擇。在本例中，我們將 @prefers-color-scheme 和 @prefers-contrast 堆疊在一起。

比較色彩和對比。
淺色模式，一般對比度。
淺色模式，未設定對比偏好設定。
深色模式，一般對比。
深色模式，沒有對比偏好設定。
淺色模式，高對比。
淺色模式，高對比偏好設定。
深色模式，高對比。
深色模式，高對比度偏好設定。

進行隨堂測驗

測驗您對色彩和對比的瞭解

單色是文件的 ID 不足。還有什麼可以協助讀者辨識 UI 元素？

模式
答錯了。光是模式並不足以協助使用者識別 UI 元素。
文字
答錯了。單靠文字可能不足以協助使用者識別 UI 元素。
圖示
答錯了。只使用圖示不足以協助使用者識別 UI 元素，
以上皆是
當然可以！兩個以上的 ID 將有助於使用者識別 UI 元素。