自分には見分けやすい配色でも、見る人によっては2つの色が同じに見えているかもしれません。
色のアクセシビリティは、そうした見え方の違いがあっても、誰もが色から必要な情報を受け取れるようにするための考え方です。
この記事では、色のアクセシビリティとは何か、色覚の多様性の基本、WCAGが定めるコントラスト比などの3つの基準、そして見え方を確かめる方法を、初心者向けに解説します。
色のアクセシビリティの基本
まずは色のアクセシビリティという言葉の意味と、なぜ色に配慮が必要なのかを、色の見え方の多様性から押さえましょう。
色のアクセシビリティとは何か
アクセシビリティとは、年齢や障害の有無、利用する環境にかかわらず、誰もが情報やサービスを利用できる状態のことです(色・文字・操作を含めた全体像はアクセシビリティとは?で解説しています)。
色のアクセシビリティとは、その中でも「色」に関わる部分、つまり色の見え方が人によって違っても、内容を読み取り、操作できるように配色する考え方を指します。
具体的には、次の3つがポイントになります。
- 文字と背景に十分な明るさの差をつける
- ボタンの枠やグラフなど、文字以外の部品にも明るさの差をつける
- 色だけで情報を伝えない
文字の大きさや行間など、文字側から見たアクセシビリティは別の記事で解説します。
色の見え方は人によって違う(色覚の多様性)
色の配慮が必要な一番の理由は、色の感じ方(色覚)が人によって違うからです。
人の目の網膜には、主に赤・緑・青の光に反応する3種類の「錐体(すいたい)」という色のセンサーがあります。
このうち赤の光に反応する錐体の働きが異なるタイプを「1型色覚」、緑の光に反応する錐体の働きが異なるタイプを「2型色覚」と呼び、どちらも赤と緑の区別がつきにくいという共通点があります(日本眼科医会「色覚異常といわれたら」)。
日本眼科学会によると、こうした生まれつきの色覚の違いは、日本人男性の約5%(約20人に1人)、女性の0.2%(500人に1人)に見られます。
40人のクラスなら、男子20人のうち1人程度はいる計算で、決して珍しい特性ではありません。
呼び方は分野によって異なり、医学では「1型・2型・3型」、デザインの分野では英語の頭文字から「P型・D型・T型」と呼ぶことがあります(NPO法人カラーユニバーサルデザイン機構「色覚の呼称」)。
この記事では、色覚の違いを持つことを「色覚特性」と表します。
呼び名がたくさん出てきますが、Webデザインの実務でまず押さえたいのは、赤を感じにくい「P型(1型)」と、緑を感じにくい「D型(2型)」の2つです。
この2つで色覚特性のある人の大半を占め、後で紹介するシミュレーションツールでも、まずこの2つの見え方を確かめます。
| 医学での呼び方 | デザイン分野での呼び方 | 働きが異なる錐体 | 日本人男性での割合の目安 |
|---|---|---|---|
| 1型色覚 | P型 | 赤の光に反応する錐体 | 1%強 |
| 2型色覚 | D型 | 緑の光に反応する錐体 | 4%弱 |
| 3型色覚 | T型 | 青の光に反応する錐体 | 非常にまれ |
日本眼科医会の解説では、1型・2型の人が混同しやすい色の組み合わせとして、次のような例が挙げられています。
黄緑と橙
緑と茶
青と紫
ピンクと灰色
1型・2型の人が混同しやすいとされる色の組み合わせの例(色は一例で、見え方はタイプや程度によって異なる)
上の見本はどれも、多くの人には「はっきり違う2色」に見えますが、1型・2型の人には似た色に見えることがあります。
Webサイトに置き換えると、たとえば次のような場面で困りごとが起こります。
- カレンダーで、祝日をピンク、平日を灰色で塗り分けただけだと、祝日が見分けられない
- 未訪問のリンクを青、訪問済みのリンクを紫にしただけだと、どのページを見たのか分からない
- 在庫状況を黄緑の「在庫あり」と橙の「残りわずか」の色の印だけで示すと、状態を読み取れない
さらに1型の人は、赤が暗く見え、ピンクと水色も混同しやすいとされています。
一方で、青系の色と黄色系の色とを混同することはないと説明されており、これは配色を考えるうえでの大きなヒントになります。
理由をざっくり言うと、1型・2型で働きが異なるのは赤と緑のセンサーで、青のセンサーはふつうに働いているからです。
目は色を「赤っぽいか緑っぽいか」と「青っぽいか黄色っぽいか」の2つのものさしで見分けていて、1型・2型で弱くなるのは前者のものさしです。そのため、青と黄色の違いは残り、見分けやすい組み合わせになります。
色が見分けにくくなるのは色覚特性だけではない
色が見分けにくくなる場面は、色覚特性を持つ人に限りません。
たとえば、強い日差しの下でスマートフォンを見るとき、画面の明るさを落としているとき、資料を白黒で印刷したときなどは、誰にとっても色の差が伝わりにくくなります。
また、視力が低い人には、文字と背景の明るさの差が小さいと文字そのものが読み取りにくくなります。
色のアクセシビリティは一部の人のための特別な対応ではなく、すべての利用者にとって見やすいデザインにつながる配慮だと考えましょう。
色のアクセシビリティで押さえる3つの基準
色の配慮には、WCAG(Webコンテンツを誰にとっても使いやすくするための国際的なガイドライン)に具体的な基準があり、色に関わるものは主に次の3つです。
| 達成基準 | レベル | 求めていること |
|---|---|---|
| 1.4.3 コントラスト(最低限) | AA | 文字と背景のコントラスト比を4.5:1以上(大きな文字は3:1以上)にする |
| 1.4.11 非テキストのコントラスト | AA | ボタンや入力欄の輪郭、理解に必要な図などを、隣り合う色と3:1以上にする |
| 1.4.1 色の用途 | A | 色だけを、情報を伝える唯一の手段にしない |
WCAG(ダブリューシーエージー)は法律ではなく、W3CというWeb技術の標準化団体がまとめた、世界共通のルールブックのようなものです。
基準ごとにA・AA・AAAのレベルがあり、Aが最低限、AAAが最も厳しいレベルです。多くのWebサイトでは「AA」までを満たすことを目標にするので、まずは上の表の3つを押さえれば十分です。
正式な文言は、WAIC(ウェブアクセシビリティ基盤委員会)によるWCAG 2.2の日本語訳で確認できます。
文字と背景のコントラスト(達成基準1.4.3)
1つめは、文字と背景の明るさの差を、コントラスト比という数値で一定以上にする基準です。
本文など通常の文字は4.5:1以上、見出しなどの大きな文字は3:1以上が求められます(達成基準1.4.3)。
4.5:1という値は、解説書によると、80歳前後の高齢者に典型的な視力(0.5程度)の人でも読めるように考えられた数値です(達成基準1.4.3を理解する)。
また、コントラスト比は色みではなく明るさの差だけで計算するため、色覚特性があっても見分けやすい組み合わせかどうかの目安になります。
色の明るさ(明度)と色み(色相)の違いは、色の三属性とは?で解説しています。
数値の意味や測り方は、コントラスト比とは?WCAGの基準をやさしく解説で詳しく解説しています。
明るさの差を使って読みやすい配色を作る手順は、配色と可読性とは?で紹介しています。
文字以外のコントラスト(達成基準1.4.11)
2つめは、ボタンや入力欄の輪郭、チェックボックスの印、グラフの線など、文字以外の部品にも明るさの差を求める基準です。
操作したり内容を理解したりするのに必要な部分は、隣り合う色とのコントラスト比を3:1以上にします(達成基準1.4.11)。
NG:入力欄の枠が薄い(約1.3:1)
OK:入力欄の枠に明るさの差がある(約4.1:1)
白い背景の上の入力欄を、枠線の色だけ変えて並べた見本
左の見本では枠線が背景に溶け込み、どこに入力すればよいのかが分かりにくくなっています。
右の見本では枠線と背景に十分な明るさの差があり、入力欄の範囲がひと目で分かります。
淡い色の区切り線のように、操作や理解に関係しない飾りの線は、この基準の対象外です。
色だけで情報を伝えない(達成基準1.4.1)
3つめは、色の違いだけで情報を伝えず、文字・記号・形などの手がかりを必ず添えるという基準です(達成基準1.4.1)。
たとえば、グラフの系列を赤と緑だけで塗り分けると、赤と緑を見分けにくい人には、どちらがどの系列なのか分からなくなります。
今年 昨年
NG:明るさの近い赤と緑を、色だけで区別
今年 昨年
OK:明るさの違う青と橙にし、棒にもラベルを付けた
同じ棒グラフを、配色と手がかりを変えて並べた見本
左の見本の赤と緑は、明るさの差もほとんどなく(約1.4:1)、色覚特性のある人や白黒印刷では区別がつきません。
右の見本では、混同されにくい青系と黄色系の組み合わせにして明るさの差もつけ、さらに棒そのものにラベルを付けて、色が分からなくても読み取れるようにしています。
グラフ以外でも、考え方は同じです。身近な部品では、次のように色以外の手がかりを添えます。
- 入力エラー:欄を赤くするだけでなく、注意のアイコンと「メールアドレスの形式が正しくありません」のような文章を添える
- 必須項目:ラベルを赤くするだけでなく、「必須」の文字を添える
- 本文中のリンク:文字色を変えるだけでなく、下線を引く
場面ごとの改善例は色だけに頼らないデザインとは?で詳しく解説しています。
色のアクセシビリティを確かめる方法
自分の目だけでは、ほかの人にどう見えているかは分かりません。
ここでは、無料で使える確認方法を3つ紹介します。
ツールの操作に慣れていない場合は、スマートフォンで画面を白黒にして見るだけの「方法3」から始めても構いません。
方法1:Chromeのデベロッパーツールで色覚をシミュレーションする
Webページの見え方を確かめるなら、ブラウザのGoogle Chromeに標準で入っている「デベロッパーツール」(開発者向けの調査機能)が手軽です。
「Rendering」タブの「Emulate vision deficiencies」という項目で、表示中のページを色覚特性などのシミュレーションに切り替えられます(Chrome公式ドキュメント、英語)。
開くとコードが並んだ画面が出てきますが、見え方を一時的に切り替えるだけで、ページやパソコンの設定を書き換えるわけではありません。デベロッパーツールを閉じるか、ページを再読み込みすれば元に戻ります。
- 確かめたいページをChromeで開き、デベロッパーツールを開きます(Windowsは
F12、MacはCommand + Option + I)。 - コマンドメニュー(Windowsは
Ctrl + Shift + P、MacはCommand + Shift + P)を開き、「rendering」と入力して「Show Rendering」を選びます。 - 表示された「Rendering」タブの「Emulate vision deficiencies」から、見え方を選びます。
ショートカットキーが苦手な場合は、デベロッパーツールの右上にある「︙」(縦に3つの点)のメニューから「More tools」(その他のツール)→「Rendering」(レンダリング)を選んでも、同じタブを開けます。Chromeの表示言語が日本語の場合は、タブや項目の名前も日本語で表示されることがあります。
選べる見え方は次のとおりです。
| 項目名 | シミュレーションされる見え方 |
|---|---|
| Protanopia | 赤を感じにくい見え方(1型・P型) |
| Deuteranopia | 緑を感じにくい見え方(2型・D型) |
| Tritanopia | 青を感じにくい見え方(3型・T型) |
| Achromatopsia | 色がない見え方(白黒での確認にも使える) |
| Blurred vision | ぼやけた見え方 |
| Reduced contrast | 明暗の差が弱まった見え方 |
まずは「Protanopia」と「Deuteranopia」に切り替えて、ボタンやグラフ、エラー表示が見分けられるかを確かめるのがおすすめです。
方法2:Adobe Colorで配色案をシミュレーションする
ページを作る前の配色案の段階なら、アドビの無料の配色ツールAdobe Colorにある「色覚シミュレーターとセーフパレットツール」が便利です(2026年10月時点ではAdobe Expressの名前で提供されています)。
名前が2つあって紛らわしいですが、Adobe ColorとAdobe Expressのどちらで呼ばれていても同じツールです。上のリンクから直接開けるので、検索しなくても使えます。
選んだ色の組み合わせが、代表的な色覚タイプでどう見えるかをシミュレーションし、見分けにくい色の組み合わせがあれば知らせてくれます。
同じサイトには、文字と背景のコントラスト比を測る「コントラストチェッカー」もあります。
Adobe Colorの基本的な使い方は、配色の基本とは?で紹介しています。
方法3:白黒にして、コントラスト比を測る
シミュレーターがなくても、画面を白黒にして見るだけで、明るさの差が足りない箇所が分かります。
たとえばiPhoneなら、スクリーンショットを撮って「写真」アプリの編集画面でフィルタの「モノ」を選ぶだけで確かめられます。
画面全体をモノクロにしたいときは、「設定」の「アクセシビリティ」→「画面表示とテキストサイズ」→「カラーフィルタ」で「グレイスケール」を選ぶ方法もあります。
白黒で区別できる配色なら、色覚特性のある人にも、白黒印刷でも情報が伝わりやすくなります。
そのうえで、文字は4.5:1以上(大きな文字は3:1以上)、ボタンの枠などは3:1以上になっているかを、コントラストチェッカーで数値として確かめましょう。
なお、シミュレーションはあくまで目安で、実際の見え方はタイプや程度によって人それぞれです。
シミュレーションで見分けられたからと安心せず、色以外の手がかりも添えておくのが確実です。
実践のポイント
色のアクセシビリティに取り組むときに陥りやすい失敗と、よくある疑問をまとめます。
注意点・よくある間違い
- 文字のコントラスト比だけを確かめて、入力欄の枠やアイコン、グラフの色が背景に埋もれていることに気づかないことがあります。
文字以外の部品も3:1以上を目安に確かめましょう。 - 「赤と緑は避ければ大丈夫」と考え、ほかの組み合わせを確かめないことがあります。
緑と茶、青と紫、ピンクと灰色なども混同されやすいため、シミュレーションで確かめましょう。 - 色覚特性に配慮しようとして、使える色を極端に減らしてしまうことがあります。
色を使うこと自体は問題なく、明るさの差をつけ、色以外の手がかりを添えれば、色の豊かさは保てます。
よくある質問
- Q. 赤と緑は、絶対に一緒に使ってはいけない?
A. 一緒に使うこと自体は問題ありません。
明るさに十分な差をつけ、文字やアイコンなど色以外の手がかりを添えれば、色の違いが分からなくても情報は伝わります。 - Q. 色覚特性のある人にも見分けやすい色の組み合わせは?
A. 日本眼科医会の解説では、1型・2型の人は青系の色と黄色系の色を混同しないとされています。
そのため、2つの系列を区別したいときは、青系と黄色・橙系の組み合わせにし、さらに明るさの差もつけると見分けやすくなります。 - Q. 色のアクセシビリティは、どこから手を付ければいい?
A. まずは本文の文字色と背景色のコントラスト比を測り、次にボタン・入力欄・エラー表示が色だけに頼っていないかを確かめる順番がおすすめです。
影響の大きい部分から直していきましょう。
まとめ
色のアクセシビリティとは、色の見え方が人によって違っても、誰もが内容を読み取り、操作できるように配色する考え方です。
生まれつきの色覚の違いは日本人男性の約20人に1人に見られ、強い日差しや白黒印刷など、誰にでも色が見分けにくくなる場面があります。
文字のコントラスト比(1.4.3)、文字以外のコントラスト(1.4.11)、色だけに頼らない(1.4.1)の3つを押さえ、シミュレーションと数値で確かめるのが基本です。
まずは自分のサイトをChromeで開き、デベロッパーツールで「Deuteranopia」に切り替えて、ボタンやグラフが見分けられるかを確かめてみましょう。
