色覚多様性に配慮した配色｜色だけで情報を伝えるな

:::note ※色覚多様性に配慮したい人向けの「実装ルール」記事です :::

結論（私の判断基準）

色だけで情報を伝えるな。アイコン・テキストを併用する
赤と緑で成功/失敗を表現するな。20人に1人は区別できない
迷ったら青とオレンジ。これは多くの色覚タイプで区別できる

「配慮」という言葉は使いたくない。これは配慮ではなく、事故を防ぐための実装ルール。

🚀 配色を確認 → Color Palette Generator

なぜ対応するか（建前と本音）

建前

日本人男性の約5%、女性の約0.2%に色覚特性がある。20人のユーザーがいれば1人は赤緑の区別が難しい可能性がある。

本音

赤と緑でエラー/成功を表現したサイトで、「エラーに気づかなかった」とクレームが来た。改修した。

色だけで情報を伝えると、必ず誰かが困る。その「誰か」からクレームが来る。

やってはいけないこと

❌ 赤と緑だけで区別

/* NG: 色だけで成功/失敗を表現 */
.success { color: #22C55E; } /* 緑 */
.error { color: #EF4444; }   /* 赤 */

P型・D型の人には、どちらも似た茶色系に見える。

❌ 彩度が近い赤と緑

特に、くすんだ赤と緑は区別が困難。明度も彩度も近いと、ほぼ同じに見える。

解決策（私がやっていること）

解決策1：色以外の手がかりを追加

<!-- アイコン + テキストを併用 -->
<span class="success">✓ 保存しました</span>
<span class="error">✗ エラーが発生しました</span>

色が見えなくても、アイコンとテキストで分かる。

これが一番確実。色は「補助」として使う。

解決策2：明度差をつける

/* 明度に差があれば区別しやすい */
.success { color: #166534; } /* 暗い緑 */
.error { color: #FCA5A5; }   /* 明るい赤 */

同じ明度の赤と緑は危険。明度差があれば、色が見えなくても区別できる。

解決策3：青とオレンジを使う

/* 赤緑の代わりに青とオレンジ */
.info { color: #3B82F6; }    /* 青 */
.warning { color: #F97316; } /* オレンジ */

青とオレンジは多くの色覚タイプで区別しやすい。迷ったらこれ。

チェック方法

Chrome DevTools

Rendering → Emulate vision deficiencies

Protanopia（P型）
Deuteranopia（D型）
Tritanopia（T型）

私は公開前に必ずP型・D型でチェックする。

フォーム入力のエラー表示

<!-- 色 + アイコン + テキスト + 枠線 -->
<input type="text" class="error" aria-invalid="true">
<span class="error-icon">⚠</span>
<span class="error-text">メールアドレスの形式が正しくありません</span>

色だけでエラーを伝えない。アイコン、テキスト、枠線を併用する。

グラフ・チャートの注意点

やってはいけない	やるべき
赤・緑・黄の3色	青・オレンジ・紫の3色
色だけで凡例	パターン（斜線・ドット）を併用
隣接する色が似ている	明度差をつける

迷ったときの判断

迷い	私の判断
赤と緑を使うか	使わない。青とオレンジにする
色だけで区別するか	しない。アイコン・テキストを併用
チェックするか	する。P型・D型で必ず確認

この記事で解決しない場合

コントラスト比を確認したい → コントラスト比とWCAG基準
配色の思想を知りたい → Web配色は「事故を減らす設計」

色覚多様性への配慮は「優しさ」ではない。事故を防ぐための実装ルール。守らないとクレームが来る。