色覚異常に配慮したデザイン：総合ガイド

世界には約3億人の色覚特性のある人がいます。ウェブサイト、アプリ、データの可視化が情報を色だけで伝えているなら、利用者のかなりの割合が使いづらさを感じることになります。

うれしいことに、色覚特性に配慮したデザインはすべての人の役に立ちます。アクセシブルな配色は、色覚特性の有無にかかわらず、分かりやすさ、読みやすさ、使いやすさを高めます。

なぜ大切なのか

色覚特性は**男性の約8%、女性の約0.5%**にみられます。実際には次のような規模です。

男性20人のチームなら、およそ1〜2人が該当します
100万人の利用者がいれば、およそ8万人の男性に何らかの赤緑型がみられます
赤と緑の混同がもっとも多く、全体の約98%を占めます

色覚特性への配慮は、法的な要件にもなりつつあります。ウェブコンテンツ・アクセシビリティ・ガイドライン（WCAG）2.1は、色で伝える情報を他の手段でも利用できるようにすることを明確に求めています。

大原則：色だけに頼らない

色覚特性に配慮したデザインでもっとも大切な原則は、とても単純です。

情報を伝える唯一の手段として色を使わない。

色には必ず、少なくとももうひとつの視覚的な手がかりを添えてください。

文字のラベル — 区分や状態を明示的に示す
アイコンや記号 — 色に依存しない形を使う
パターンや質感 — グラフや地図でとくに有効
位置 — 空間の配置で階層を示す
形 — データの区分ごとに異なる形を使う

避けたい配色

赤緑型の利用者にとって、特に見分けにくい色の組み合わせがあります。

リスクの高い組み合わせ

避けるもの	理由	代わりに
緑地に赤	2型2色覚ではまったく見えません	オレンジ地に青
赤地に緑	同じ問題	青地に黄
赤と緑のボタン	合否を見分けられません	アイコン（✓/✗）と文字を追加
赤と黒の文字	赤が濃い灰色に見えることがあります	強調には太字や下線を
ピンクと灰色	1型2色覚では同じに見えます	青と灰色を

より安全な組み合わせ

赤緑型の利用者にとって、青とオレンジがもっとも信頼できるアクセシブルな組み合わせです。この2色は、ほぼすべての色覚特性で区別できます。

そのほか安全な組み合わせ：

青＋黄（赤緑型にも青黄型にも有効）
青＋白
黒＋黄（最大のコントラスト）
紫＋黄

色覚特性に配慮したグラフ

データの可視化は、色覚特性の影響がもっとも大きく出る領域です。よくある失敗は次のとおりです。

正負の値に赤／緑を使う
赤〜黄〜緑のグラデーションのヒートマップを使う
複数の系列を色だけで区別する

グラフでの対処

1. 色とあわせて塗りパターンを使う 色が似て見えても区別できるよう、グラフの領域に斜線、点、格子などを加えます。

2. データに直接ラベルを付ける 色の凡例に頼るのではなく、系列名をグラフ上に直接書き添えます。これは色覚特性のある人だけでなく、すべての利用者の助けになります。

3. 配慮されたパレットを使う 推奨されるアクセシブルなパレット：

岡部・伊藤パレット：科学図版でのアクセシビリティのために設計されたもの
ColorBrewerパレット：地図やグラフ向けの、研究に基づくパレット
色覚シミュレーターでグラフが区別できるか確認してください

4. 代替のデータ形式を用意する どのグラフにも、表形式の表示やデータのダウンロードを添えて、視覚的な表現が難しい利用者も元の情報にたどり着けるようにします。

フォームとUIの状態

状態の表示は色に頼りがちなため、フォームは色覚特性のある利用者にとってリスクの高い領域です。

よくある問題

不正な項目に赤い枠線、正しい項目に緑の枠線
「状態：有効」を緑の文字だけで表示
エラーメッセージを赤だけで表示

アクセシブルな代替案

入力チェックの状態：

❌ 避ける： 赤い枠線＝エラー、緑の枠線＝成功
✅ 望ましい： エラーアイコン（⚠）＋赤い枠線＋内容を説明する文言
              成功アイコン（✓）＋緑の枠線＋「問題ありません」の文言

状態インジケーター：

❌ 避ける： •（緑の点）＝オンライン、•（赤の点）＝オフライン
✅ 望ましい： ✓ オンライン、✗ オフライン（あるいは形を変える：●/○）

ボタンと行動喚起：

❌ 避ける： 緑の「確定」／赤の「キャンセル」— 1型2色覚では同じに見えます
✅ 望ましい： ボタンに明確なラベル＋十分なコントラスト＋アイコンの追加

コントラストの要件（WCAG）

色の選択に加えて、読みやすさには十分なコントラスト比が欠かせません。組み合わせの確認にはコントラストチェッカーをお使いください。

要件	最小比	対象
WCAG AA	4.5:1	通常の文字（18pt未満）
WCAG AA	3.0:1	大きな文字（18pt以上、または14pt太字）
WCAG AAA	7.0:1	強化基準 — 通常の文字
WCAG AAA	4.5:1	強化基準 — 大きな文字

重要： これらの比は文字と背景の輝度の間で測られ、色覚シミュレーション下も含め、すべての利用者について満たす必要があります。

デザインの検証

デザインは必ず複数の方法で検証してください。

1. 色覚シミュレーターを使う

スクリーンショットをColorVisionシミュレーターに読み込み、それぞれの色覚特性でどう見えるかを確認します。1型・2型・3型色覚と全色盲の4つすべてで試してください。

2. ブラウザの開発者ツールを使う

ChromeとFirefoxには色覚シミュレーションが組み込まれています。

Chrome：DevTools → Rendering → Emulate vision deficiencies
Firefox：DevTools → Accessibility → Simulate

3. コントラスト比を確認する

すべての文字と背景の組み合わせを、色覚シミュレーションも表示するコントラストチェッカーで確認します。

4. 実際の声を聞く

可能であれば、色覚特性のある利用者にテストしてもらってください。シミュレーションでは見つからない問題に気づいてもらえることがよくあります。

プラットフォーム別のポイント

ウェブ

色で区別している要素には、CSSとあわせてaria-labelやtitle属性を付ける
:focusの状態を色だけで表現しない
フォームのエラー状態は、色の変化だけでなくアイコン＋文字を含める

データサイエンス・研究

R、Python（matplotlib）などのグラフ用ライブラリで、岡部・伊藤パレットを既定にする
色だけで十分に思えても、文字ラベル付きの凡例を必ず入れる

モバイルアプリ

iOSもAndroidもアクセシビリティ設定で色覚シミュレーションに対応しています
大きなリリースの前には、この設定を有効にして検証してください

印刷物

状態の表現を赤／緑の信号機のたとえに頼らない
白黒でコピーしても図版の意味が伝わるようにする

ツール	用途
ColorVisionシミュレーター	任意の画像が色覚特性でどう見えるかをシミュレート
コントラストチェッカー	色覚シミュレーション付きでWCAG適合を確認
Colour Oracle（デスクトップアプリ）	画面全体に色覚シミュレーションを重ねる
Who Can Use	さまざまな特性でのコントラスト比をシミュレート
Figmaアクセシビリティプラグイン	Figma上でリアルタイムに確認

よくある質問

色覚特性に配慮するには、色をすべてなくす必要がありますか？ いいえ。色はこれまでどおり十分に使えます。色が情報を伝える唯一の手段になってはいけない、というだけです。色と一緒に、文字、アイコン、パターンなどの手がかりを添えてください。

赤緑型だけを考えればよいですか？ 赤緑型は全体の約98%を占めますが、それに配慮すると他の型の利用者にも役立つことが多くあります。もっとも包括的なのは、シミュレーターですべての型を検証することです。

色覚特性のある人はスクリーンリーダーを使いますか？ 必ずしも使いません。色覚特性は視覚障害（全盲）とは異なります。多くは視力が十分にあり、スクリーンリーダーは使いません。必要なのは代替テキストではなく、色に依存しない視覚的な手がかりです。

色のアクセシビリティを確認する無料ツールでおすすめは？ 当サイトのシミュレーターとコントラストチェッカーはすべて無料です。Figmaでは、無料プラグイン「Able」がリアルタイムのコントラスト確認を提供しています。

要点