色のコントラスト

アプリのインターフェースに選択する色は、インターフェースの読みやすさとわかりやすさに影響します。色のコントラストが十分にあれば、テキストや画像は読みやすく、わかりやすくなります。

色のコントラストを十分に確保することは、視覚障害を持つ方々が利用しやすくなるだけでなく、直射日光が当たっている場合やディスプレイの輝度が低い場合など、極端な照明環境でデバイスのインターフェースを利用するあらゆるユーザーの方々に役立ちます。

実装

アプリのユーザーインターフェースを実装する際には、色のコントラストが十分になるように背景色と前景色を指定してください。

「コントラスト比」とは、ディスプレイに表示したときの 2 つの隣接する色の光の輝度（光の強さ）の差を計算した値です。コントラスト比の範囲は 1～21（1:1～21:1 と表記されることがよくあります）で、数値が高いほどコントラストが高くなります。2 つの隣接する色のコントラスト比は、色のコントラスト比計算ツールなど、多くのツールで計算できます。

TextView を使用してテキストを表示している場合は、android:textColor と android:background を使用して、コントラスト比が高くなるように前景色と背景色を定義します。Compose で Text を使用している場合は、色のパラメータと Modifier.background を使用して、コントラスト比が高くなるように前景色と背景色を定義します。

W3C での推奨設定は次のとおりです。

小さい文字サイズ（レギュラーでは 18 ポイント未満、太字では 14 ポイント未満）の場合は 4.5:1 以上
大きい文字サイズ（レギュラーでは 18 ポイント以上、太字では 14 ポイント以上）の場合は 3.0:1 以上

色のコントラストに関する注意事項:

グラフィカルなコンテンツやアイコンの表示に ImageView または Image を使用する場合は、前景色と背景色のコントラストが推奨比率を満たす、または推奨比率を超えるようにしてください。
コントラスト比は、他の要素と重なったときの要素の前景と背景の見かけ上の色に基づいて計算されます。ARGB 形式（#AARRGGBB の 16 進値）で色を定義している場合、透過性の色（アルファチャンネル値が 255 未満のもの）は、その下にレンダリングされるコンテンツとのブレンドにより、見かけ上の色が異なることがあります。
フォントスムージングやアンチエイリアスの処理は、一部のコンテンツ、特にストローク幅の狭いコンテンツの見かけ上の色に影響することがあります。読みやすくするには、コントラスト比が高い色の組み合わせを選択するか、コンテンツのストローク幅を大きくしてください。

デザイン

ユーザーインターフェースをデザインするときには、隣接する色のコントラスト比が十分なパレットを選ぶことを考慮してください。

特にテキストやアイコン画像では、W3C のガイドラインの最小コントラスト比の規定に従ってください。
ユーザーがメインコンテンツの色を選択できるよう、選択肢としてコントラストの高いテーマを含めることを考慮してください。

詳しくは、ユーザー補助機能の色とコントラストのマテリアルデザインに関するガイドラインをご覧ください。

テスト

アプリの色のコントラストを手動で確認するには:

アプリを起動します。
スクリーンショットを撮影します。
画像表示ソフトウェアまたは画像編集ソフトウェアで「スポイトツール」を使用して、スクリーンショットから見かけ上の色のサンプルを抽出します。
コントラスト比計算ツールを使用して、隣接する色のコントラスト比を算出します。
コントラスト比が W3C ガイドラインで定義されている値より低い場合は、高くするとインターフェースが使いやすくなる可能性があります。

色のコントラストのさまざまな問題は、Android の自動テストツールで検出できます。デバイス上でのアプリの手動テストには Android 用ユーザー補助検証ツールを使用することをおすすめします。自動テストでは、Espresso と Robolectric でユーザー補助機能の確認を有効にします。