色彩對比

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

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

導入作業

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

「對比度」是指螢幕上顯示的兩個相鄰色彩之間,亮度或發光強度的計算差異值。這個比例介於 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 中的無障礙程度檢查功能。

搜尋
清除搜尋內容
關閉搜尋
主選單
8289942155837146996
true
搜尋說明中心
true
true
true
true
true
717068
false
false