「見える」の多様性
あなたが画面で見ている色は、隣の人が見ている色とは異なるかもしれません。
日本人男性の約5%、女性の約0.2%が何らかの色覚特性を持つと言われています。これは20人のチームに1人は色の見え方が異なる人がいる計算です。さらに、加齢による視力の変化、画面の明るさ、周囲の照明——私たちが「同じ色」を見ている保証はどこにもありません。
アクセシビリティとは、この見え方の多様性を前提としたデザインです。
特定の誰かを排除しないこと。それは単なる配慮ではなく、より多くの人に届くデザインを意味します。
WCAG：世界標準のアクセシビリティ指針
Web Content Accessibility Guidelines（WCAG）は、Webコンテンツのアクセシビリティに関する国際標準です。
現在の最新版はWCAG 2.2（2023年10月勧告）。日本でも、2024年4月施行の改正障害者差別解消法により、民間事業者にも「合理的配慮」が義務化され、WCAGへの準拠が事実上の標準となりつつあります。
適合レベル
WCAGには3つの適合レベルがあります。
| レベル | 要求水準 | 目安 |
|---|---|---|
| A | 最低限 | 致命的なバリアを除去 |
| AA | 標準 | 多くの障害を持つ人が利用可能 |
| AAA | 最高 | ほぼすべての人が利用可能 |
一般的にAA準拠が目標とされます。公共機関のWebサイトでは必須、民間企業でも推奨水準です。
コントラスト比：4.5:1の法則
色のアクセシビリティで最も重要な指標がコントラスト比です。
コントラスト比は、2色の相対輝度の比率で表されます。最大は21:1（黒と白）、最小は1:1（同色）。
WCAG 2.2の基準
| 対象 | レベルAA | レベルAAA |
|---|---|---|
| 通常テキスト（18pt未満） | 4.5:1以上 | 7:1以上 |
| 大きなテキスト（18pt以上/14pt太字以上） | 3:1以上 | 4.5:1以上 |
| UI要素・グラフィック | 3:1以上 | — |
実践例
よくある配色とコントラスト比を確認してみましょう。
| 組み合わせ | コントラスト比 | AA判定 |
|---|---|---|
| 黒（#000000）× 白（#FFFFFF） | 21:1 | ✅ |
| 紺（#1E3A5F）× 白（#FFFFFF） | 10.5:1 | ✅ |
| グレー（#767676）× 白（#FFFFFF） | 4.54:1 | ✅ ギリギリ |
| ライトグレー（#A0A0A0）× 白（#FFFFFF） | 2.94:1 | ❌ |
| 赤（#FF0000）× 緑（#00FF00） | 1.28:1 | ❌ |
グレーの罠に注意してください。デザイン上は「読める」と感じるグレーでも、基準を満たさないケースが多々あります。#767676は白背景でAA基準を満たす最も明るいグレーとして知られています。
色覚多様性への対応
色覚特性の種類
色覚特性には主に以下のタイプがあります。
| タイプ | 特徴 | 頻度（日本人男性） |
|---|---|---|
| P型（1型） | 赤が暗く見える | 約1.5% |
| D型（2型） | 緑が暗く見える | 約3.5% |
| T型（3型） | 青が暗く見える | 非常に稀 |
| A型 | すべてがグレーに見える | 非常に稀 |
P型とD型を合わせると日本人男性の約5%。クラスに1人はいる計算です。
問題のある配色
以下の色の組み合わせは、色覚特性を持つ人にとって区別が困難です。
| 組み合わせ | 問題 |
|---|---|
| 赤と緑 | P型・D型で混同しやすい |
| 赤とオレンジ | P型で混同しやすい |
| 緑と茶 | D型で混同しやすい |
| 青と紫 | 判別しにくい場合がある |
| ピンクとグレー | P型で混同しやすい |
交通信号の例を考えてみてください。赤・黄・緑という色覚特性者には区別しにくい組み合わせですが、位置（上・中・下）という色以外の情報で判別できるようになっています。
色に頼らない情報伝達
アクセシブルなデザインの鉄則：色だけで情報を伝えない。
悪い例
エラーは赤、成功は緑で表示されます。色覚特性を持つ人には、赤と緑の区別がつかない可能性があります。
良い例
❌ エラー：入力内容を確認してください。
✅ 成功：登録が完了しました。- アイコン（❌、✅）で視覚的に区別
- テキストで状態を明示
- 色は補助的な情報として使用
具体的なテクニック
| 場面 | 色のみ ❌ | 色＋α ✅ |
|---|---|---|
| エラー表示 | 赤いテキスト | 赤＋❌アイコン＋「エラー」ラベル |
| グラフ | 色分けのみ | 色＋パターン（斜線・ドット） |
| リンク | 青色のみ | 青色＋下線 |
| 必須項目 | 赤い * | 赤い * ＋「（必須）」テキスト |
| ステータス | 色付き丸 | 色付き丸＋ラベルテキスト |
実践：アクセシブルなカラーパレット設計
ステップ1：ベースカラーを決める
ブランドカラーやメインカラーを決定します。この段階では、コントラスト比は気にしません。
ステップ2：テキスト色を調整
ベースカラー上で使用するテキスト色を、コントラスト比4.5:1以上になるよう調整します。
背景: #3B82F6（青）
テキスト: #FFFFFF（白）
コントラスト比: 4.68:1 ✅明るい背景には暗いテキスト、暗い背景には明るいテキストが基本です。
ステップ3：色覚シミュレーション
P型・D型のシミュレーションを行い、色の組み合わせが区別可能か確認します。
主要ブラウザの開発者ツールには色覚シミュレーション機能があります。
- Chrome: DevTools → Rendering → Emulate vision deficiencies
- Firefox: アクセシビリティパネル → シミュレート
ステップ4：代替手段の追加
色だけに頼らず、アイコン・テキスト・パターンを併用します。
ツールを活用する
コントラスト比チェッカー
当サイトのカラーコード変換ツールでは、2色を入力するとWCAGコントラスト比が自動計算されます。AA/AAA基準への適合も一目で確認可能です。
その他のおすすめツール：
| ツール | 特徴 |
|---|---|
| WebAIM Contrast Checker | シンプルで使いやすい |
| Coolors Contrast Checker | パレット全体のチェック |
| Adobe Color | アクセシビリティモード |
色覚シミュレーター
| ツール | 特徴 |
|---|---|
| Coblis | 画像をアップロードして確認 |
| ブラウザDevTools | リアルタイムでページ全体を確認 |
| Figmaプラグイン | デザイン段階でチェック |
よくある誤解
「アクセシビリティ対応するとデザインがダサくなる」
これは誤解です。
制約の中でクリエイティビティを発揮することは、デザインの本質です。コントラスト比の基準を満たしながら、美しいデザインは十分に可能です。むしろ、基準を意識することで視認性の高い、洗練されたデザインが生まれることも多いです。
「色覚特性者は少数派だから考慮しなくていい」
日本人男性の5%は、決して無視できる数字ではありません。
20人のユーザーがいれば1人は色の見え方が異なる可能性があります。さらに、高齢化社会において視力の低下は誰もが経験すること。アクセシビリティ対応は未来の自分への配慮でもあります。
「ツールでチェックすれば十分」
ツールは必要条件であって、十分条件ではありません。
数値上は基準を満たしていても、実際のユースケースで問題が生じることはあります。可能であれば、実際に色覚特性を持つ人にテストしてもらうことが理想です。
まとめ：アクセシビリティは品質
アクセシビリティへの対応は、「やさしさ」や「配慮」の問題ではありません。
デザインの品質の問題です。
より多くの人が使えるデザインは、より多くの人に届きます。それはビジネス上の合理性でもあり、社会的な責任でもあります。
色は美しい。だからこそ、その美しさをすべての人と共有したい——アクセシブルなカラーデザインは、その願いを形にするための技術です。