色彩和對比

您是否曾嘗試閱讀畫面上的文字，但因為色彩配置而難以閱讀，或者在非常亮或低光源的環境中看到螢幕卻難以閱讀？又或者您是否有無法永久的色彩視覺問題，例如估計 3 億名色盲人士或 2.53 億名低視能人士？

設計人員或開發人員 (無論是暫時性、情境，還是永久) 都必須瞭解使用者如何感知色彩與對比。這將有助於滿足他們的視覺需求。

本單元將說明常見的色彩和對比基礎。

感知的顏色

您知道物體沒有顏色，而是反映光線的波長嗎？看到顏色後，您的眼睛就會接收並處理這些波長，並且轉換成顏色。

在數位無障礙領域中，我們會分別根據色調、飽和度和亮度 (HSL) 討論這些波長。HSL 模型是做為 RGB 色彩模型的替代方案，且更符合人類感知色彩的方式。

「Hue」是描述顏色 (例如紅色、綠色或藍色) 的質性方式，其中每個色調在色譜中都有特定位置，值介於 0 至 360 之間，值介於 0 至 360 之間，綠色為 0，120 為綠色，藍色 為 240。

飽和度是指顏色濃度，以 0% 到 100% 之間的百分比測量。飽和度 (100%) 的顏色會非常鮮明，無飽和度 (0%) 的顏色則是灰階或黑白。

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

測量色彩對比

為支援各種視障人士，WAI 群組建立了色彩對比公式，確保文字與背景之間有足夠的對比度。只要追蹤這些色彩對比度，視力不佳的視障者就能在背景閱讀文字，不需要強化對比度的輔助技術。

讓我們來看看使用鮮明的調色盤的圖片，並比較該圖片對特定色盲模式呈現的樣貌。

左邊的圖片顯示彩虹沙，有紫、紅、橘、黃、湖水綠、淺藍色和深藍色。右邊是色彩更亮的彩色彩虹圖案。

綠色盲

綠色盲 (通常稱為綠盲) 發生在男性 1% 到 5% 的男性，女性佔 0.35% 到 0.1%。

低血糖患者對綠燈的敏感度較低。這個色盲篩選器會模擬這類色盲的呈現效果。

紅色盲

紅色盲 (通常稱為紅盲) 發生在男性佔 1.01% 到 1.08%，女性的 0.02%。

紅色盲患者的敏感度較低。這個色盲篩選器會模擬這類色盲的呈現效果。

全色盲或單色主義

全色盲或全色盲 (或全色盲) 的發生次數很少見。

色盲人士或單色系的患者幾乎沒有察覺紅、綠或藍光。這個色盲篩選器會模擬這類色盲的呈現方式。

計算色彩對比

色彩對比公式會使用色彩的相對亮度來決定對比，該數值範圍可介於 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 建立高對比主題，並支援色彩不足和對比度的人。

偏好色彩配置

媒體查詢 @prefers-color-scheme 可讓使用者選擇造訪的網站或應用程式較淺色或深色主題版本。如要查看主題變化情形，請變更淺色/深色偏好設定，並前往支援這項媒體查詢的瀏覽器。請參閱 Mac 和 Windows 有關深色模式的操作說明。

偏好對比度

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

分層媒體查詢

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

隨堂測驗

測驗您對色彩和對比度的相關知識