你是否曾 色彩配置,或是難以在非常亮或 還是在低光源環境中?或者是你是色彩更永久的人 視力問題,例如估計 3 億名色盲使用者 還是2.53 億名低視能人士?
設計人員或開發人員必須瞭解人們對顏色的看法 以及情境,無論情況是臨時、情況或永久這有助於 最符合他們的視覺需求
本單元將介紹一些容易理解的顏色與對比基礎知識。
感知色彩
您知道嗎?物體不會有顏色,而是反映 光?當你看到顏色時,眼睛會接收並處理這些波長 並轉換為顏色
![看著色輪的眼睛。](https://web.developers.google.cn/static/learn/accessibility/color-contrast/image/an-eye-viewing-color-whe-358cdaa2d25c.png?authuser=1&hl=zh-tw)
在數位無障礙方面,我們會從 包括色調、飽和度及亮度 (HSL)。HSL 模型是以 也更符合人類的 的視覺感知色彩
「色調」是一種描述顏色 (例如紅、綠、藍色) 的定性方式 其中每個色調在色彩頻譜上都有特定位置,值範圍很小 從 0 到 360,有紅色調為 0,綠色代表 120,藍色代表 240。
飽和度是色彩的強度,從 0% 的範圍以百分比測量 100%完整飽和度 (100%) 的色彩呈現非常鮮明的色彩,而色彩 沒有飽和度 (0%) 就是灰階或黑白。
亮度是色彩的淺色或深色字元,以不同範圍的百分比值表示 從 0% (黑色) 到 100% (白色)。
測量色彩對比
為了協助不同視障人士輔助學習,WAI 集團建立了 色彩對比公式 確保有足夠的對比度 文字與背景之間的關聯當這些色彩對比度 接著,視障人士可以在背景朗讀文字 就無需採用對比強化輔助技術
讓我們看看使用鮮豔調色的圖片,比較這兩張圖片 只會看到特定色盲使用者看到的內容。
相片左側的是彩虹沙沙,分別是紫色、紅色、橘色、黃色、水藍色、淺藍色和深藍色。右側是明亮的彩色彩虹圖案。
綠色盲
![彩虹沙灘,對熟食性動物者所見的景象。](https://web.developers.google.cn/static/learn/accessibility/color-contrast/image/rainbow-sand-seen-a-pe-aea6b53778f67.jpg?authuser=1&hl=zh-tw)
![彩虹圖案,對露齒細菌的人所見。](https://web.developers.google.cn/static/learn/accessibility/color-contrast/image/rainbow-pattern-seen-a-77926939250f1.jpg?authuser=1&hl=zh-tw)
綠色盲 (通常稱為綠色盲) 出現在男性 1% 到 5% 之間,0.35% 到 0.1% 女性。
患者對綠光的敏感度會降低。這個色盲濾鏡可模擬這種色盲類型可能呈現的樣貌。
紅色盲
![彩虹沙,鮮為人知的眼神。](https://web.developers.google.cn/static/learn/accessibility/color-contrast/image/rainbow-sand-seen-a-pe-7748879c574cf.jpg?authuser=1&hl=zh-tw)
![彩虹圖案,鮮為人知的人士所見。](https://web.developers.google.cn/static/learn/accessibility/color-contrast/image/rainbow-pattern-seen-a-87774aea1888c.jpg?authuser=1&hl=zh-tw)
Protanopia (通常稱為紅色盲) 的男性比例為 1.01% 到 1.08%,佔 0.02% 的男性 0.03% 的女性。
紅色弱勢族群對紅色光線的靈敏度較低。這個色盲濾鏡可模擬這種色盲類型可能呈現的樣貌。
氯或單體主義
![彩虹的沙子,對水肺訓練有氧健康的人所見。](https://web.developers.google.cn/static/learn/accessibility/color-contrast/image/rainbow-sand-seen-a-pe-211c40daaf52a.jpg?authuser=1&hl=zh-tw)
![彩虹圖案,對著刺青的人所觀察的景象。](https://web.developers.google.cn/static/learn/accessibility/color-contrast/image/rainbow-pattern-seen-a-1ada43bf2cc78.jpg?authuser=1&hl=zh-tw)
色盲或全色盲 (或全色盲) 的出現是非常罕見的。
患者幾乎沒有感受紅色 綠燈或藍光這個色盲濾鏡可以模擬這種色盲類型 看起來就會像色盲
計算色彩對比
色彩對比公式會使用
相對亮度
色彩 (範圍 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 版操作說明。
![Mac 設定 UI](https://web.developers.google.cn/static/learn/accessibility/color-contrast/image/mac-settings-ui-e918a99520999.png?authuser=1&hl=zh-tw)
![淺色模式的程式碼範例。](https://web.developers.google.cn/static/learn/accessibility/color-contrast/image/code-example-light-mode-36c15d908ac91.png?authuser=1&hl=zh-tw)
![深色模式的程式碼範例。](https://web.developers.google.cn/static/learn/accessibility/color-contrast/image/code-example-dark-mode-4860136b85b36.png?authuser=1&hl=zh-tw)
偏好對比度
@prefers-contrast
媒體查詢會檢查使用者的 OS 設定,確認是否已啟用高對比模式
或是關閉如想瞭解這個主題的變化,請變更對比度
偏好設定,並瀏覽至支援這項媒體查詢的瀏覽器
(Mac 和 Windows 對比模式設定)。
![淺色模式,未套用對比度的程式碼範例。](https://web.developers.google.cn/static/learn/accessibility/color-contrast/image/code-example-light-mode-cf53e5d577358.png?authuser=1&hl=zh-tw)
![採用高對比偏好設定的深色模式程式碼範例。](https://web.developers.google.cn/static/learn/accessibility/color-contrast/image/code-example-dark-mode-ef6f55f3ac8c9.png?authuser=1&hl=zh-tw)
分層媒體查詢
使用多種以顏色為主的媒體查詢,為使用者提供
在本範例中,我們堆疊了 @prefers-color-scheme
一起@prefers-contrast
。
![淺色模式,一般對比。](https://web.developers.google.cn/static/learn/accessibility/color-contrast/image/light-mode-regular-contr-7fe03bdb6aba3.png?authuser=1&hl=zh-tw)
![深色模式,一般對比。](https://web.developers.google.cn/static/learn/accessibility/color-contrast/image/dark-mode-regular-contra-803d4faa3b4.png?authuser=1&hl=zh-tw)
![淺色模式,高對比。](https://web.developers.google.cn/static/learn/accessibility/color-contrast/image/light-mode-high-contrast-ad3670a5d6f63.png?authuser=1&hl=zh-tw)
![深色模式,高對比。](https://web.developers.google.cn/static/learn/accessibility/color-contrast/image/dark-mode-high-contrast-5e00d4e617fa8.png?authuser=1&hl=zh-tw)
隨堂測驗
測試你對色彩與對比的瞭解程度
單色是文件的 ID 不足。還有什麼能協助讀者識別 UI 元素?