色彩和對比

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

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

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

感知色

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

在數位無障礙方面，我們會以色調、飽和度和亮度 (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，某些色盲人士就很難知道要按哪個按鈕。同樣地，許多圖表和表格都只使用顏色來傳達資訊。新增其他 ID (例如圖案、文字或圖示) 將有助於使用者瞭解內容。

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

以顏色為主的媒體查詢

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

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

偏好的色彩配置

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

比較淺色和深色模式。

偏好對比度

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

比較一般和高反差模式。

圖層媒體查詢

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

比較色彩和對比。

進行隨堂測驗

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