UI 設計和樣式

為了建立易於訪問的應用程式，請在設計 UI 時考慮無障礙性。本頁面涵蓋了易於訪問的 UI 設計和樣式的關鍵方面。

Android 和 iOS 系統都包含用於配置應用程式所需字型大小的系統設定。Flutter 文字元件在確定字型大小時會遵循此作業系統設定。

字型大小由 Flutter 根據作業系統設定自動計算。然而，作為開發者，你應該確保當字型大小增加時，你的佈局有足夠的空間來渲染所有內容。例如，你可以在配置為最大字型設定的小螢幕裝置上測試應用程式的所有部分。

要調整字型大小：在 iOS 上，轉到“設定”>“輔助功能”>“顯示與文字大小”；在 Android 上，轉到“設定”>“字型大小”。

以下兩張截圖顯示了使用預設 iOS 字型設定和在 iOS 輔助功能設定中選擇最大字型設定時呈現的標準 Flutter 應用程式模板。

充足的色彩對比度使文字和影像更易於閱讀。除了使各種視力受損的使用者受益外，充足的色彩對比度還能在極端照明條件下（例如暴露在直射陽光下或在低亮度顯示器上）幫助所有使用者檢視介面。

W3C 建議：

• 小號文字（低於 18 點常規或 14 點粗體）的對比度至少為 4.5:1
• 大號文字（18 點及以上常規或 14 點及以上粗體）的對比度至少為 3.0:1

你可以使用 Flutter 的 Accessibility Guideline API 來測試對比度。有關測試的更多詳細資訊，請檢視無障礙測試頁面。

太小的控制元件對許多人來說難以互動和選擇。請確保互動元素具有足夠大的點選目標，以便使用者可以輕鬆點選。

Android 和 iOS 均建議最小點選目標大小分別為 48x48 dp 和 44x44 pts。

W3C 建議最小目標大小為 44x44 CSS 畫素。

你可以使用 Flutter 的 Accessibility Guideline API 來測試點選目標大小。有關測試的更多詳細資訊，請檢視無障礙測試頁面。

你可以檢視 AccessibilityFeatures 類，瞭解平臺可能啟用的其他無障礙功能，例如粗體文字、高對比度和反色顯示。