色とコントラスト
webアプリケーションUIにおいて色は重要な役割を果たしている。
- 操作の重要度
- 情報の分類
- 情報の知覚しやすさ
事例1 色のみで情報を提供している
問題点
色は視覚情報であるため、色だけで情報を提供している場合、視覚に問題を抱えているユーザはその情報を知ることができない。 また、人間の目の網膜には３種類の錐体の視細胞があり、それぞれが違う色を感じ取るために存在している。 しかし、いずれかの錐体が機能していない場合、認識しづらい色がある。
- C型:全て見える
- P型:黄緑〜赤が機能しない
- D型:緑〜燈が機能しない
- T型:紫〜青が機能しない
- A型:全てが機能しておらず、モノクロに見える
見え方には特徴があるが、特に多い色覚特性のP/D型では次の色の組み合わせが見づらく、識別できない可能性がある。
- 赤と緑
- 黄色と黄緑
- ピンクと灰色
- 青と紫
良くないフォームの例
良くないブックマークの例
改善:色以外での情報提供
良いフォームの例
良いブックマークの例
事例2 コントラスト比が低すぎる
色の差を感じることが難しい場合、情報へのアクセスが難しくなる。 例えば、視力が低下しているユーザは、白い背景に薄いグレーの文字を視認できない可能性がある。 また、環境光がディスプレイに反射する環境では、暗い背景に暗い文字だと読むことが難しい。
改善1:文字のコントラスト比の改善
最低限、文字色と背景色のコントラスト比は4.5:1にすること。 WCAG2.1の達成基準1.4.6の「色のコントラスト（高度）」ではコントラスト比を7:1以上にすることを求めているが、 これはレベルAAAに相当し、アプリケーション全体で達成することは簡単ではないため、本文箇所だけ7:1にするなど工夫が必要である。
改善2:文字以外のコントラスト比の改善
改善3:文字を大きくする、または太くする
チェックポイント
- 各色覚による見え方のシミュレータを用いて確認する。
- 背景色と文字色のコントラスト比は4.5:1以上、18pt以上または14pt以上の太字の大きい文字の場合は3:1以上にする。