メインコンテンツへスキップ
バージョン: v8

高コントラストモード

Ionicは、視覚障害のあるユーザーのためにコントラストを高めたパレットを提供しています。これらのパレットは、テキストなどの前景コンテンツと、UIコンポーネントなどの背景コンテンツとのコントラストを強調することで機能します。Ionicは、高コントラストを実現するために、ライトとダークの両方のバリアントを提供しています。

概要​

Ionicのデフォルトパレットは、Ionicカラーを提供しており、適切なコントラストカラーと共に使用した場合、Webコンテンツアクセシビリティガイドライン（WCAG）で定義されているレベルAAの色コントラストを満たしています。Ionicカラーの高コントラストパレットは、適切なコントラストカラーと共に使用した場合、レベルAAAの色コントラストを満たすように更新されました。特に、UIコンポーネントのコントラスト、つまり境界線、テキスト、背景の色が改善されています。ただし、高コントラストパレットでは、テキストの読みやすさが優先されることに注意することが重要です。つまり、UIコンポーネントとページ背景とのコントラストを調整することで、コンポーネントのテキストとその背景とのコントラストが大幅に損なわれる可能性がある場合、UIコンポーネントの背景のコントラストは変更されません。

高コントラストテーマの有効化​

アプリで高コントラストパレットを有効にする方法は3つあります。**常に**、**システム**設定に基づいて、または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.always.cssの代わりにhigh-contrast-dark.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クラスを使用して、3つの異なる方法で有効化できる推奨される高コントラストパレットがあります。これらの方法にはそれぞれ、対応する名前の高コントラストパレットファイルをインポートすることが含まれます。

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

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

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

常に高コントラストパレットは以下の挙動をします。

  1. :rootセレクタにおいて、高コントラストパレットを補完するよう、すべてのIonicカラーをすべてのモードに対して設定します。 :rootセレクタはhtmlセレクタと同じですが、特異度がより高くなっています。
  2. :root.iosセレクタを使用して、iOSデバイスで高コントラストパレットの変数を設定します。
  3. :root.mdセレクタを使用して、MDデバイスで高コントラストパレットの変数を設定します。

目次

このページを編集する