色彩和對比

你是否曾嘗試閱讀畫面上的文字,但發現色彩配置導致螢幕難以閱讀,或是無法在極光或光線不足的環境中看清畫面?或者,您也許有更嚴重的色彩視覺問題,例如估計有 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 ColorColor Contrast AnalyzerLeonardoChrome 開發人員工具的色彩挑選器等工具可快速顯示色彩對比度,並提供建議,協助您建立最具包容性的色彩組合和色盤。

使用顏色

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

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

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

以顏色為主的媒體查詢

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

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

偏好的色彩配置

瀏覽器支援

  • Chrome:76。
  • Edge:79,
  • Firefox:67。
  • Safari:12.1.

資料來源

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

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

偏好對比度

瀏覽器支援

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

資料來源

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

在淺色模式中,沒有對比度偏好的程式碼範例。
淺色模式,未設定對比偏好設定。
在深色模式下使用高對比偏好設定的程式碼範例。
深色模式,高對比度偏好設定。

圖層媒體查詢

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

淺色模式,一般對比度。
淺色模式,未設定對比偏好設定。
深色模式,一般對比。
深色模式,沒有對比偏好設定。
淺色模式,高對比。
淺色模式,高對比偏好設定。
深色模式,高對比。
深色模式,高對比度偏好設定。

進行隨堂測驗

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

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

模式
以上皆是
圖示
文字