色覚バリアフリーマーク
このマークに関してはここをクリック!


医学生物学者向き

色盲の人にもわかるバリアフリープレゼンテーション法
http://www.nig.ac.jp/color/bio

どちらも強度第1色盲の

岡部正隆

国立遺伝学研究所/ロンドン大学キングスカレッジ

伊藤啓

東京大学分子細胞生物学研究所

Last update: 2003.10.5

更新情報


   なぜ「色覚異常」「色覚障害」「色弱」などでなく「色盲」という言葉を使うのか?
     http://www.nig.ac.jp/color/mou.html

   皆さんの図版が色盲の人にはどう見えてしまうか、シミュレーション出来ます!(Vischeck)
     http://vischeck.com/vischeck/vischeckImage.php



色覚バリアフリープレゼンテーションにおける重要なポイント


 ● 2重染色やDNAチップの画像は、緑と赤でなく、緑と赤紫(マゼンタ)で表示する(具体例)。

  3重以上の染色は、全色の重ね合わせだけでなく重要な2色だけの組み合わせも緑と赤紫で表示する。(あるいは各チャンネルの図を別々に表示する。)

  グラフや解説図では、離れた2カ所の色を照合するのが非常に難しいので、色分けされた各項目の内容を別に凡例で示すのでなく、図中に直接書き込む。また各項目は、色だけでなく線種やシンボル、ハッチングでも区別する(具体例)。

  赤は鮮やかな明るい色に見えないので、暗い背景に赤い文字を使わない(具体例)。




  目 次

   はじめに               

   色盲の人にはどんなふうに見えているの?

   図版作成上の心得           

     ・ 具体的にどのような色使いをしたらよいか   
     ・ 蛍光顕微鏡やDNAチップなどデジタル情報の提示
     ・ 色盲シミュレーションソフトの紹介      

   講演における心得           

     ・ 緑のレーザーポインターの紹介     

   リンク                


はじめに

 日本人男性の5%(約300万人)、白人男性の約8%は、赤や緑の混じった特定の範囲の色について、差を感じにくという視覚特性を持っています。これはこれまで「赤緑色盲、赤緑色弱」もしくは単に「色盲」「色弱」と呼ばれていたものですが、このホームページでは「色盲」という言葉に統一して記します(色盲という言葉を選んだ理由については、ここをご覧下さい)。その頻度はAB型の血液型の人よりも多いくらいで(AB型は日本人で10%、アメリカだと3%)、いかに多くの人が色盲であるかがわかるかと思います。最近はカラーのスライドによるプレゼンテーションや学術雑誌のカラー図版も増加し、使用している色そのものに重要な情報が含まれているケースが多くなりました。色盲の聴衆や読者は皆さんのプレゼンテーションを十分に理解することができているのでしょうか。色盲の人にも十分情報を理解してもらえるためには、どのような色使いが適当でどのような工夫が必要であるかについて御紹介します。是非、皆さんのプレゼンテーションを見直してみてください。みなさんの論文を査読するレフェリーも、色盲かもしれませんよ。

*仮に白人男性3人がレフリーだと仮定します。色盲でない人がレフリーである確率は、1-0.08=0.92 で92%です。3人とも色盲でない確率はその3乗ですから、0.78で78% になります。つまり、色盲のレフリーに審査される可能性はなんと22%!!

目次に戻る

色盲の人にはどんなふうに見えているの?
 
■■ 赤緑色盲の人が見分けにくい色は? ■■

 色盲の人の大多数は、赤もしくは緑感受性錐体細胞の視物質遺伝子に変異を生じた「赤緑色盲」(第1色盲・色弱、第2色盲・色弱)です。赤と緑の錐体細胞は受光スペクトルの重複が大きいので、どちらかが機能しなくても残った緑と青、あるいは赤と青の錐体細胞を使って、大抵の色は見分けることが出来ますしかし赤〜緑の波長域、つまり赤、橙、黄、黄緑、緑の色域では、感じられる色の差が小さくなってしまいます(図1、2参照)。具体的に見分けにくい色の例を挙げると、明るさや鮮やかさが類似した「赤と緑」「橙と黄緑」、波長が近接した「赤と橙」「緑と黄緑」「黄緑と黄色」、さらに「紫と青」など、ある色とそれに赤や緑を足した色を区別するのが難しくなります。また、鮮やかさが低くなると識別困難な組み合わせが増え、「緑と茶色」「赤と茶色」「緑と黒〜灰色」「赤と黒」「ピンクや水色と白〜灰色」でも区別が難しくなります。さらに第1色盲では、最も長波長側の視物質遺伝子に変異があるため、この領域の色が暗く感じられます。そのため「濃い赤」はほとんど「黒」に見えます(図1、6、7参照)。

 
■■ 青黄色盲について ■■

 青感受性の錐体細胞の視物質遺伝子に変異を生じた青黄色盲(第3色盲・色弱)は、赤緑色盲(第1色盲、第2色盲)の人が共通して色認識に活用している青の錐体細胞が無いため、赤緑色盲の人が見やすい色の区別が、逆に第3色盲の人には見分けにくいと言うことも起こります。ただし第3色盲の発生頻度は約0.001%と、赤緑色盲に比べ非常に希です。

 
色盲シミュレーション

*本ページのシミュレーション画像はすべてVischeckを使って作成しました。
 本ページのシミュレーション画像は、すべて強度の色盲のものを掲示しています。強度の色盲の人は色盲の約20%を占めています。残りの約80%は軽度の色盲であり、色の見え方はシミュレーション画像と元画像の中間になります。色盲の人の色の見え方は非常に多様で個人差が大きく、色盲でない人とほとんど変わらない場合もあります。
 バリアフリーの観点からすれば強度の人に対応できれば、すべての人に見やすさが保証されると考えております。趣旨を御理解ください。

図1 <色見本と色盲シミュレーション>

第1〜3色盲シミュレーション

【図1の説明】
「色盲でない人」と「第1、第2色盲の人」と比較してみてください。
赤〜緑の領域で色の差が小さくなっています。
また「第1色盲の人」では濃い赤がほとんど黒になっているのがわかります。
 
図2 <図1の左半分を切り出したもの>

緑〜赤シミュレーション

【図2の説明】
「第1、第2色盲の人」では、黒線を境に左右の色(赤と緑)が対称的です。
左右の色(赤〜緑)の区別が困難であることがわかります。
 
図3 <図1の右3分の2を切り出したもの>

寒色暖色シミュレーション
 
【図3の説明】青緑を境にして左右の色では、「色盲の人」も「色盲でない人」と同様に区別がつきやすいことがわかります。
 
図4 <共焦点レーザー顕微鏡とDNAチップの画像>

蛍光染色のシミュレーション

【図4の説明】
生物学の分野では2種類のデジタル情報を緑と赤で同時に表示する慣例があります。
赤と緑が重なると黄色になります。
「第1、第2色盲の人」では黄色と緑の部分の区別が難しくなります。
さらに「第1色盲の人」では赤の部分が視認しずらくなります。
目次に戻る


図版作成上の心得 −全ての色覚タイプへの対応−

 上記のような多様な色覚に対応した図版を作成するためにはどのような配慮が必要なのでしょうか。

 2つ以上の視物質に変異があるために色を全く認識できない全色盲の人を含め、全ての色覚タイプに対応できるようにするためには、可能な限り、色だけで判断させるのでなく、図の形(○だけでなく○□△×などを組み合わせる)、塗りの濃さ(明度)や塗り方(さまざまなハッチングの利用)、線の太さや形状(実線と点線)などを変化させたり、文字情報を添えるなど、色以外の情報だけでも判断できるようにする必要があります。これにより全ての人に理解しやすいバリアフリーな(ユニバーサルな)デザインにすることができます。

色覚バリアフリーなグラフの例
(提供 橋本知子)
バリアフリーなグラフの例


 このグラフはそれぞれの線を瞬時に色で判別できるだけでなく、色以外の情報が併用されており、色覚バリアフリー化されています。
1)各線の形状が異なっており、例えこれらの色が区別できなくても線の形状でも判断することができます。
2)グラフ上の各ポイントを異なる形状の図形で示しています(○だけでなく○□△を組み合わせています)
3)凡例が直接グラフ書き込まれており、凡例と照らしあわせる必要がありません(色盲の人は凡例を照らしあわせるのに困難を感じることが多いのです)。
4)白黒でコピーを撮ったときも十分に情報が伝わります。

 色で表現するしか方法がない場合には、すべてのタイプの色覚に対応した表現方法の開発は極めて困難です。実用上、第3色盲の人に配慮しつつも、大多数を占める赤緑色盲への対応を優先することになりますが、限られた種類の色を区別させるのであれば、使用する色を工夫することで全てのタイプの色盲に対応が可能です。例えば、我々は赤と緑の色の組み合わせのかわりに、赤紫と緑の組み合わせを使うよう提唱しています下記参照赤紫は赤と青の両方を含んだ色ですので、この組み合わせなら、赤緑色盲の人だけでなく、第3色盲の人にも容易に見分けることができます。もし赤と緑のかわりに、青と緑の組み合わせにしてしまうと、第3色盲の人には見分けにくくなってしまいます。 

目次に戻る


具体的にどのような色使いをしたらよいか  

大原則として、色以外の情報を併用する必要があります。上記のバリアフリーなグラフを参照>

 色以外の情報を併用することによって、例え白黒のコピーをとっても、 FAXで図版を転送しても、正確に情報が伝わるようになっていれば、色覚バリアフリーな図版になっていると言えます。しかし、これは色を使わないようにするということではありません。色の利用は瞬時に物事を判断する上で有効な手段です。適切な色を添えることによって、すべての人にわかりやすい図版を作ることができます。

 色覚バリアフリーなプレゼンテーションを準備する上で重要なポイントは以下の2点です。

1)書いてあるもの自体が容易に視認できないことを避ける。
背景色と図形や文字の色の間で明度の差が少ない、もしくは色盲の人に区別できない色の組み合わせになっている)

2)重要な情報を区別できないことを避ける。
(複数の情報が色の差だけで示されている)

 カラースライドやパワーポイントなどでのプレゼンテーションの場合、濃い青の背景に白や黄色の文字が推奨されています。しかしながら色の組み合わせはその限りではありません。この2点さえ守っていただければ、色盲の人も十分に情報を得ることができます。自由で創意に満ちた表現法と、色覚バリアフリーとを両立させてください。

 

●色の選び方について

 背景色と図形や文字の色の間には、大きく明度差をつけて下さい。明度が同じで色みが違うだけだと図や文字を認識できないことがあります。
例えば緑色の背景に同じ明度の赤い文字では、文字自体を読むことができません。暗い背景に明るい図形や文字、明るい背景に暗い図形や文字を用いるのか良いでしょう(赤の扱いに関しては以下を参照してください)。
 では、どのような色の組み合わせが色盲の人には見にくく、また見やすいのでしょうか。
いろいろな背景色と文字色の組み合わせと視認性に関してはこちらを御覧ください。( たなか氏の「カラーバリアフリー案内」のページ)
→ http://homepage3.nifty.com/ondo/cbfg-ver101/cf/ank/ank_fr.htm

●色盲の人が見分けやすい配色の条件

1)青緑色を境にして、赤色側と青色側の色を組み合わせる(図5B)。
2)赤色側同士あるいは青色側同士を組み合わせるときは、組み合わせる色同士の間にはっきりとした彩度差か明度差をつける。
3)彩度や明度の低い色同士の組み合わせは避ける。

図5 <色盲の人が見分けやすい配色


  配色の工夫


●図形や文字に色の載せるときの注意点

1)細い線や小さな図形など、色情報の面積が小さくなると、極端に色の識別が難しくなります。色情報を載せた線は太く、色情報を載せた図形は大きくする工夫が有効です。各種ハッチングを併用するとさらにわかりやすくなります。

2)フォントについても同じです。線が太いゴシック体Arial、Helveticaのボールド書体に比べ、線が細い明朝体やTimesでは文字色を見分けるのが困難です。

 


■■ 赤の扱いについて ■■

 第1色盲では長波長領域の光を感じることができないために、「濃い赤」をほとんど黒として認識しています。カラー図版を白黒のグレースケールに変換することにより明度の差を確認して、色盲の人にも識別できるかを判断する方がいらっしゃいますが、「濃い赤」の場合だけは白黒のグレースケールへの変換では確認できません。長波長領域の光を視認できないことが原因であるため、光の波長を視認できる短波長側に変更しなければ、明度を変えても暗いままなのです。
赤が暗く見えると以下のような困難が生じます。

1) 黒、緑、青などの暗い背景に赤色の文字や図形は、非常に読みにくくなります(図7参照)。
黒板上の赤いチョークで書かれた文字も非常に見にくくなるため、最近では色盲に対応した、より短波長領域の赤つまり「朱色」をしたチョークも販売されています(詳細はここ)。

2)黒い文字と赤い文字を見分けるのは困難です(図6参照)

 
この問題を解決するために以下の工夫が有効です。

 赤を使用する場合は「濃い赤」(#FF0000)を使わずに、より短波長側の「朱色」(例えば#FF2000)や、白を加えた「明るい赤」(例えば#FF1414)を使用すると黒と識別しやすくなり(図6参照)、暗い背景の中でも図形や文字を視認できるようになります
赤ボールペンの字と黒ボールペンの字を区別することは困難なのですが、朱色に近い赤の色鉛筆は黒と判別がつきます。これは、ボールペンの線が細く色面積が小さいために色の分解能が低いことと、赤ボールペンのインクの色が、朱色に近い赤鉛筆の色よりも、より長波長側にあるからです。

 図6 <赤を朱色にする効果>

赤と朱赤のシミュレーション
 
【図6の説明】
「濃い赤」の字は「第1色盲の人」にはほとんど黒に見えています。強調されては見えません。
暗い背景では文字が見えなくなってしまいます。
しかし、「朱色」であれば、第1色盲の人にも区別できることがわかります。
「色盲でない人」にはほとんど変化を感じさせずに「第1色盲の人」に対応させるようにすることができます。
目次に戻る



蛍光顕微鏡やDNAチップなどデジタル情報の表示

 共焦点レーザー顕微鏡やCCDカメラを利用した現代の写真撮影では、色を自由に選択してデジタル化した情報を表示することが出来るようになりました。単色の画像を赤や緑、青などカラーで掲示するのは、撮影に使った波長を示す意味しかありませんし、黒背景における赤の画像は第1色盲の人にはほとんど見えません(図7参照)。特に論文等の印刷物の場合には、カラー画像は白黒画像より階調再現性が遥かに悪く、明るい部分や暗い部分が潰れてしまい、せっかくの情報が有効に伝わりません。白黒のグレースケールで掲示することをお勧めします。

★ 「撮影に利用した色」にこだわらず、「プレゼンして相手に分かりやすい色」を優先させる必要があります。

★ 単染色の場合、赤の画像は第1色盲の人にはほとんど見えません。また青の画像は色盲でない人にも見にくいものです。白黒のグレースケールが最適です。

 図7 <赤で示した共焦点レーザー顕微鏡画像>

赤単色の蛍光染色のシミュレーション

【図7の説明】
黒の背景に赤い光で示した画像はこんなにも見にくくなってしまうのです
 

■■ 2チャンネル同時掲示の場合 ■■

 蛍光2重染色やDNAチップなど2つのチャンネルの情報を重ね合わせて掲示する場合、これまでは各チャンネルの情報を赤と緑で表現していました。これでは重なった部分の黄色を見分けることが困難です(図4参照)。赤の代わりにマゼンタ(鮮やかな赤紫)を用いた「マゼンタと緑」の組み合わせは、色盲の人にも理解しやすくなります(図8参照)。既存の赤緑画像のデータをマゼンタ緑画像へ変換するには、RGB表示における赤チャンネルの絵を青チャンネルにコピーするだけで簡単にできます。データを掲示する際には、全てのチャンネルを重ね合わせたカラー画像だけでなく、チャンネルごとのグレースケール画像も並べて掲示するとさらに分かりやすくなります。

★ 各チャンネルを重ね合わせた図は、2重染色の場合「赤と緑」だと、重なった部分の黄色が全く見分けられません(図4参照)。「マゼンタと緑」(重なった部分は白になる)で表示するのが、色盲の人にもそうでない人にも理解しやすくなります(図8参照)。

 図8 <共焦点レーザー顕微鏡とDNAチップの画像の改善>

マゼンタ緑画像

【図8の説明】
これなら色盲の人も色盲でない人も同じように情報を読み取ることができます
 

★ 赤緑画像からマゼンタ緑画像への変換は、Adobe photoshopで赤チャンネルの絵を青チャンネルにコピーするだけなので、簡単です。(下はMacintosh版での例です)   <注意点> マゼンタを指定する場合、赤チャンネルの情報と青チャンネルの情報が等価であることが重要です。

赤からマゼンタへの変換法

★ 3重以上の多重染色の場合も含め、各チャンネルを重ね合わせたカラー画像だけでなく、スペースに余裕がある限り、チャンネルごとの白黒グレースケール画像も同時に並べて提示しましょう(図9参照)。

 図9 <チャンネルごとに白黒グレースケール画像も掲示>

白黒画像とマゼンタ緑画像

【図9の説明】
重ね合わせたカラー画像だけでなく、各チャンネルのグレースケールの白黒画像も必ず掲示するようにします
目次に戻る


色盲シミュレーションソフトの紹介

 皆さんの作成した図版(カラフルなグラフや絵)や写真が色盲の人にどう見えるかを簡単にチェックすることができます。フリーウェア「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

目次に戻る



講演における心得

 これまでプレゼンテーションに用いる図版の作成について紹介してきましたが、講演する際には、以下の2点を念頭に置くことにより、色盲の聴衆を含めたすべての人に十分理解可能な講演を行なうことができます。

 

 ■■ 色名のみによる指示を避ける ■■

 色盲の人は、認識している色と一般に用いられている色名が一致しないことが原因で、発表を理解できないことがあります。この困難をさけるために、色名のみによる指示を避けることは重要です。「緑色は◯◯を示しています」と色名だけで説明せずに、ポインター等で緑色のオブジェクトを指し示しながら説明したり、「緑色の△△は◯◯を示す」と色情報以外の「△△」を表現すると、より判断しやすくなります。

 

 ■■ 赤いレーザーポインター ■■

 赤いレーザーポインターは長波長の光を使用しているために、色盲の人に見えないことがありましたが、最近では色盲でない人にも見やすく、色盲の人でも視認できる緑色のレーザーポインターが入手可能になりました(下記を御覧ください)。また、レーザーポインターを使わないでも、パワーポイントではマウスを用いたり、オーバーヘッドプロジェクター(OHP)ではOHPシート上でペンなどを用いて図の説明を行なうことにより、わかりやすく説明することができます。狭い会場では指示棒を用いることが可能で、これは極めて有効です。

目次に戻る

のレーザーポインターの紹介

 色盲の人は赤いレーザーポインターが見えないことがあります。最近普及が始まった緑のレーザーポインターは、色盲の人にも色盲でない人にもよく見えます。出力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

   輸入品 Beta Electronics, Inc.
     
http://www.betalaser.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@lab.nig.ac.jp)までお願いします。

トップページに戻る