colour-independence

色への依存を避ける

色で伝える情報はすべて、形、テキスト、パターン、位置、アイコンなど、別の方法でも伝わるように設計します。 男性の8％、女性の0.5％に色覚特性があります。男性ユーザーのおよそ12人に1人にあたります。

基本原則

色は意味を強調できます。色だけで意味を伝えてはいけません。

よくある失敗

ステータス表示

• 悪い例：緑の点＝オンライン、赤の点＝オフライン（色のみ）
• 良い例：緑の点＋「オンライン」ラベル、赤の点＋「オフライン」ラベル
• さらに良い例：チェックマーク付きの緑の点＋「オンライン」、×印付きの灰色の点＋「オフライン」

フォームの入力検証

• 悪い例：無効なフィールドを赤い枠線だけで示す
• 良い例：赤い枠線＋エラーアイコン＋エラーメッセージ
• 本当に重要な役割を果たすのはエラーメッセージです。色はそれを補強します。

データの可視化

• 悪い例：色分けされた5本の線がある折れ線グラフで、凡例を色見本だけで示す
• 良い例：線種（実線、破線、点線）を変える＋ラベルを付ける＋グレースケールでも判別できる色を使う
• 良い例：色に加えてパターン（縞模様、ドット、塗りつぶし）を使った棒グラフ
• グラフは必ずグレースケールで確認します。それでも読み取れますか？

リンク

• 悪い例：本文とリンクを色だけで区別する
• 良い例：リンクに色を付け、さらに下線を引く
• アクセシブルな目印となるのは下線です。色は見やすさを高めます。

アラートとバッジ

• 悪い例：赤いバッジ＝緊急、黄色＝警告、緑＝問題なし
• 良い例：赤いバッジ＋「緊急」ラベル、黄色＋「警告」ラベル、緑＋「OK」ラベル
• アイコンでさらに補強します。警告は ⚠、成功は ✓、エラーは ✕ です。

マップと図

• 悪い例：データを示すために地域を色分けする（ラベルのないコロプレスマップ）
• 良い例：色とパターンを使い、各地域に値を表示する
• 良い例：ホバーまたはフォーカス時に値が表示されるインタラクティブな表示に加え、代替手段としてデータテーブルを用意する

デザインパターン

二重符号化

色が表す意味には、すべてもう1つの表現を組み合わせます。

• 色＋アイコン
• 色＋テキストラベル
• 色＋パターンまたはテクスチャ
• 色＋形
• 色＋位置

アクセシブルなカラーパレット

• 赤緑だけでなく、あらゆる種類の色覚特性でも見分けられる色を選びます
• カラーパレットを色覚シミュレーターでテストします
• 青とオレンジは、ほとんどの種類の色覚特性でも一般に見分けやすい色です
• 2つの状態を区別するために、赤と緑だけを組み合わせるのは避けます
• グラフ内で隣り合う色の間に十分なコントラストを確保します

グレースケールテスト

簡単な確認方法：インターフェースをグレースケールに変換します。

• それでも使えますか？
• すべてのステータスを区別できますか？
• グラフを読めますか？
• エラーのあるフィールドを見分けられますか？

どれか1つでも「いいえ」なら、意味を色だけで伝えています。

評価チェックリスト

• 色だけで伝えている情報がない
• ステータス表示に色＋アイコン＋テキストを使っている
• フォームのエラーに色＋アイコン＋メッセージを使っている
• グラフをグレースケールでも読み取れる
• リンクを色以外の方法でも区別できる
• アラートのレベルに色＋ラベル＋アイコンを使っている
• データの可視化に、色とあわせてパターンまたはラベルを使っている
• インターフェースがグレースケールテストに合格している