跳至主要內容
版本：v8

高對比模式

Ionic 為視力不佳的使用者提供了對比度更高的調色盤。這些調色盤透過放大前景內容（如文字）與背景內容（如 UI 元件）之間的對比度來運作。Ionic 提供了淺色和深色兩種變體，以實現高對比度。

概觀​

Ionic 中的預設調色盤提供了符合網路內容無障礙指南 (WCAG) 定義的 AA 級顏色對比度的 Ionic 顏色，並搭配適當的對比色使用。高對比度調色盤中的 Ionic 顏色已更新，以符合 AAA 級顏色對比度，並搭配適當的對比色使用。值得注意的是，UI 元件的對比度已進行改善，包括邊框、文字和背景顏色。但是，請務必注意，在高對比度調色盤中，優先考慮的是文字的可讀性。這表示，如果調整 UI 元件相對於頁面背景的對比度會顯著損害元件的文字與其背景之間的對比度，則 UI 元件背景的對比度將保持不變。

啟用高對比主題​

有三種方法可以在應用程式中啟用高對比度調色盤：永遠、根據系統設定或使用 CSS 類別。

永遠​

可以透過在適當的檔案中匯入以下樣式表來啟用高對比度調色盤。無論對比度偏好的系統設定為何，此方法都會啟用高對比度調色盤。

@import '@ionic/angular/css/palettes/high-contrast.always.css'; // Light palette
// @import '@ionic/angular/css/palettes/high-contrast-dark.always.css'; // Dark palette

可以匯入 high-contrast-dark.always.css 而不是 high-contrast.always.css 來套用高對比度深色調色盤。

以下範例會永遠顯示高對比度淺色調色盤，無論使用者偏好高對比度或深色模式。

系統​

啟用高對比模式的系統方法涉及檢查系統設定以了解使用者偏好的對比度。這是啟動新的 Ionic Framework 應用程式時的預設值。在適當的檔案中匯入以下樣式表將會自動從系統設定中擷取使用者的偏好，並在偏好高對比度時套用高對比度調色盤。

以下範例顯示如何同時包含高對比度淺色調色盤和高對比度深色調色盤。系統的深色模式偏好設定將會被檢查，以顯示高對比度調色盤的淺色或深色變體。

@import '@ionic/angular/css/palettes/high-contrast.system.css';
@import '@ionic/angular/css/palettes/high-contrast-dark.system.css';

當 prefers-contrast 的 CSS 媒體查詢為 more 時，此方法會啟動高對比度調色盤。 所有現代瀏覽器均支援 prefers-contrast 媒體查詢。如果需要支援較舊的瀏覽器，建議使用 CSS 類別方法。

以下範例使用系統設定來決定何時顯示高對比度模式。

資訊

不確定如何變更系統設定？以下說明如何在 Windows 11 和 macOS 上啟用高對比模式。

注意

高對比度淺色調色盤必須在 core.css 之後匯入，而高對比度深色調色盤必須在 dark.system.css 之後匯入。否則，標準對比度調色盤會優先套用。

CSS 類別​

雖然先前的方法非常適合僅透過檔案匯入來啟用高對比度調色盤，但在某些情況下，您可能需要更多控制權來決定套用位置。如果您需要有條件地套用高對比度調色盤（例如透過切換），或者如果您想根據系統設定擴展功能，我們會提供高對比度調色盤類別檔案。當特定類別新增至應用程式時，此檔案會套用高對比度調色盤。將以下樣式表匯入適當的檔案，將會提供搭配類別使用高對比度調色盤的必要樣式

@import '@ionic/angular/css/palettes/high-contrast.class.css';
@import '@ionic/angular/css/palettes/high-contrast-dark.class.css';

當 html 元素設定 .ion-palette-high-contrast 類別時，此方法會啟用高對比度調色盤。此類別必須由開發人員套用。這可以與 .ion-palette-dark 類別結合使用，以有條件地套用高對比度深色調色盤。

以下範例結合了網站設定、系統設定和切換來決定何時顯示高對比度模式。網站的調色盤優先於系統設定。如果您的系統設定在示範載入時與網站的調色盤不同，則會使用網站的調色盤。

資訊

不確定如何變更系統設定？以下說明如何在 Windows 11 和 macOS 上啟用高對比模式。

注意

高對比度淺色調色盤必須在 core.css 之後匯入，而高對比度深色調色盤必須在 dark.class.css 之後匯入。否則，標準對比度調色盤會優先套用。

注意

必須將 .ion-palette-high-contrast 類別新增至 html 元素，才能與匯入的高對比度調色盤搭配使用。

自訂 Ionic 高對比主題​

Ionic 具有建議的高對比度調色盤，可以透過三種不同的方式啟用：永遠、根據系統設定或使用CSS 類別。這些方法都涉及匯入具有對應名稱的高對比度調色盤檔案。

主題變數會透過匯入相關的高對比度調色盤檔案來設定，不需要複製到應用程式中。如需有關變更的變數的詳細資訊，包括其他用於進一步自訂的變數，請參閱主題一節。

以下提供有關如何根據應用程式中套用的方式自訂高對比度調色盤的詳細資訊。

always 高對比調色盤可透過導入 high-contrast.always.css (淺色變體) 和 high-contrast-dark.always.css (深色變體) 來存取。

always 高對比調色盤的行為方式如下：

  1. 在 :root 選取器中，將所有Ionic 顏色設定為與高對比調色盤相輔的模式。:root 選取器與 html 選取器相同，只是它的特殊性較高。
  2. 使用 :root.ios 選取器，在 ios 裝置上設定高對比調色盤的變數。
  3. 使用 :root.md 選取器，在 md 裝置上設定高對比調色盤的變數。

目錄

編輯此頁面