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

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

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

3種類の錐体がすべて正常に機能する色覚を3色型色覚(trichromacy)と呼び、一般的に「正常色覚」とされる。しかし、色覚の個人差は二値的(正常か異常か)ではなく、連続的なスペクトルとして存在する。完全に1種類の錐体が欠如する2色型色覚から、機能が少し低下しただけの軽度の異常3色型色覚まで、多様なバリエーションがある。

色覚に関わる遺伝子はX染色体上にある(X染色体連鎖遺伝)。男性はXY染色体を持つため、1本のX染色体に変異があればそのまま発現する。一方、女性はXX染色体を持つため、2本のX染色体の両方に変異がなければ発現しない。これが、色覚多様性が男性に圧倒的に多い遺伝学的な理由である。

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

型	別名	影響を受ける錐体	頻度(日本人男性)	特徴
P型(1型)	protan	L錐体(赤)	約1.5%	赤が暗く見える、赤と緑の区別が困難
D型(2型)	deutan	M錐体(緑)	約3.5%	赤と緑の区別が困難(最も多い型)
T型(3型)	tritan	S錐体(青)	約0.01%	青と黄の区別が困難(非常に稀)

なお、3種類の錐体がすべて機能しない1色型色覚(全色盲)は約3万人に1人と極めて稀である。

かつては「色盲」「色弱」という用語が使われてきたが、医学的にも社会的にも不正確であり、当事者の心理的負担にもつながるとして、現在では「色覚多様性(color vision diversity)」という表現が推奨されている。日本眼科学会も2005年以降、「色覚異常」から「色覚特性」への言い換えを進めている。

上の図は、可視光スペクトル(380nm〜700nm)の各波長が、それぞれの色覚タイプでどのように知覚されるかをシミュレーションしたものである。シミュレーションにはBrettel, Vienot & Mollon (1997)の変換行列を使用している。

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

P型とD型は「赤緑色覚」と総称される。赤から緑にかけてのスペクトル領域が、黄色〜茶色に圧縮されたように見える。一方、青の領域はほぼ正常に知覚される。P型は特に赤が暗く見える傾向があり、D型と比べてさらに赤の彩度が低下する点が異なる。

T型(3型)の見え方

T型は青から緑にかけての領域で区別が困難になる。赤はほぼ正常に近い見え方をするため、P型・D型とは混同しやすい色のパターンが大きく異なる。

注意: シミュレーションはあくまで近似であり、実際の見え方は個人差が大きい。同じ「D型」でも錐体の感度低下の程度によって見え方は連続的に変化する。

日本における色覚多様性の割合は以下の通りである。

• 日本人男性: 約5%(20人に1人) — P型約1.5% + D型約3.5%
• 日本人女性: 約0.2%(500人に1人)
• 全世界の男性: 約8%(白人男性ではさらに高い)
• 全世界の女性: 約0.5%

日本の人口約1億2,400万人のうち男性は約6,200万人。その5%にあたる約310万人が色覚特性を持つ計算になる。女性の保因者(自身は発現しないが遺伝子を持つ)を含めるとさらに多い。

身近な例でいえば、40人学級に男子20人がいた場合、平均1人は色覚特性を持つ。Webサービスのユーザー1万人のうち男性が半数なら、約250人が色覚多様性のあるユーザーである。これは無視できる数字ではない。

出典: 日本眼科学会、厚生労働省 色覚検査に関する資料

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	A	色だけを情報伝達の唯一の手段にしてはならない
1.4.3 Contrast (Minimum)	AA	通常テキスト 4.5:1、大きいテキスト 3:1 以上のコントラスト比
1.4.11 Non-text Contrast	AA	UIコンポーネントとグラフィック要素は 3:1 以上のコントラスト比

特に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)の考え方に基づき、色覚多様性のあるユーザーにも区別しやすい配色を紹介する。

CUD推奨パレット

用途	推奨色	カラーコード	理由
赤の代替	朱赤	#FF4B00	P型でも暗く沈みにくい、オレンジ寄りの赤
緑の代替	青緑	#03AF7A	青成分を含むため、赤系統と混同しにくい
青	青	#005AFF	P型・D型とも問題なく知覚できる
オレンジ	オレンジ	#F6AA00	黄色との明度差を確保しやすい

避けるべき組み合わせ

• 赤 × 緑 — P型・D型で区別不能(最も危険)
• 赤 × 茶 — P型で非常に類似して見える
• 緑 × 黄 — D型で混同しやすい
• 青 × 紫 — T型で区別困難

推奨される組み合わせ

• 青 × オレンジ — 全タイプで区別可能、明度差も大きい
• 青 × 赤 — P型・D型でも波長が離れているため区別しやすい
• 紫 × 黄 — 明度差が非常に大きく、全タイプで安全

明度差の活用: 色相が近い色同士でも、明度(明るさ)が大きく異なれば区別できる。グレースケールに変換しても判別できる配色は、色覚多様性のあるユーザーにも安全である。

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

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

Chrome DevTools

Chrome DevToolsのRenderingパネルでEmulate vision deficienciesを選択すると、Protanopia(P型)、Deuteranopia(D型)、Tritanopia(T型)、Achromatopsia(1色型)のシミュレーションが可能。開発中のリアルタイム確認に最適である。

Firefox

FirefoxのAccessibility InspectorからSimulateメニューで同様のシミュレーションが可能。Firefoxは色覚シミュレーションの精度が高いと評価されている。

macOS

システム環境設定のアクセシビリティ → ディスプレイ → カラーフィルタで、OS全体に色覚シミュレーションのフィルタを適用できる。ブラウザ外のアプリケーションも含めて確認したい場合に有用。

Figma

FigmaのVision Simulatorプラグインを使えば、デザインカンプの段階で色覚シミュレーションが可能。実装前の段階で問題を発見・修正できる。

本サイトのツール

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

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

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

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

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

20人に1人のための設計は、結局のところ、全員のための設計である。