Skip to main content
Version: v8

High Contrast Mode

Ionic は、視力の低いユーザー向けにコントラストを向上させたパレットを提供します。これらのパレットは、テキストなどの前景コンテンツと UI コンポーネントなどの背景コンテンツ間のコントラストを増幅することで機能します。Ionic は、ハイコントラストを実現するためにライトとダークの両方のバリアントを提供します。

概要​

Ionic のデフォルトパレットは、適切なコントラストカラーと組み合わせて使用すると、Web Content Accessibility Guidelines（WCAG）で定義されているLevel AA 色コントラストを満たすIonic colorsを提供します。ハイコントラストパレットのIonic colorsは、適切なコントラストカラーと組み合わせて使用すると、Level AAA 色コントラストを満たすように更新されています。特に、ボーダー、テキスト、背景色を含む UI コンポーネントのコントラストが改善されています。ただし、ハイコントラストパレット内では、テキストの可読性が優先されることに注意することが重要です。これは、ページの背景に対する UI コンポーネントのコントラストを調整すると、コンポーネントのテキストとその背景間のコントラストが大幅に損なわれる場合、UI コンポーネントの背景のコントラストは変更されないままになることを意味します。

ハイコントラストテーマを有効にする​

アプリでハイコントラストパレットを有効にする方法は 3 つあります：always、system設定に基づく方法、または CSSclassを使用する方法です。

Always​

ハイコントラストパレットは、適切なファイルに以下のスタイルシートをインポートすることで有効にできます。このアプローチは、コントラスト設定のシステム設定に関係なく、ハイコントラストパレットを有効にします。

@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.always.cssの代わりにhigh-contrast-dark.always.cssをインポートすることで適用できます。

以下の例は、ユーザーのハイコントラストまたはダークモードの設定に関係なく、常にハイコントラストライトパレットを表示します。

System​

ハイコントラストモードを有効にするシステムアプローチでは、ユーザーの好みのコントラストをシステム設定で確認します。これは、新しい Ionic Framework アプリを起動するときのデフォルトです。適切なファイルに以下のスタイルシートをインポートすると、システム設定からユーザーの好みを自動的に取得し、ハイコントラストが優先される場合にハイコントラストパレットを適用します。

以下の例は、ハイコントラストライトパレットとハイコントラストダークパレットの両方を含める方法を示しています。システムのダークモード設定が確認され、ハイコントラストパレットのライトまたはダークバリアントが表示されます。

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

このアプローチは、CSS media query for prefers-contrastがmoreの場合にハイコントラストパレットをアクティブにします。prefers-contrastメディアクエリはすべてのモダンブラウザでサポートされています。古いブラウザのサポートが必要な場合は、CSS classアプローチを使用することをお勧めします。

以下の例は、ハイコントラストモードを表示するタイミングを決定するためにシステム設定を使用しています。

info

システム設定の変更方法がわからないですか？Windows 11とmacOSでハイコントラストモードを有効にする方法はこちらです。

caution

ハイコントラストライトパレットはcore.cssの後にインポートする必要があり、 ハイコントラストダークパレットはdark.system.cssの後にインポートする必要があります。そうしないと、標準のコントラストパレットが優先されます。

CSS Class​

以前のアプローチは、ファイルのインポートだけでハイコントラストパレットを有効にするのに優れていますが、適用場所をより制御する必要があるシナリオもあります。トグルなどを通じてハイコントラストパレットを条件付きで適用する必要がある場合、またはシステム設定に基づいて機能を拡張したい場合、ハイコントラストパレットクラスファイルを提供します。このファイルは、特定のクラスがアプリに追加されたときにハイコントラストパレットを適用します。適切なファイルに以下のスタイルシートをインポートすると、クラスでハイコントラストパレットを使用するために必要なスタイルが提供されます：

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

このアプローチは、.ion-palette-high-contrastクラスがhtml要素に設定されている場合にハイコントラストパレットをアクティブにします。このクラスは開発者が適用する必要があります。これは.ion-palette-darkクラスと組み合わせて、条件付きでハイコントラストダークパレットを適用できます。

以下の例は、サイト設定、システム設定、トグルを組み合わせて、ハイコントラストモードを表示するタイミングを決定しています。サイトのパレットはシステム設定よりも優先されます。デモのロード時にシステム設定がサイトのパレットと異なる場合、サイトのパレットが使用されます。

info

システム設定の変更方法がわからないですか？Windows 11とmacOSでハイコントラストモードを有効にする方法はこちらです。

caution

ハイコントラストライトパレットはcore.cssの後にインポートする必要があり、 ハイコントラストダークパレットはdark.class.cssの後にインポートする必要があります。 そうしないと、標準のコントラストパレットが優先されます。

caution

インポートされたハイコントラストパレットを機能させるには、.ion-palette-high-contrastクラスをhtml要素に追加する必要があります。

Ionic ハイコントラストテーマのカスタマイズ​

Ionic には、3 つの異なる方法で有効にできる推奨のハイコントラストパレットがあります：always、system設定に基づく方法、またはCSS classを使用する方法です。これらの各方法には、対応する名前のハイコントラストパレットファイルをインポートすることが含まれます。

テーマ変数は、関連するハイコントラストパレットファイルをインポートすることで設定され、アプリにコピーする必要はありません。変更される変数、さらなるカスタマイズのための追加変数を含む詳細については、Themesセクションを参照してください。

以下は、アプリケーションで適用された方法に応じてハイコントラストパレットをカスタマイズする方法の詳細を提供します。

alwaysハイコントラストパレットは、ライトバリアントにはhigh-contrast.always.cssを、ダークバリアントにはhigh-contrast-dark.always.cssをインポートすることでアクセスできます。

alwaysハイコントラストパレットは、以下のように動作します：

  1. :rootセレクタで、すべてのmodesのIonic colorsをハイコントラストパレットに補完するように設定します。:rootセレクタは、specificityが高いことを除いて、セレクタhtmlと同一です。
  2. :root.iosセレクタを使用して、iosデバイスでハイコントラストパレットの変数を設定します。
  3. :root.mdセレクタを使用して、mdデバイスでハイコントラストパレットの変数を設定します。

Contents

Edit this page