感謝觀看 Google I/O 大會！立即觀賞隨選內容。

本頁面由 Cloud Translation API 翻譯而成。

色彩和對比

你是否曾色彩配置，或是難以在非常亮或還是在低光源環境中？或者是你是色彩更永久的人視力問題，例如估計 3 億名色盲使用者還是2.53 億名低視能人士？

設計人員或開發人員必須瞭解人們對顏色的看法以及情境，無論情況是臨時、情況或永久這有助於最符合他們的視覺需求

本單元將介紹一些容易理解的顏色與對比基礎知識。

感知色彩

您知道嗎？物體不會有顏色，而是反映光？當你看到顏色時，眼睛會接收並處理這些波長並轉換為顏色

在數位無障礙方面，我們會從包括色調、飽和度及亮度 (HSL)。HSL 模型是以也更符合人類的的視覺感知色彩

「色調」是一種描述顏色 (例如紅、綠、藍色) 的定性方式其中每個色調在色彩頻譜上都有特定位置，值範圍很小從 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% 女性。

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

紅色盲

Protanopia (通常稱為紅色盲) 的男性比例為 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.5 像素的粗體。標誌和裝飾元素不受這些顏色限制對比度需求

幸好，您不需要使用進階數學，因為很多工具我們會為您計算色彩對比。這些工具例如 Adobe Color 色彩對比分析工具， Leonardo 和 Chrome 開發人員工具顏色挑選器可以快速提供色彩對比度並提供建議建立最具包容性的色彩組合和調色盤。

使用顏色

文字、圖示和其他圖像沒有良好的色彩對比度元素很難找到而且設計可能很快就會變得難以存取但另一項重點是注意色彩使用方式但不能單獨使用顏色傳達資訊、動作或區分視覺元素

例如，如果您說「按一下綠色按鈕繼續」，但如果按鈕缺少任何其他內容或 ID，系統會傳回某些色盲使用者難以辨認最容易點擊的內容同樣地，許多圖形、圖表和表格都只用色彩傳達訊息可能不準確或不適當新增其他 ID (例如圖案、文字或圖示) 必須幫助使用者瞭解內容

查看灰階數位產品有助於快速偵測潛在的顏色問題。

以顏色為主的媒體查詢

除了檢查色彩對比度以及螢幕上的色彩使用情形建議您多加利用為使用者提供的媒體查詢進一步掌控畫面上顯示的內容

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

偏好色彩配置

瀏覽器支援

資料來源

媒體查詢 @prefers-color-scheme 可讓使用者選擇一種光源或客戶造訪的網站或應用程式深色主題版本。可以看到這個注意力層變更主題：變更淺色/深色偏好設定正在前往支援這項媒體查詢的瀏覽器。詳閱 Mac 和適用於深色模式的 Windows 版操作說明。

比較淺色和深色模式。

，瞭解如何調查及移除這項存取權。

偏好對比度

瀏覽器支援

資料來源

@prefers-contrast 媒體查詢會檢查使用者的 OS 設定，確認是否已啟用高對比模式或是關閉如想瞭解這個主題的變化，請變更對比度偏好設定，並瀏覽至支援這項媒體查詢的瀏覽器 (Mac 和 Windows 對比模式設定)。

比較一般對比與高對比。

，瞭解如何調查及移除這項存取權。

分層媒體查詢

使用多種以顏色為主的媒體查詢，為使用者提供在本範例中，我們堆疊了 @prefers-color-scheme 一起@prefers-contrast。

比較色彩與對比。

，瞭解如何調查及移除這項存取權。

，瞭解如何調查及移除這項存取權。

隨堂測驗

測試你對色彩與對比的瞭解程度

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

模式

答錯了。光是模式並不足以協助使用者識別 UI 元素。

文字

答錯了。單靠文字可能不足以協助使用者識別 UI 元素，

圖示

答錯了。只使用圖示不足以協助使用者識別 UI 元素，

以上皆是

當然可以！兩個以上的 ID 將有助於使用者識別 UI 元素。