色彩對比

你選擇的應用程式介面顏色,會影響使用者是否能輕鬆閱讀及理解介面。充分的色彩對比可使文字和圖片易於查看及理解。

除了協助視障的使用者,在光照過強 (例如直接暴露在陽光下) 或光照不足 (採用低亮度設定的螢幕) 的情況下,所有使用者都能藉由充分的色彩對比看清楚裝置介面。

導入作業

導入應用程式的使用者介面時,請指定適當的背景和前景顏色,以產生足夠的色彩對比。

「對比度」是指螢幕上顯示的兩個相鄰色彩之間,亮度或發光強度的計算差異值。這個比例介於 1 到 21 之間 (通常會以 1:1 到 21:1 表示);數字越大表示對比越高。許多工具都可用來計算兩個相鄰顏色的對比度,例如色彩對比度計算工具

使用 TextView 顯示文字時,請利用 android:textColorandroid:background 定義高對比度的前景和背景色彩。在 Compose 中使用 Text 時,請利用色彩參數和 Modifier.background 定義高對比度的前景和背景色彩。

W3C 的建議如下:

  • 為小型文字 (小於 18 點的一般文字,或是小於 14 點的粗體文字) 設定至少 4.5:1 的對比度
  • 為大型文字 (大於 18 點的一般文字,或是大於 14 點的粗體文字) 設定至少 3.0:1 的對比度

色彩對比相關注意事項:

  • 使用 ImageView 或 Image 顯示圖像內容或圖示時,請務必將前景和背景色彩設定為符合或超過建議的對比度。

  • 對比度是根據元素重疊在其他元素上時,其前景和背景的顯示色彩測量得出。請注意,如果採用 ARGB 格式 (#AARRGGBB 的十六進位值) 定義色彩,則非不透明顏色 (Alpha 通道值小於 255) 可能會隨著顯示在其底下的內容,呈現不同的色彩。
  • 字型平滑和消除鋸齒技術會影響部分內容的顯示色彩,特別是筆劃寬度較小的內容。為了提升可讀性,請選擇對比度較高的色彩組合,或是增加這些內容的筆劃寬度。

設計

設計使用者介面時,建議為相鄰顏色選用可提供足夠對比的色調。

  • 如為文字和圖示,請參閱 W3C 指南瞭解最低的對比度
  • 建議將高對比主題加入選項,或是允許使用者選擇主要內容的色彩

詳情請參閱 Material Design 無障礙功能色彩和對比指南

測試

如何在應用程式中手動檢查色彩對比:

  1. 開啟應用程式。
  2. 擷取螢幕截圖。
  3. 使用圖像檢視或編輯軟體的「滴管工具」,從螢幕截圖中擷取顯示色彩的樣本。
  4. 使用對比度計算工具測量相鄰顏色的對比度。
  5. 如果對比度低於 W3C 指南所定義的值,建議提高介面的色彩對比。

Android 的自動測試工具能偵測出許多色彩對比問題。你可以使用 Android 專用無障礙功能檢查工具,在裝置端手動測試應用程式。如要進行自動測試,請啟用 EspressoRobolectric 中的無障礙程度檢查功能。

這個頁面可能含有使用 AI 技術翻譯的內容,也許會有錯誤。
搜尋
清除搜尋內容
關閉搜尋
Google 應用程式
主選單
4839613829899339617
true
搜尋說明中心
false
true
true
true
true
true
717068
false
false
false
false
false