色覚多様性とWebアクセシビリティ — すべての人に見やすい配色を

1. 色覚の多様性とは

人間の目には3種類の錐体細胞（赤・緑・青に反応）があり、これらの組み合わせで色を知覚しています。色覚特性（色覚異常）とは、これらの錐体細胞の感度が一般と異なる状態です。

1型色覚（P型）：赤の知覚が弱い。赤と緑の区別が困難。日本人男性の約1.5%。2型色覚（D型）：緑の知覚が弱い。赤と緑の区別が困難。日本人男性の約3.5%。3型色覚（T型）：青の知覚が弱い。青と黄の区別が困難。非常にまれ。

色覚特性は障害ではなく、「色の見え方のバリエーション」です。しかし、赤と緑だけで情報を区別するデザインは、多くの人にとってバリアになります。

WCAG（Web Content Accessibility Guidelines）は、W3Cが策定したWebアクセシビリティの国際基準です。コントラスト比について、以下の基準があります。

AA基準（最低限）：通常テキスト（18px未満）は4.5:1以上、大きなテキスト（18px以上のboldまたは24px以上）は3:1以上。AAA基準（推奨）：通常テキストは7:1以上、大きなテキストは4.5:1以上。

コントラスト比は2つの色の相対輝度の比で計算されます。白と黒のコントラスト比は21:1（最大）、白と白は1:1（最小）です。AA基準の4.5:1は、視力の弱い人や環境光の影響を受ける状況でも読みやすいレベルです。

明度差を意識する：色覚特性があっても明度の違いは知覚できます。赤と緑を使いたい場合、赤を暗く・緑を明るくするなど、明度に十分な差をつけましょう。

赤と緑の組み合わせを避ける：P型・D型色覚の方はこの組み合わせの区別が困難です。代わりに、赤と青、オレンジと青など、色覚タイプに関係なく区別しやすい組み合わせを選びましょう。

青を活用する：青はすべての色覚タイプで比較的正しく知覚されます。情報の区別に色を使う場合、青を軸にした配色は安全な選択です。

アクセシビリティの最も重要な原則は「色だけで情報を伝えない」ことです。グラフにはパターンやラベル、エラー表示にはアイコンやテキスト、リンクには下線を追加するなど、色以外の手がかりを必ず併用します。

良い例：エラーメッセージを赤色 + ✕ アイコン + テキスト説明。悪い例：入力欄を赤く囲むだけでエラーを示す。色が見えない状況（モノクロ印刷、直射日光下のスマホ画面）でも情報が伝わるかが判断基準です。

テキストと背景のコントラスト比はAA基準（4.5:1）以上あるか？色だけで情報を区別していないか（形・パターン・テキストも併用しているか）？赤と緑だけの区別に依存していないか？

グレースケールに変換しても情報が読み取れるか？リンクは色だけでなく下線や太字で区別できるか？フォームのエラー表示はアイコンやテキストも含んでいるか？

Tool Paletteのカラーパレットジェネレーターでは、生成した配色のWCAGコントラスト比をAA/AAAの両基準で自動チェックできます。デザインの早い段階でアクセシビリティを確認する習慣をつけましょう。

カラーパレットジェネレーターで、あなたの配色がWCAG基準を満たしているか確認しましょう。