你選擇的應用程式介面顏色,會影響使用者是否能輕鬆閱讀及理解介面。充分的色彩對比可使文字和圖片易於查看及理解。
除了協助視障的使用者,在光照過強 (例如直接暴露在陽光下) 或光照不足 (採用低亮度設定的螢幕) 的情況下,所有使用者都能藉由充分的色彩對比看清楚裝置介面。
導入作業
導入應用程式的使用者介面時,請指定適當的背景和前景顏色,以產生足夠的色彩對比。
「對比度」是指螢幕上顯示的兩個相鄰色彩之間,亮度或發光強度的計算差異值。這個比例介於 1 到 21 之間 (通常會以 1:1 到 21:1 表示);數字越大表示對比越高。許多工具都可用來計算兩個相鄰顏色的對比度,例如色彩對比度計算工具。
使用 TextView
顯示文字時,請利用 android:textColor
和 android:background
定義高對比度的前景和背景色彩。在 Compose 中使用 Text 時,請利用色彩參數和 Modifier.background 定義高對比度的前景和背景色彩。
W3C 的建議如下:
- 為小型文字 (小於 18 點的一般文字,或是小於 14 點的粗體文字) 設定至少 4.5:1 的對比度
- 為大型文字 (大於 18 點的一般文字,或是大於 14 點的粗體文字) 設定至少 3.0:1 的對比度
色彩對比相關注意事項:
- 對比度是根據元素重疊在其他元素上時,其前景和背景的顯示色彩測量得出。請注意,如果採用 ARGB 格式 (#AARRGGBB 的十六進位值) 定義色彩,則非不透明顏色 (Alpha 通道值小於 255) 可能會隨著顯示在其底下的內容,呈現不同的色彩。
- 字型平滑和消除鋸齒技術會影響部分內容的顯示色彩,特別是筆劃寬度較小的內容。為了提升可讀性,請選擇對比度較高的色彩組合,或是增加這些內容的筆劃寬度。
設計
設計使用者介面時,建議為相鄰顏色選用可提供足夠對比的色調。
- 如為文字和圖示,請參閱 W3C 指南瞭解最低的對比度
- 建議將高對比主題加入選項,或是允許使用者選擇主要內容的色彩
詳情請參閱 Material Design 無障礙功能色彩和對比指南。
測試
如何在應用程式中手動檢查色彩對比:
- 開啟應用程式。
- 擷取螢幕截圖。
- 使用圖像檢視或編輯軟體的「滴管工具」,從螢幕截圖中擷取顯示色彩的樣本。
- 使用對比度計算工具測量相鄰顏色的對比度。
- 如果對比度低於 W3C 指南所定義的值,建議提高介面的色彩對比。
Android 的自動測試工具能偵測出許多色彩對比問題。你可以使用 Android 專用無障礙功能檢查工具,在裝置端手動測試應用程式。如要進行自動測試,請啟用 Espresso 和 Robolectric 中的無障礙程度檢查功能。