このマークに関してはここをクリック!
色盲の人にもわかるバリアフリープレゼンテーション法
http://www.nig.ac.jp/color/gen/
どちらも強度第1色盲の
岡部正隆
東京慈恵会医科大学DNA医学研究所
伊藤啓
東京大学分子細胞生物学研究所
Last update: 2005.2.21
更新情報
● なぜ「色覚異常」「色覚障
害」「色弱」などでなく「色盲」という言葉を使うのか?
http://www.nig.ac.jp/color/mou.html
● 医学生物学領域の方
はこちらもどうぞ
http://www.nig.ac.jp/color/bio
● 「ユニバーザルデザ
インにおける色覚バリアフリーへの提言」PDF版のダウンロード(2.5MB)
http://www.nig.ac.jp/color/handout1.pdf
ご注意:PDF版を読むためにはAdobe Acrobat
Readerが必要です。ダウンロード→
・ユニバーサルデザインにおける色覚バリアフリーへの提言
・色盲とは
・色盲の人にはどのように色が見えるのか?
・日常見かける見にくい色遣い
・白内障の人も色覚に関する不便を感じている
・色だけで情報を伝えず、形や文字で「冗長性」を加えたプ
レゼンテーションのデザイン
・配色の工夫
・発光ダイオードやレーザーなどの光源
色における問題点とその対策
・色盲の人にも色盲
でない人にも見やすい色のセット
・色盲シミュレーションソフトの紹介
・緑のレーザーポインターの紹介
・色覚バリアフリー関連リンク
・バリアフリーのまとめと、その他の注意点
・おわりに
ユニバーサルデザインにおける色覚バリアフリーへの提言
平成12年版総務省編『障害者白書』によると、各種の障害を持つ人の数は下記のようになっています。
「色覚障害」とも呼ばれる「色盲」は黄色人種では男性の20人に1人(5%)、女性の500人に1人
(0.2%)に見られます(白人では男性の8%、黒人では男性の4%)。上記調査同時期の日本人男性は6,111万人、女性は6,359万人(平成8年
10月現在)ですから、色盲の人は約318万人となり、身体障害者の総計を越える数となっています。色盲は世界的にはAB型の血液型の頻度に匹敵し、極め
てありふれた存在なのです。小中学校の40人学級(男子20人)の各クラスに必ず1人、男女100人の講演会場では、2〜3人の色盲の聴衆がいるという計
算になります。社会的な差別や偏見といった過去の経緯から自分が色盲であることを隠す人が多いことや、色盲であっても実際にはかなりの色を不自由なく見分
けられることから、これまで色盲の人が色に関する不便を積極的に訴えることは少なかったと言えます。そのため、色盲がこのようにありふれた現象であるにも
かかわらず、バリアフリー対策の対象となっている他の障害に比べ、色覚に関するバリアフリー対策の意識は高いとは言えません。印刷技術の発達やインター
ネットの普及で、我々の身近なところで色の違いによって重要な情報を判断しなければならない機会が急激に増えてきています。学術研究発表の場では十分な議
論を行なうためにさまざまな情報を正確に伝達することが求められ、商業デザインの場では商品やサービスの情報がより多くの人に確実に伝わることが求められ
ています。そのような立場の方々に色覚バリアフリーについて理解と共感をいただき、誰にでもわかりやすいユニバーサルな色彩表現が広まっていくことを望ん
でおります。
目次に戻る
人間の目の網膜には3種類の錐体細胞があり、それぞれ赤、緑、青を感じる視物質を持っています(図1)。このうちどれかの機能が損なわれた状態が色盲で
す。
図1 眼の構造
1種類の錐体細胞が失われたり(いわゆる色盲)、3種類のうちの1種類の感度曲線がずれて他のと近づいてしまったりすると(いわゆる色弱)、残った錐体
細胞の出力の差を利用して大半の色は見分けることができますが、特定の範囲の色については差を感じにくくなります(図2)。
色盲の人の大多数は、赤感受性の視物質の遺伝子に変異を生じた「第1色盲」(色盲全体の約25%)か、緑感受性の視物質の遺伝子に変異を生じた「第2色
盲」(色盲全体の約75%)です。赤と緑の視物質は感度曲線の重複が大きいのでどちらが失われても似た症状になりますので、赤〜緑の波長域で色の差を感じ
にくくなるため「赤緑色盲」と総称されています。また赤と緑の視物質遺伝子はどちらもX染色体に載っているため伴性劣性遺伝の遺伝形式となり、症状は圧倒
的に男性に多くなります。
図2 色盲のメカニズムと各種色盲の頻度
青感受性の視物質の遺伝子に変異を生じた「第3色盲」は色盲全体の約0.02%と希で、黄〜青の波長域で色の差を感じにくくなるため「青黄色盲」と呼ば
れています。
2つ以上の視物質に変異を生じた人も存在し、そのような場合は色を見分けることができないので、「全色盲」と呼ばれています。「全色盲」も「第3色盲」
同様に希です。
色盲の人にはどのように色が見
えるのか?
図3 光のス
ペクトルと強度色盲のシミュレーション
■大多数を占める赤緑色盲(第1色盲、第2色盲)の特徴
・赤〜緑の波長域において、明度が類似した色の見分けが困難になっています。図3の、黒い実線から右(長波長)側の「赤〜緑の領域」で、色の差が小さく
なっています。この範囲では点線を中心に左右の色がほぼ対称に見えていて、「赤と緑」「黄緑と黄色」の差が特に小さくなっています。
・さらに第1色盲では、最も長波長側の視物質に変異があるため、赤が暗く感じられます。そのため「濃い赤」はほとんど「黒」に見えます。
・第2色盲では、まん中の波長域の視物質に変異がありますが、この波長域は赤と青の視物質でもカバーされるため、緑が暗く感じられることはありません。
図4 赤緑色盲の人が特に区別の困難な色の組み合わせ
・ある色と、それにRGBの赤成分または緑成分を足した色が区別しにくくなります。「紫と青」「緑と茶色」
「赤と茶色」など。
・彩度の高い色に比べ、彩度の低い色ではさらに識別が難しくなります。「水色とピンク」「灰色と淡い水色、薄緑」など。
・赤と緑の一方の視物質がない分だけ色の識別において青視物質に依存する度合いが高いため、青色への感度はむしろ高い面があります。赤と緑や黄色と黄緑は
ほとんど同じ色に見えるが、緑と青緑は全然違う色に見えます。
・色相(色あい)の見分けが苦手な分、明度や彩度の差にはむしろ敏感であり、同系色の明暗の識別には支障は少ないです。
・大半の色が区別できるため、区別できないところにさらに色分けがあるとは考えない傾向があります。そのため色分けに気付かないことがあります。
・色盲でない人の色覚に合わせて作られた「色名」(色のカテゴリー)に、色盲の人はうまく対応できません。そのため色名を使ったコミュニケーション
が困難になります。
例1:同じような色刺激に複数の色名が存在する場合→ 第1,第2色盲のシミュレーションの3段目と4段目。色盲の人にはほとんどの色が茶
色に見えていますが、色名には緑、赤、オレンジ、茶色などの分類が存在し、混乱の原因となります。
例2:まったく違って見える色に同じ色名が使われている場合→ 第1,第2色盲のシミュレーションの5段目と6段目。緑と青
緑は同じ色のカテゴリーに入れられていますが、色盲の人にはまったく違う色に見えています。同様に、黄緑と淡い青緑もまったく異なる色に見えているのに、
同じ緑のカテゴリーに分類されています。これもまた混乱の原因となります。
「この色は何色に見えるの?」と色盲の人に質問する方が多くいらっしゃいますが、いかに答えることが難しい質問であるかご
理解いただけたかと思います。
■青黄色盲(第3色盲)の場合
・色盲でない人は3つの視物質のうち赤と緑からの情報を重点的に色識別に利用していますので、青からの情報の比重は相対的に低くなっています。そのため青
視物質がない第3色盲の人の色の感じ方は、色盲でない人に比較的近くなります。しかし青と緑の区別が、色盲でない人よりもかなり難しくなります。
■全色盲の場合
・白黒画像になると同時に、著しい視力低下を伴う。
図5 色盲の人が見にくい掲示物
・図5左はホームページの例。「緑のバックに赤い文字」は、色盲でない人にはとても鮮やかに映える組み合わせですが、色盲の人にはほとんど見えません。
(ご注意:三島市のホームページはすでに改善されています)
・図5右は駅の案内表示。路線を色分けでシンボル表示していますが、明るい緑とオレンジ色は色盲の人にはよく区別できません。また、色名の認識を間違える
ことがあるので、「○○線は△△色です」というような案内が意味をなしていません。たとえば路線ごとに路線番号を決め、色丸の中に大きくその番号を表示す
ればバリアフリーになります。
図6 同じ色が、どの人にとっても見やすいわけではない
・色盲でない人には赤色が明るく目に飛び込み、青が沈んで見える傾向がありますが、特に第1色盲の人には逆に赤が沈み、青色が明るく目に飛び込んでくる傾
向があります。
・強調によく使われる赤字は、色盲の人には黒と区別が付きにくいので。明るい朱色を使うことが推奨されます。
・明朝体のような細い字の色は、特に見にくくなります。なるべくゴシック体のような太字の書体を使うことが推奨されます。
● いろいろな背景色と文字色の組み合わせと視認性に関しては、たなか氏の「カラーバリア
フリー案内」のページを御覧ください。→ http://homepage3.nifty.com/ondo/cbfg-ver101/cf/ank/ank_fr.htm
図7 全ての色には一定の幅がある。同じ色でも、微妙な色合いの差で分かりやすさが変わる
・同じ緑でも抹茶のような暖色系の(青みを全く含まない)緑は、いくら鮮やかな緑でも色盲の人には茶色と区別がつきません。
・高速道路の案内表示板の緑は、青みを強く、また明るめにすることで、他の表示の色と間違えにくいよう配慮されています。
★ 同じ色の中でも、同時に使っている他の色となるべく間違えにくいような色合いを
選ぶよう心がける。
★ 色盲でない人には間違えようがないと思えるような鮮やかな色でも、色盲の人には他の色
と混乱し、正しい色名が認識できない場合がある。「色を見せれば相手はその色の名前が分かる」と仮定しないことが大切。
図8 学術分野での見にくい色遣い
共焦点レーザー顕微鏡(上段)とDNAアレイ(下段)の画像
・生物学の分野では2種類のデジタル情報を赤と緑で同時に表示する慣例があります。赤と緑が重なると黄色になります。
・第1・第2色盲の人では黄色と緑の部分の区別が難しく、さらに「第1色盲の人」では赤の部分が視認しづらくなります。
・「赤と緑」でなく、「マゼンタ(赤紫)と緑」に変えるだけで(一番右の図)、重なった部分は区別しやすい白になり、色盲の人にも色盲でない人にも分かり
やすい画像になります。
● 「赤と緑」から「マゼンタ(赤紫)と緑」への変換は非常に簡単です。こちらをご
覧ください
http://www.nig.ac.jp/color/bio/index.html#henkan
図9 白内障(後天色盲の一例)のシミュレーション
・高齢者に多い白内障では、水晶体の混濁着色のため、すりガラス越しに物をみているように全体に画像がぼやけてきます。
・同時に水晶体の中で短波長の光が吸収されてしまうので、見ている世界が段々黄色、茶色、赤みがかってきます。
色だけで情報を伝えず、形や文字で「冗長性」を加えたプレゼンテーションのデザイン
最も大切なことは、読者や聴衆に、区別が必要な情報を色だけに頼って識別することを強制しないことです。「色なしでも理解できるようにデザインし、その上で強調のために副次的に色を添える」これが基本になりま
す。色彩光学の立場からは、図版の色を支障なく瞬時に識別できるのは、色盲でない人でも 4色から、せいぜい
6色までだと言われています。色だけに頼らず、色以外の情報を必ず付加することで、色盲の人にも判別でき、色盲でない人にもさらにわかりやすい図版を作る
ことができます。このように色とそれ以外の要素を組み合わせて使うことを、情報を「冗長的に
(redundant)」表現すると言います。
図10 線の色分
け
・シンボルは、同一形状で色だけを変えるのでなく、形を変化させます。
・線を区別させるときは、色の違う実線同士でなく、実線、点線、波線を色と組み合わせます。
・色情報を載せる線は太くデザインします。
・凡例を独立させて色だけで照合させるのでなく、何を示すかを図中に直接記入します。(スペースがない場合は、通し番号や略号でもよい)
図11 塗り分け
・塗りには、色だけでなくハッチングを併用します。
・凡例を独立させて色だけで照合させるのでなく、何を示すかを図中に直接記入します。
・色の境目に細い黒線や白線を入れ、塗りの違いをはっきり示します。
配色の工夫
図12 同じ明るさで色相
を変えるのでなく、同じ色相で明るさを変える
・色盲の人は色相の見分けが苦手な分、明度や彩度の差にはむしろ敏感です。たとえば地図の段彩のようなパターンは、同じ明るさで緑→黄緑→黄色→オレンジ
のように色相だけ変えてあると差を見分けるのが困難ですが(左)、同じ色相で明るい緑→緑→暗い緑のように明るさを変えてあれば(右)、容易に区別できま
す。
註:人間の眼は明るさを対数的に感じますので、明度を指定するときは値が等差数列(例:10, 20, 30, 40, 50, 60,
70%)でなく等比数列(例:10, 14.1, 20, 28.2,
40, 56.4, 80%)になるようにします。
目次に戻る
発光ダイオードやレーザーなどの光源色における問題点とその対策
図13 区別が困難な,赤/緑,オレンジ/緑の2色発光ダイオード
A:ノート型パソコンの電源アダプターのパイロットランプ
・上段のパソコンは充電中でオレンジの発光ダイオード(LED)が点灯しています。下段のパソコンは充電が完了し緑のLEDが点灯しています。赤緑色盲の
人には充電の状態がわかりません。
B:ヒーターのパイロットランプ
・上段は加熱ヒーターがオフの状態で緑のLEDが点灯。下段は加熱ヒーターがオンで赤のLEDが点灯。同じランプの色が変わるのでは、赤緑色盲の人には違
いが分かりません。
・ヒーターのオンオフをランプの点灯消灯で区別するか、別のランプを点灯させるように設計すれば、色盲の人にも情報が伝わります。
図14 各色覚特性の波長
別比視感度と、発光ダイオードやレーザーポインターの使用波長
・第1色盲では長波長側から可視光線領域が狭くなっているため、長波長の赤の(高輝度赤)発光ダイオード(LED)の光が見えません。これが原因で電光掲
示板の文字が読めないことがあります。
・緑のLEDは、短波長のものは色の見分けがつきやすいですが、長波長のものは赤緑色盲の人には赤、オレンジ、黄色、黄緑のLEDと全く区別がつきませ
ん。これらの色のLEDを組み合わせても、1色にしか見えないので、これらの組み合わせの色の違いで情報を伝えるようなデザインは絶対避けた方がよいと言
えます。
・青のLEDは色盲の人にはどれも明るく見やすいですが、色盲でない人には短波長の青は暗くしか見えません。
・赤いレーザーポインターも種類によってはほとんど見えません。
・緑のレーザーの比視感度のピークに位置し、どんな人にも見やすいと言えます。(ただし色盲の人には黄色と区別がつきません。)
図15 色盲の人にも色盲でない人にも見やすい色のセットの提案
1: 色盲の人にも色盲でない人にも見分けやすく、2:
色名が同定しやすいようなはっきりした色で、3: 画面でも印刷でも同じように表示できる色のセット
・赤は,第1色盲の人に見やすいように朱赤にしました。
・黄色と緑の間の黄緑系統の色は、赤緑色盲の人には黄色やオレンジと見分けがつかないのでぜんぶ避けました。
・緑は赤や茶色と間違えないよう、青みの強いものを選びました。
・紫は青に近いと区別ができないので、赤に寄ったものを選びました。
・朱赤から黄色の間では、見た目の明るさが違う3色(赤、オレンジ、黄色)を配分しました。
・青系では、見た目の明るさが違う水色と青を配分しました。
図15右上:商業印刷を重視した画像ソフトでのCMYKやRGBによる色指定と、画面表示やプリンターでの印刷を重視した画像ソフトでのRGBによる色指
定の例。キリのいい数字になるよう調整してあります。RGBとCMYKの値の関係はパソコンの機種やOS、使用ソフト、画像の色管理情報(プロファイル)
の種類等によってかなり変化するので、この図の値はあくまで参考です。
・ただし水色と黄色は,細い線や小さな文字では見分けにくくなります。折れ線グラフなど小面積の塗り分けでは水色のかわりに青色を優先して用い、黄色もな
るべく避けます。
図16 見やすい色の組み合わせ
A:赤と緑の間や,青と紫の間で色を選ぶと,色盲の人には違いが分かりにくくなります。
B:かならず赤〜緑(暖色系)と緑〜青(寒色系)のそれぞれの側から交互に選ぶようにします。
・赤と緑、黄色と黄緑は見分けにくい組み合わせです。
・暖色と寒色であっても,同じような明るさの色が並ぶと見づらくなります。明度差も与えます。
・色合い(色相)だけでなく見た目の明るさを大きく変化させます。3色以上なら明るい色、中間の色、暗い色を組み合わせます。
・彩度の低い色どうしの組み合わせは避けます。原色どうしや、パステルカラーと原色の対比はよいのですが、パステルカラーどうしは避けます。
註:なおここで言う明るさとは「目にうつる明るさ」のことです。たとえば緑色は赤色より倍近い視感度があるので、R, G, B= 0%, 50%,
0%の緑は、R, G, B= 100%, 0%, 0% の赤とほぼ同じ明るさに見えます。R, G, B= 0%, 100%,
0%の緑は、この赤よりもはるかに明るくなります。
色盲シミュレーションソフトの紹介
皆さんの作成した図版(カラフルなグラフ
や絵)や写真が色盲の人にどう見えるかを簡単にチェックすることができます。フリーウェア「ImageJ」とやはりフリーウェア「Vischeck
ImageJ Plug-In」を組み合わせると、 Windows、 Macintosh、
Linuxなど多彩な環境で色盲シミュレーションが行えます。是非、御活用ください。
● ImageJ のダウンロード
http://rsb.info.nih.gov/ij/
● VischeckJ 1.0 (Vischeck ImageJ Plug-In)
のダウンロード
http://www.vischeck.com/downloads/
New!!!
インストールの方法と簡単な使用方法はこちら
http://www.nig.ac.jp/color/install_vischeck.html
● Vischeck のデモンストレーションサイト
(適当なイメージファイルを選択してアップロードすると変換して返送してくれます)
http://vischeck.com/vischeck/vischeckImage.php
このサイトの使用方法を日本語で紹介(高原太郎氏のホームページ)
http://teleradiology.jp/MRI/04_tips/Vischeck/index.html
● Windows版 Adobe Photoshop用の
Vischeck Plug-In のダウンロード
http://www.vischeck.com/downloads/
● Colorfield Insight:MacのAdobe
photoshop上で色盲の見え具合をシミュレートするソフト
http://www.colorfield.com/index.html
目次に戻る
緑のレーザーポインターの紹介
色盲の人は赤いレーザーポインターが見えないことがあります。最近普及が始まった緑のレーザーポインターは、色盲の人にも色
盲でない人にもよく見えます。出力1mWのモデルが扱いやすいようです。5mWモデルは眩しすぎるという指摘があります。
緑のレーザーポインターに関するレポート(高原太郎氏のホームページ)
http://teleradiology.jp/MRI/06_goods/products.html
● 国産品(株)高知豊中技研(TEL:0887-59-4138)
http://ktg-inc.jp/GreenLaser/PointerTOP/PointerTOP.htm
高知豊中技研のグリーンレーザーポインターは「消費生活用製品安全法」認可製
品です。
● 輸入品 DeHarpporte Trading Company
http://store.yahoo.com/deharpport/greenlaspoin.html
(輸入代行:(株)エル・エム・エス 担当:藤田様 TEL:03-5842-4161
● 国産品(有)ブロードバンド(TEL:03-5838-0082)
http://www.bblaser.com
色覚バリアフリー関連リンク
● 「色覚に障害を持っていたとしたら、あなたのサイトは見えるで
しょうか?」 Microsoft社のページ
http://www.microsoft.com/japan/msdn/columns/hess/hess10092000.asp
● 「いろいろな背景色と文字色の組み合わせと、その視認性に関し
て」「カラーバリアフリー案内」のページ
http://homepage3.nifty.com/ondo/cbfg-ver101/cf/ank/ank_fr.htm
目次に戻る
バリアフリーのまとめと、その
ほかの注意点
おわりに
色盲の人に分かりやすい(バリアフリー)色遣いは、色盲でない人にも分かりやすい(ユニバーサル)色遣いでもあります。他のバリアフリー対策に比
べ、色覚バリアフリーは配色にわずかな気配りをするだけで、追加のコストをいっさいかけずに達成できます。この大きな特長を有効に活用し、すべての人に見
やすい、ユニバーサルなプレゼンテーションが心がけられていくことを期待しております。
このページへの御意見、御質問は、岡部(maokabe@jikei.ac.jp)ま
でお願いします。