色彩和對比

你是否曾因色彩配置而難以閱讀螢幕上的文字，或在光線充足/昏暗的環境中難以看清螢幕內容？或者，您可能屬於色覺辨識障礙者，例如全球估計有 3 億人患有色盲，或2.53 億人有低視能問題。

身為設計師或開發人員，您需要瞭解使用者如何感知色彩和對比度，無論是暫時、情境或永久。這有助於你提供最符合他們視覺需求的支援。

本單元將介紹一些無障礙色彩和對比度的基本概念。

感知顏色

您知道嗎？物體本身沒有顏色，而是會反射光線的波長。當你看到顏色時，眼睛會接收並處理這些波長，然後轉換成顏色。

就數位無障礙而言，我們是以色調、飽和度和明度 (HSL) 來談論這些波長。HSL 模式是 RGB 顏色模式的替代方案，更符合人類對顏色的感知方式。

色調是描述顏色的質性方式，例如紅色、綠色或藍色，每種色調在色譜上都有特定位置，值介於 0 到 360 之間，紅色為 0、綠色為 120，藍色為 240。

飽和度是指色彩的強度，以百分比表示，範圍從 0% 到 100%。飽和度為 100% 的色彩會非常鮮明，飽和度為 0% 的色彩則會是灰階或黑白。

亮度是指色彩的明暗程度，以百分比表示，範圍從 0% (黑色) 到 100% (白色)。

測量色彩對比

為協助支援各種視障人士，WAI 團隊制定了色彩對比公式，確保文字與背景之間有足夠的對比度。遵循這些顏色對比度建議，可讓中度低視能人士在背景上閱讀文字，不必使用對比度增強輔助技術。

查看使用鮮豔色調的圖片，並比較該圖片在特定色盲患者眼中的樣貌。

左側圖片顯示彩虹沙，顏色依序為紫色、紅色、橘色、黃色、水綠色、淺藍色和深藍色。右側是色彩鮮豔的彩虹圖案。

綠色盲

綠色盲 (又稱第二色盲) 在男性中發生率為 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，有特定色盲的人就難以判斷要按哪個按鈕。同樣地，許多圖表和表格只用顏色傳達資訊。加入其他識別資訊 (例如圖案、文字或圖示) 至關重要，有助於使用者瞭解內容。

以灰階檢視數位產品，有助於快速偵測潛在的色彩問題。

以顏色為主的媒體查詢

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

舉例來說，您可以使用 @prefers-color-scheme 媒體查詢建立深色主題，這對畏光或對光線敏感的使用者很有幫助。您也可以使用 @prefers-contrast 建立高對比主題，支援有色盲和對比敏感度的使用者。

偏好的色彩配置

媒體查詢 @prefers-color-scheme 可讓使用者選擇瀏覽網站或應用程式的淺色或深色主題版本。如要查看實際效果，請變更淺色或深色偏好設定，然後前往支援這項媒體查詢的瀏覽器。請參閱 Mac 和 Windows 的深色模式操作說明。

比較淺色模式和深色模式。

「淺色模式」。

偏好對比度

@prefers-contrast 媒體查詢會檢查使用者的 OS 設定，判斷高對比是否已開啟。如要查看實際運作的這項主題變更，請變更對比偏好設定，然後前往支援這項媒體查詢的瀏覽器 (Mac 和 Windows 對比模式設定)。

比較一般和高反差。

圖層媒體查詢

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

比較色彩和對比度。