色覚多様性とWebアクセシビリティ ― P型・D型・T型の見え方とデザイン実践ガイド

人間の網膜には、色を感じ取る錐体細胞(cone cells)が3種類存在する。それぞれが異なる波長の光に反応し、脳がその信号を統合することで「色」として知覚される。

• L錐体(Long): 長波長(赤)に最も反応 — ピーク感度は約564nm
• M錐体(Medium): 中波長(緑)に最も反応 — ピーク感度は約534nm
• S錐体(Short): 短波長(青)に最も反応 — ピーク感度は約420nm

L・M・S錐体の組み合わせや感度には個人差があります。最も多い組み合わせを本記事ではC型（一般色覚）と呼び、P型・D型・T型などと優劣を付けずに区別します。医学分野では「色覚異常」「2色覚」「異常3色覚」などの診断用語も使われていますが、一般向けの説明と医学的診断は分けて扱う必要があります。

1型・2型の多くは、X染色体上にあるL錐体・M錐体関連遺伝子の違いと関係します。ただし、性染色体の構成、遺伝子の組み合わせ、X染色体不活化には個人差があるため、すべての人を単純なXX／XYの二分類だけで説明することはできません。後述する男性・女性別の数値は、出典資料が採用した集計区分として示します。

色覚多様性は、影響を受ける錐体細胞の種類に基づいて3つの型に分類される。

このほか、1色覚（A型）など非常にまれな型もあります。型の名称だけで、個人の見え方や生活上の困りごとを一律に決めることはできません。

日本眼科学会は医学用語として現在も「色覚異常」を使用しています。一方、2000年代の用語改訂では、誤解を招きやすい旧称を「1色覚」「1型2色覚」などへ改めました。CUDOは一般向けの場面で、価値判断を含みにくいC型・P型・D型・T型・A型という呼称を提唱しています。本記事もこの考え方を採用し、医学用語を引用する場合は診断上の用語であることを明示します。

上の図は、Machado、Oliveira、Fernandes（2009）の変換行列を使い、色の差がどのように小さくなり得るかを説明するための近似図です。個人が実際に見ている色を再現したものではありません。

P型(1型)・D型(2型)の見え方

P型とD型では、赤系と緑系、茶系と緑系、青系と紫系など、特定の組み合わせの差が小さく感じられることがあります。P型では一部の赤が暗く感じられる傾向もありますが、照明、面積、彩度、明度、型の程度によって結果は変わります。

T型(3型)の見え方

T型では、青系と緑系、黄系と淡い色などの組み合わせを区別しにくいことがあります。P型・D型とは、差が小さく感じられやすい色の組み合わせが異なります。

注意：シミュレーションは配色上の問題候補を見つける補助手段です。同じ型でも見え方には個人差があり、画面上の変換結果を当事者の見え方そのものとして提示しないでください。

日本眼科医会は、先天赤緑色覚の頻度を次のように示しています。

• 男性として集計された区分：5%（20人に1人）
• 女性として集計された区分：0.2%（500人に1人）

これらは集団の頻度であり、個人の見え方、性自認、能力を判定する数値ではありません。また、地域、祖先集団、調査方法によって頻度は変わり得ます。サイト設計では利用者の属性を推測するのではなく、色以外の手がかりを常に用意することが重要です。

出典：日本眼科医会「色覚異常を正しく理解するために」。区分名は出典資料の集計方法を説明するために記載しています。

Webデザインにおいて、色覚多様性のあるユーザーが遭遇する典型的な問題パターンを整理する。

赤/緑のステータス表示

「成功=緑」「エラー=赤」という配色は広く普及していますが、P型・D型では条件によって色の差が小さく感じられることがあります。アラートやバリデーション結果など、重要な情報を色だけで伝えると、意味を判別できない場合があります。

色のみに依存するグラフの凡例

折れ線グラフや棒グラフで凡例を色だけで区別すると、色の組み合わせや表示条件によって系列を対応付けにくくなる場合があります。

フォームバリデーション

入力エラーを赤い枠線だけで示すフォームは、P型・D型のユーザーにはエラー状態が認識しづらい。特に薄い赤やピンクは背景と区別がつかない場合がある。

地図のヒートマップ

赤→黄→緑のグラデーションを使ったヒートマップは、P型・D型で段階の一部を区別しにくくなることがあります。明度差、数値、模様などを併用します。

赤/茶、緑/黄の近似

Webでよく使われる赤(#e74c3c)と茶色(#8b4513)、緑(#2ecc71)と黄色(#f1c40f)はそれぞれ、P型・D型では非常に似た色に知覚される。ナビゲーションやカテゴリ分類をこれらの色で区別するのは避けるべきである。

WCAG (Web Content Accessibility Guidelines) 2.2 には、色覚多様性に直接関わる以下の基準が定められている。

特に1.4.1 Use of Colorは、色覚多様性への対応として最も重要な基準である。この基準は、色を使うこと自体を禁止するのではなく、色に追加の手がかりを添えることを求めている。

日本のアクセシビリティ規格であるJIS X 8341-3:2016もWCAG 2.0をベースとしており、公共機関のWebサイトではJIS準拠が求められる場面が増えている。

アクセシブルデザインの原則は明快である: 色 + もう1つの手がかりを常に組み合わせる。形状、テキストラベル、パターン、アイコンなど、色以外の情報チャネルを併用することで、どの色覚タイプのユーザーにも情報が伝わる。

ステータス表示

色だけでなく、形状とテキストラベルを組み合わせる。

• 成功: 緑の背景 + ○アイコン + 「成功しました」テキスト
• 警告: 黄の背景 + △アイコン + 「注意が必要です」テキスト
• エラー: 赤の背景 + ×アイコン + 「エラーが発生しました」テキスト

グラフ

線の色だけでなく、線の形状(実線/破線/点線)とマーカー形状(●/■/▲)を併用する。凡例にもテキストラベルを必ず添える。

フォームバリデーション

赤い枠線だけではなく、アイコン(×マークや!マーク)とテキストメッセージ(「メールアドレスの形式が正しくありません」など)を併記する。

リンク

リンクテキストの色を変えるだけでなく、下線を付ける。WCAG 1.4.1では、本文中のリンクが色のみで区別されている場合、3:1以上のコントラスト比が求められる。下線を付ければこの問題は解消される。

ボタンの状態変化

hover時やfocus時の状態変化を色だけで表現せず、box-shadowやborderの変化、transformによるわずかな拡大なども併用する。

カラーユニバーサルデザイン（CUD）の配色例は、検討の出発点として役立ちます。ただし、特定のカラーコードだけで可読性や識別性が保証されるわけではありません。背景色、明度差、表示環境、面積、文字サイズを含めて確認します。

検討の出発点となる配色例

避けるべき組み合わせ

• 赤 × 緑 — P型・D型で差が小さく感じられることがある
• 赤 × 茶 — P型で区別しにくいことがある
• 緑 × 黄 — D型で区別しにくいことがある
• 青 × 紫 — 色相差だけに頼ると区別しにくい場合がある

比較的差を取りやすい組み合わせ

• 青 × オレンジ — 色相差と明度差を取りやすい候補
• 青 × 赤 — 明度差を確保したうえで使う候補
• 紫 × 黄 — 十分な明度差を確保しやすい候補

明度差の活用：色相が近い色同士でも、明度差が大きいほど区別しやすくなります。ただし、グレースケールで判別できることだけを合格条件にせず、テキスト、形状、線種、模様も併用してください。

配色のコントラスト比は、本サイトのWCAGチェッカーツールで簡単に確認できる。

自分のWebサイトが色覚多様性のあるユーザーにどう見えているかを確認する方法は複数ある。

Chrome DevTools

Chrome DevToolsのRenderingパネルでEmulate vision deficienciesを選択すると、Protanopia（P型）、Deuteranopia（D型）、Tritanopia（T型）、Achromatopsia（1色覚）の近似表示を確認できます。

Firefox

FirefoxのAccessibility Inspectorに利用可能なシミュレーション機能がある場合は、同様に配色上の問題候補を確認できます。機能名や対応状況はバージョンによって変わるため、使用中のブラウザで確認してください。

macOS

macOSのアクセシビリティ → ディスプレイ → カラーフィルタでは、OS全体にカラーフィルタを適用できます。これは利用者向けの表示調整であり、当事者の見え方を正確に再現する検証手段ではありません。

Figma

Figmaなどのデザインツールでも、プラグインを利用して近似表示を確認できます。特定のプラグイン名や提供状況は変わり得るため、導入前に権限、更新状況、処理方法を確認してください。

シミュレーションだけで完了としないでください。重要な画面では、色以外の手がかりを実装し、可能であれば異なる色覚特性を持つ人を含む利用者テストで確認します。

本サイトのツール

本サイトのWCAGチェッカーでコントラスト比を確認し、パレットジェネレーターでCUDに配慮した配色を作成し、カラーコンバーターで色空間の変換と確認ができる。デザインワークフローに組み込むことで、アクセシブルな配色を効率的に実現できる。

アクセシブルデザインは「特別な配慮」ではなく、「良いデザイン」そのものである。

色 + 形状 + テキストの冗長性は、色覚多様性のあるユーザーだけでなく、すべてのユーザーの認知負荷を下げる。日光の下でスマートフォンを見ているとき、疲れた目でモニターを見ているとき、色の手がかりだけに頼ったUIは誰にとっても使いにくい。

まずは今日から、次のアクションを試してほしい。

• 既存サイトのスクリーンショットをChrome DevToolsのEmulate vision deficienciesでシミュレーションしてみる
• ステータス表示やフォームバリデーションが色だけに依存していないかチェックする
• グラフの凡例に形状やパターンが使われているか確認する
• 本サイトのWCAGチェッカー、パレットジェネレーター、カラーコンバーターで配色をチェックする

利用者を一つの見え方に当てはめず、複数の手がかりで情報を伝えることが、アクセシブルな設計の基本です。