私の研究対象 色覚の多様性と色覚バリアフリー −ユニバーサルデザインに要求される画像の条件− 伊藤 啓 東京大学 分子細胞生物学研究所 itokei@iam.u-tokyo.ac .jp http://www.nig.ac.jp/color/ ショウジョウバエの脳の 情報処理機構と 遺伝子の制御メカニズム 協力 岡部正隆（国立遺伝学研究所・ロンドン大学） 田中陽介（色覚バリアフリー推進委員会） 橋本知子（文化総合研究所） 眼科領域に関して 北原健二・大城戸真喜子（東京慈恵会医科大学） 色彩工学に関して 市原恭代 （宝仙人女子短期大学） 画像の提供 木村麻樹（文化総合研究所）・伊賀公一 バリアフリーロゴ 武者廣平（武者デザインプロジェクト） 研究によく出てくる画像 （色覚とは直接関係ない） １mm どのようにしたら色盲の人もそうでない人 にも見やすくなるか？ 赤と緑 神経標本の写真 培養細胞の写真 ＤＮＡチップの写真 コンピュータ処理した写真を、赤と緑の２色で表示することが多い 私にはどう見えるか？ 赤を使わず、赤紫 (赤＋青) と緑で２重染色を提示する 赤紫と緑 自然界の色は変えようがないが、コンピューターで作った色は見やすい ようにいくらでも変えられるはず。 → どう変えれば見やすいか？どういう図が誰にでも見やすいのか？ 赤紫と緑では、重なったところは白になる→区別しやすい 用語の話 色覚バリアフリーの取り組み ● コンピューター､ カラー印刷の進歩 （1994 ごろ 〜） ・見分けにくい色を自分の好きな色に変えられるようになった ・しかし、見分けにくい色が安易に使われる例も多くなった ● 色盲シミュレーション技術の登場 ・シミュレーションの理論 (1997) 、パソコン用のソフト (2001 春 ) ・色盲の人の色の見え方を、具体的に説明できるようになった ● 科学者向けのキャンペーン （2001 夏〜） ・試行錯誤で得たノウハウを、学会やホームページで同業者に紹介 ● 科学者の意識 ・自分の研究成果を、なるべく多くの人にちゃんと理解してほしい → バリアフリーなプレゼンテーションへの協力意識が高い ● デザイナー、出版関係者、メーカーへの広がり （2002 春〜） ・｢自分が伝えたい情報を、なるべく多くの人にちゃんと理解して ほしい｣ という点では、科学者と同じ → 予想を越える広がり ● 色盲 ➡ 差別語との認識がある。 ・新聞等では“色覚障害”が一般的（色盲は差別語という扱い） ・眼科領域では“色覚異常”が使われている ・患者にショックを与えないよう、 色盲なのに「色弱ですね」 と告げる眼科医もいる。 → 混乱のもと ・当事者からすると、むしろ不便なだけで「異常」や「障害」で はないという意識が強い。 ●本講演では「色盲･色弱」という表現を使う ・色盲：程度の強いもの ・色弱：程度が比較的弱いもの ・「盲」といっても、色が見えないわけではない。 （本当に全く色が見えない人は、「全色盲」と呼ぶ。） ●“色盲”にバリアフリー対応すれば“色弱”にも対応できる。 色覚バリアフリーが普及 ➡ 差別語としての語感も解消 言葉を言い替えるだけでは差別は解消しない。 1 色盲･色弱ってどれくらいあたりまえ？ ● 日本だと、男性の20人に1人(5%)は色盲か色弱 白人では12人に１人(8%)。フランスや北欧では10%以上。 アフリカでは2〜4%と少なめ。 ● 日本人男性6,111万人⇒色盲305万人 （ 20人に1人） 日本人女性6,359万人⇒色盲 13 万人 （500人に1人） 世界で約２億人、AB型の血液型の男性人数に匹敵 色盲･色弱の人はどこにでもいる ・小中学校の40人学級（男子20人）であれば各学級１人 ・100人の講演会場（男女半々）なら2、3人 ・議会や官公庁では100人に4、5人（まだまだ男性の方が多い） ・大手企業の20社に1社は社長が色盲･色弱（女性社長まだ少ない） ・1日1000人が利用する施設（男女半々）では25人が色盲･色弱 ■ ■ 色覚の仕組みと色盲･色弱の原理 色盲･色弱の人はどんな色が見にくいか？ ■ 色盲･色弱の人はどんな色が見やすいか？ ■ すべての人に見やすいデザインの工夫 ■ 色覚バリアフリーな色の選び方 ■ 地下鉄路線図の見やすさ調査 ■ 色覚バリアフリーデザインの具体的実現法 常に色盲･色弱の人がいることを前提にデザインする 人間の３つの錐体の分光特性 眼の光センサ：視細胞 赤錐体 (Ｌ錐体) のオプシン 各錐体の割合 黄緑〜赤の光を主に感じる 約60％ （吸収極大 558nm) 緑錐体 (Ｍ錐体) のオプシン 緑〜黄緑の光を主に感じる 約30％ （吸収極大 531nm) 青錐体 (Ｓ錐体) のオプシン 紫〜青 の光を主に感じる 10％以下 （吸収極大 419nm) ・赤錐体のオプシンと緑錐体のオプシンの特性の差は非常に小さい 杆体：２億個 錐体：700万個 ：暗い所で機能 １種類 ：明るい所で機能 ３種類（赤, 緑, 青） ・“赤”といっても吸収極大は黄緑 ・“赤”と“緑”は、もともと同じだったのが新しく分かれた → 恐竜が栄えていた時代、哺乳類の祖先は長いあいだ地中や夜行性の動 物として捕食を逃れていた。色覚は重要でなかった。 色覚のタイプとその頻度 色盲でない人 92% 第１色盲 (２色型) 0.4 ％, 1% 日本人％, 欧米人％ 第２色盲 (２色型) 1.4 ％, 1% 色盲の人の色の見え方 色盲でない人 第１色盲 (赤オプシンが変化) 色盲0.4%色弱0.9%（日本人男性) 赤オプシンがないか、 感度がすごく緑に寄っている 緑オプシンがないか、 感度がすごく赤に寄っている 第１色弱 (異常3色型) 第２色弱 (異常3色型) 第２色盲 (緑オプシンが変化) 色盲1.4%色弱3.2%（日本人男性) 第３色盲 0.001% 0.7％, 1% 3.2％, 5% 第３色盲 (青オプシンが変化) 0.001%（男女とも) 青オプシンがない 赤オプシンの感度が すこし緑に寄っている 緑オプシンの感度が すこし赤に寄っている 第１／第２色盲では緑〜黄色〜赤にかけて色の変化が小さい さらに第１色盲では赤が暗くほとんど黒に見える とはいえ、かなりの色については見わけることができている この図は色盲 (２色型) のシミュレーション：全体の1/4 〜1/3 色弱 (異常3色型) の場合、見え方はほとんど色盲〜ほとんど普通と様々 2 色盲のシミュレーション ■ 色覚の仕組みと色盲･色弱の原理 ■ 色盲･色弱の人はどんな色が見にくいか？ ■ 色盲･色弱の人はどんな色が見やすいか？ ■ すべての人に見やすいデザインの工夫 ■ 色覚バリアフリーな色の選び方 ■ 地下鉄路線図の見やすさ調査 ■ ● ケンブリッジ大学の J. D. モロン教授の研究室で色覚 シミュレーションの計算原理を開発 (強度･2色型の色盲専用) 計算法 ● 画像ファイルの各画素 (ピクセル) の赤､ 緑､ 青 (R, G, B) の値から、 ブラウン管や液晶の表示規格のパラメーターを使って、モニター に表示される各画素の赤､ 緑､ 青の実際の明度を計算 ● モニターの各画素が網膜の赤､ 緑､ 青の各錐体細胞に惹き起こす反 応の強さ (L, M, S) を、錐体の分光感度から計算 ● 各タイプの色盲で欠けている錐体の分の反応を除去し、LMS座標 空間の中の２次元平面に射影（黒＝黒、白＝白、青＝青の拘束条件） 例：第１色盲（L第1, M第1, S第1）＝（2.02344 M−2.52581S, M, S） 第２色盲（L第2, M第2, S第2）＝（L, 0.494207L＋1.24827S, S） 色覚バリアフリーデザインの具体的実現法 ● 換算された (L, M, S) の値に対応するモニタ−各画素の赤､ 緑､ 青 の明度値を逆算 ● その値に対応する画像ファイルの (R, G, B) 値を逆算 色盲シミュレーションソフト 色盲･色弱の人はどんな色が見にくいか？ Vischeck http://vischeck.com/ フリーソフト (NIH Image J のプラグイン) Windows, Macintosh, Unix 有料 (アドビ Photoshop のプラグイン) Windows ● デジカメで情景を撮影 → パソコンに転送 ↓ ● アドビ Photoshop や NIH Image J で画像を開く ↓ ● プラグインを起動 → シミュレートしたい色覚タイプを指定 ● 見分けにくい色がある ● 赤色が目に飛び込んでこない ● 色の名前がわからない ● 光るものの色はとくに苦手 実演 色盲だと見分けにくい色 色盲でない人 赤オプシンの変異 第１色盲 緑オプシンの変異 第２色盲 赤と緑 ホームページ ボタンがあるこ とに気付かない 3 赤と緑 赤と緑 色盲でない人 色盲でない人 第２色盲 第２色盲 何をどこに捨てたらよい？ 赤と緑 色盲でない人 どっちがゴ−ルしたの？ 赤、緑、黄緑 第１色盲 どれが急行でどれが準急？ 色盲でない人 第２色盲 文字を読まないと分からない（色分けの意味がない） 色とりどりの靴下 オレンジと緑 色盲でない人 色盲でない人 第１色盲 第１色盲 左右まちがえないようにしないと 渋く決めたつもりが派手な恰好に・・・ 4 ピンクと水色 色盲でない人 淡いピンクと灰色 第２色盲 うっかりするとまちがえる（とくに薄暗いバーなど） 色盲でない人 第２色盲 桜は「薄汚れた白」だったりする カラフルな図表は情報量ゼロ 第２色盲 色盲でない人 色盲･色弱の人はどんな色が見にくいか？ ● 見分けにくい色がある ● 赤色が目に飛び込んでこない ● 色の名前がわからない ● 光るものの色はとくに苦手 色が分からないと、どれが何を指すのか分からない なぜ色の変化を感じにくいのか？ 人間の３つの錐体の分光特性 色盲でない人 緑〜 赤の光 赤錐体と緑錐体の反応の差から、 光の波長の差を知覚している 特に赤色には敏感 赤緑色盲の人 緑〜 赤の光 赤錐体と緑錐体のどちらかしかな いので、光の波長の差がわかりに くい 色盲でない人の可視光線領域は400〜700nm 第１色盲の人は赤錐体がない → 長波長の光（深紅・濃い赤）が認識できない 緑オプシンの感度が赤に寄っている第２色盲の人は 赤が暗くはならないが、「赤の強調機構」は働かない 5 濃い赤が暗く見えると･･･ 祝日を赤い字で強調されても 色盲でない人 ● 長波長側の濃い赤は黒と見分けがつかなくなる。 ● 短波長側の朱赤を使う と黒と見分けがつく。 色盲でない人 第１色盲のシミュレーション 黒字の中に赤色 の字 黒字の中に朱色 の字 色盲でない人 黒字の中に赤色 の字 黒字の中に朱色 の字 第１色盲 第１色盲のシミュレーション 白い字は見やすい 赤は鮮やかに 明るい 朱色もそう変わらない 白い字は見やすい 赤は暗く沈んで 見える 朱色は明るく見える 黒、青など暗い背景では読めない 土曜日のほうが祝日よりも眼に飛び込んでくる ･･･ 電光掲示板 赤い服と黒い服 色盲でない人 第１色盲 色盲でない人が「濃紺と黒」を間違えるのと、同じ感覚 光沢のないコーデュロイやベルベットは特に間違えやすい 第１色盲 いちばん強調されてるところが読めない 禁止表示の盲点 電光掲示板 色盲でない人 色盲でない人 第１色盲 黒の上に載った赤が、よく目立たない 色盲でない人 第１色盲 ↓ 赤を朱赤にする 黒と赤の境目に細い白線で 縁取りを入れる いちばん強調されているところが見えない 6 樹木と道路標識 色盲でない人 第１色盲 樹木と道路標識 第２色盲 樹木とかぶると、赤い標識が見えない。 赤の色合いで見やすさがずいぶん変わる（×濃い赤、○朱赤） 赤と青の境界が見にくい。 第１色盲 第１色盲 第２色盲 樹木とかぶると、赤い標識が見えない。 赤の色合いで見やすさがずいぶん変わる（×濃い赤、○朱赤） → 赤と青のあいだに白い縁取りを入れる。 赤のレーザーポインターは「赤外線レーザー」 赤いチョーク 色盲でない人 色盲でない人 第２色盲 赤色レーザーポインターの波長は、第１色盲の人の可視範囲をほとん ど越えている。 緑のレーザーポインターは色盲の人でも見やすい。 分光感度が一番高い波長域なので、色盲でない人にも明るく見やすい。 （同じワット数なら3倍以上明るく見える） 白、青、黄色は問題ない。 赤いチョークは非常に見にくい。（学校関連で最も深刻な不満） → 小中高校の教室には、赤いチョークを置かない！ 色盲･色弱の人はどんな色が見にくいか？ 高知豊中技研 TEL:0887-59-4138 http://www1.odn.ne.jp/ktg/GL_Pointer/pointer.htm ブロードバンド TEL:03-5838-0082 http://www1.odn.ne.jp/ktg/page/pointer.html DeHarpporte Trading Company http://store.yahoo.com/deharpport/greenlaspoin.html この６つは違う この６つも違う 色だとわかる 色だとわかる → しかしどれがどの 色かは言えない 色の違いは 分かっても、 色名が分か らない！ ● 見分けにくい色がある ● 赤色が目に飛び込んでこない 見たままに絵 を描いても、 ちがう色で塗 ってしまう。 ● 色の名前がわからない ● 光るものの色はとくに苦手 第２色盲 色盲でない人 7 花はどこに咲いているでしょう？ 人間は頭を使って色名を認識する ● 眼からの情報だけで色を知覚しているわけではない。 → どんな色の照明でも、リンゴは赤く見える。 第１色盲 色盲でない人 ● 頭の中にある「記憶色データベース」 どんなものはどういう色を取りうるかの「常識集」 葉っぱは緑 枝は茶色 花は赤や黄色 緑の中の、赤や黄色の花は、見つけにくい しかしこんなに見にくく見えるのに、花の色名などは ほとんど間違えない 明度、彩度、質感の利用 緑や茶色の花は無い ● 色盲の人も、記憶色データベースと照らし合わせると間違えず に色を言える。 子供のころは間違える。だんだんデータベースが充実してくる と、色名を間違えなくなる。→ 「色盲が直った」と錯覚 ● 自然物の色はデータベースと対照できるので間違えにくい。 どんな色を取るか分からない人工物は、この方法ではお手上げ 旧型のカード式公衆電話は黄色！ ● 色盲の人は、色合い（色相）が分からなくても、色の明るさ 第１色盲 色盲でない人 （明度）や鮮やかさ（彩度）は普通に分かる。 ● 色によって、鮮やかであることが多い色や、くすんでいること きいろ が多い色がある。 明るい＋鮮やか 黄色 暗い ＋鮮やか 赤色 明るい＋少しくすんでいる 黄緑 少し暗い＋少しくすんでいる 暗い＋くすんでいる みどり みどり 緑 茶色 ● これで結構当たることが多い。でもこの法則に反する場合、間 違える。 西武線は黄緑！ でも総武線は黄色！ 第１色盲 色盲でない人 くろ 明るく、鮮やかな緑は、黄色と間違える オレンジなんて使ってる？ 色盲でない人 第１色盲 みどり くすんだ黄色は、黄緑と間違える みどり 鮮やかな黄色なので間違えない 8 色が違うのは分かるのだが･･･ 第１色盲 色盲でない人 茶色の服を モスグリーンの服 買ったつもり を買ったつもり 樹木では、茶色の枝の方が緑の葉っぱより暗いのに。 ● 色を使って答える問題（１年生の算数の教科書から） ● 色を使って答える問題（１年生の算数の教科書から） 元画像 色鉛筆に色名が書いていないと、間違える可能性が高い 足し算が出来ないのか？色を間違えただけなのか？ 色名を書いてしまおう！ 色盲でない 元画像 第２色盲シミュレーション 第１色盲 第２色盲シミュレーション 自信を持って色名で答えられますか？ クラスのみんなの前で答えさせる時に、 こんなトラブルがあったら、、、 必ず記号や文字を併用して、 色以外でも答えられるように配慮が必要 BS･地上波デジタル放送のカラーボタン アンケートやクイズ番組に視聴者 が回答するため、青、赤、緑、黄 色の4色のボタンが付いている。 → 「赤のボタンを押して下さ い」と言われても、どれ を押せばいいか間違える。 → 「おい、そのバイオレットのやつ取ってくれ。」 「バイオレットって何色だよ？」 （実話） 色盲でなくても、同じ色を見て誰もが同じ色名を答えるとは限ら ない。「あお」と色名が書いてあれば、誰にでも確実にそれが 「あお」だと伝わる。（「みずいろ」じゃないということも伝わる） 色名が書いてあれば間違えない 通販カタログには 色名が書いてある が、ブティックな どでは書いてない。 ↓ 襟や袖のタグや陳 列棚などに、色名 を書いておくべき。 2003.6月まで 2003.7月から （地上波デジタル開始にあわせ全メーカー対応） 9 ユニクロはタグに色名を書いてある 工夫された病院表示 厳密な色名でなく「色のカテゴリー」を書いてあることが大切！ 色盲･色弱の人はどんな色が見にくいか？ 光るものの色は特に分かりにくい ● 光源から直接来る光の色と、物体の表面の色とは、脳の中の処 理過程が異なる。 ● 見分けにくい色がある ● 物体の表面と違い、明度（明るさ）や彩度（鮮やかさ）の「常 識」が通用しない。 ● 赤色が目に飛び込んでこない 物体の色では、赤はふつう黄色よりは暗い。 光源では「暗い黄色いランプ」や「明るい赤のランプ」が存在する。 赤・オレンジ・黄色は、印刷物の色なら明るさの違いで差が分 ● 色の名前がわからない かるが、ランプの色だと差が分からない。 ● 「発光ダイオード(LED)」の光は、特に純粋で鮮やか。 ● 光るものの色はとくに苦手 → 明度最大、彩度最大なので、色あい以外で色の判断のしよ うがない。 色盲の人にはわからない LED表示 赤と緑、オレンジと緑 スイッチはついているのか消えているのか？ 色盲でない人 第１色盲 同じ場所、同じ形状で、色 だけ変化する 色が見分けられないと、全 く情報が得られない。 色が見分けられなくても情報 を得ることができるには： ・点灯する場所を変える ・ランプの形を変える ・点灯･点滅･消灯の使い分け 色＋その他のキー情報を併用 言葉でいくら説明されても、色そのものが区別できない 10 駅の電光掲示板 新世代の電光掲示板はグッド！ 色盲でない人 色盲でない人 第１色盲 第１色盲 ３色あるのだが、１色か、せいぜい２色にしか見えない 色構成による比較 この３色なら誰でも確実に区別できる。 色構成による比較 左：色盲でない人 左：色盲でない人 右：第1色盲の人 右：第1色盲の人 (C) 静岡工業技術センター：多々良哲也 (C) 静岡工業技術センター：多々良哲也 色構成による比較 色構成による比較 左：色盲でない人 左：色盲でない人 右：第1色盲の人 右：第1色盲の人 (C) 静岡工業技術センター：多々良哲也 (C) 静岡工業技術センター：多々良哲也 11 色構成による比較 色構成による比較 左：色盲でない人 左：色盲でない人 右：第1色盲の人 右：第1色盲の人 (C) 静岡工業技術センター：多々良哲也 色構成による比較 (C) 静岡工業技術センター：多々良哲也 色構成による比較 左：色盲でない人 左：色盲でない人 右：第1色盲の人 右：第1色盲の人 (C) 静岡工業技術センター：多々良哲也 色構成による比較 (C) 静岡工業技術センター：多々良哲也 色構成による比較 左：色盲でない人 左：色盲でない人 右：第1色盲の人 右：第1色盲の人 (C) 静岡工業技術センター：多々良哲也 (C) 静岡工業技術センター：多々良哲也 12 色構成による比較 色構成による比較 左：色盲でない人 左：色盲でない人 右：第1色盲の人 右：第1色盲の人 (C) 静岡工業技術センター：多々良哲也 (C) 静岡工業技術センター：多々良哲也 色の配合と組合せによる変化 色の配合と組合せによる変化 左：色盲でない人 右：第1色盲の人 左：色盲でない人 右：第1色盲の人 (C) 静岡工業技術センター：多々良哲也 色の配合と組合せによる変化 (C) 静岡工業技術センター：多々良哲也 ■ 色覚の仕組みと色盲･色弱の原理 ■ 色盲･色弱の人はどんな色が見にくいか？ ■ 色盲･色弱の人はどんな色が見やすいか？ 左：色盲でない人 右：第1色盲の人 ■ すべての人に見やすいデザインの工夫 ■ 色覚バリアフリーな色の選び方 ■ 地下鉄路線図の見やすさ調査 ■ 色覚バリアフリーデザインの具体的実現法 (C) 静岡工業技術センター：多々良哲也 13 色盲の人は色覚能力が「劣っている」のか？ なぜ色盲でない人には読みにくいのか？ 数字が読めますか？ オリジナル 赤チャンネル 緑チャンネル 青チャンネル 「５」は青の濃淡で描かれている 色盲の人は、色盲でない人よりも青みの違いに敏感 色盲でない人には読めない 色盲の人には、「５」と読める 同じ「緑」でも全然違う色なのに カテゴリーの境界はどこ？ ナイジェリア イタリア アイルランド 各国大使館から取り寄せた情報に従って表現した各国旗 色盲でない人 第１色盲 第２色盲 色をカテゴリーにわけるときの 境界線が色盲でない人と異なる （青みの差に敏感） 色盲の人からすれば、イタリアの緑は茶色と間違えやすく、他 の２国の緑とは異なるカテゴリーの色に見える 非常に多くのホームページや世界の国旗を紹介する 本で、この３国の緑色は同じ色が使われている 色名が同じだと異なった色も同一視してしまう （色盲でない人の方が、ある意味無頓着） 色盲の人には緑色の中にカテゴリーの境界がある 山手線の「緑」って･･･ 同じ色名の色でも、微妙な色合いの差でわかりやすさが変わる 抹茶色は真っ茶色？ オリジナル これは緑！ 第２色盲 鮮やかな緑でも、黄色みが強い と茶色と区別できない 60 120 （色相114度） 黄色 緑 180 緑青 青みの強い緑 は 間違えにくい （色相127度） 色盲の人には、同じ色とはとても思えない （赤と緑が区別できないぶん、明度、彩度、青みの差に敏感。 この点では色盲でない人の方が、ある意味無頓着） 14 見やすい色の組み合わせが全然違う 作者が厳しく色管理を要求している絵本も 日本語版 （２色で染めた顕微鏡写真） 英語版（印刷はドイツ） 緑と青 赤と緑 緑と赤紫 (赤＋青) とても見やすい とても見やすい とても見にくい とても見にくい まあ見やすい まあ見やすい 全然見えない 全然見えない 見やすい 見やすい 色 盲 で な い 人 第 １ 色 盲 ｢色盲でない人はちゃんと色を取り扱える｣ というのは幻想 まとめ 色盲･色弱の特徴 ■ 色覚の仕組みと色盲･色弱の原理 ■ 色盲･色弱の人はどんな色が見にくいか？ ● 一部の範囲の色が、明度が同じだと見分けにくい。 ● 第１色盲･色弱は、赤が黒っぽく見える。 ● 印刷物などの塗り色の識別は、第２色盲･色弱の方がむしろ大変。 ● 色盲でない人には見分けにくい青味の差や、微妙な濃淡や明度差 は、かえって見分けやすかったりする。 ■ 色盲･色弱の人はどんな色が見やすいか？ ● どれが何色か、色の名前を言うことが難しい。言われた色のもの を、対象物から探すのが難しい。 例：「赤いボタンを押してください」 × ■ ● 同じ色の線や領域を辿っていくのはできるが、離れたところにあ る同じ色を見つけるのは、より難しい。 例： 凡例とグラフ、案内表示と誘導線 ● 光るものの色の区別は、特に難しい。赤と緑のLEDは×！ ● 自然界の色が見分けられないことより、人工物（展示･掲示･表示） の色が見分けられないことによる不都合の方がはるかに多い。 ■ よくないグラフ すべての人に見やすいデザインの工夫 ■ 色覚バリアフリーな色の選び方 ■ 地下鉄路線図の見やすさ調査 ■ 色覚バリアフリーデザインの具体的実現法 ■ 改善その１ １：色の載った線を太く （より多くの錐体細胞を利用） 15 ■ 改善その２ ■ 改善その３ １：色の載った線を太く （より多くの錐体細胞を利用） １：色の載った線を太く （より多くの錐体細胞を利用） ２：凡例を廃し、図に直接記入 （２点間の色の照合作業を不要に） ２：凡例を廃し、図に直接記入 （２点間の色の照合作業を不要に） ３：赤を朱色に、緑を青っぽい緑に（色盲でも見やすい色あいに） カラフルな図表は情報量ゼロ ■ 改善その４ 色盲でない人 １：色の載った線を太く （より多くの錐体細胞を利用） ２：凡例を廃し、図に直接記入 （２点間の色の照合作業を不要に） 第２色盲 ３：赤を朱色に、緑を青っぽい緑に（色盲でも見やすい色あいに） ４：実線だけでなく点線を利用 （色だけでなく形態の差を併用） 色が分からないと、どれが何を指すのか分からない 色だけでなく形でも差をつけると 色盲でない人 第２色盲 色盲でない人 第１色盲 色に頼らなくても分かる。白黒コピーしてもＯＫ 16 色の差を大きく感じさせるには ハッチングが使えないときの色分け 色の境目に細い白線や黒線で 縁取り を入れる 同じ明るさで色相を変えるのでなく、同じ色相で明る さや濃度を変える （白黒コピーをとってもわかる） × ○ 色分けで行き先を示す。親切なようだが･･･ １：床の線の脇にも直接行き先を書く ３：色ごとに点の形状を変える ２：色名を書く だけで見やすくなる。 ○ × 色の差が大きく感じられないときに、縁取りの効果は大きい 地図の 等高線 問題点：色でゾーンを分けているのが判別できない 色だけ でなく、シンボルの形状 を同時に変えるだけで解決 × 第１色盲 第２色盲 ・対応が分からない ・色名が分からない ・壁の表示と床のマークが、 色盲の人にはとても同じ 色には見えない 良い点：色だけでなくシンボルの形で分類を示している。 線も色だけでなく、形状と太さに差をつけてある。 ○ 良い点：図の色分けの中に文字を示してある。 問題点：凡例を離れたところに描いてある。 線を色でしか区別していない。 ○ × × 博物館等の展示 博物館等の展示 17 問題点： ・シンボルが全部同じ形 ・凡例と図が離れている ・区別しにくい色を使っている × × 「色なしでも理解できるようにデザインし、 「色なしでも理解できるようにデザインし、 その上で強調のために 副次的に 色を添える」 その上で強調のために副次的に色を添える」 【図版作成の原則】 ● 色以外の情報 （文字、ハッチングなど）を必ず併用して、 情報に冗長性 を与える ● 色情報以外を併用できないときは色相差だけではなく明 度差をつける → 形の認識、明度差の認識には個人差はほとんどない ● 色名を使わずに コミュニケーションができるようにする ● 白黒のコピーやFAXでも理解できる図版を心掛ける 博物館等の展示 色盲バリアフリーな色の選び方 ■ 色覚の仕組みと色盲･色弱の原理 ■ 色盲･色弱の人はどんな色が見にくいか？ ■ 色盲･色弱の人はどんな色が見やすいか？ ■ すべての人に見やすいデザインの工夫 ■ 色覚バリアフリーな色の選び方 1. 赤: 濃い赤 (RGB=100,0,0%)は避ける. 朱色(RGB=80,40,0%, 100,20,0%) かオレンジ (RGB=90,60,0%)を使う . ■ 地下鉄路線図の見やすさ調査 ■ 色覚バリアフリーデザインの具体的実現法 2. 緑: 「いわゆる緑」 (RGB=0,50,0%)は赤や茶色と間違えるの で避ける。青みの強い緑 (RGB=0,60,50%) を使う。 3. 明るい緑 ■ (RGB=0,100,0%) と黄色 ■ (RGB=100,100,0%) は色盲の人にとっては同じ色。 黄色から緑の間の色は使用を避ける。 書体や文字色の選び方 ● 色を載せる文字は太くする ● 下線や傍点、書体の違いを併用 して強調する ● 濃い赤は使わず、朱赤を使う 。 （赤ボールペン × 朱色の赤えんぴつ ◎ ） ● 黒･青･緑などの背景に赤い字を使わない（赤チョーク厳禁！） 色盲でない人 黒字の中に赤色の字 黒字の中に朱色の字 細字だと色が見にくい 色盲でない人 白い字は見やすい 赤は鮮やかに明るい 朱色もそう変わらない 青は暗く沈んで 見える 細い字は読みにくい 色を組み合わせる際の注意 A B 色盲でない人 色盲でない人 第 2 色盲 第 2 色盲 C 見分けにくい組み合わせ D 赤〜緑の範囲で選ば ず、青緑を境に暖色 系と寒色系を対比さ せて色を選ぶ 見分けやすい組み合わせ 第１色盲のシミュレーション 黒字の中に赤色の字 黒字の中に朱色の字 細字だと色が見にくい 第１色盲のシミュレーション 白い字は見やすい 赤は暗く沈んで 見える 朱色は明るく見える 青は鮮やかに 明るい 細い字は読みにくい 明度は対比しているが、暖色または寒色系同士 暖色寒色は対比しているが、明度が近い 暖色系だけ 寒色系だけ パステル調だけ 明度も対比、暖色寒色も対比 暖色寒色を交互に組み合わせる はっきりした色とパステル調を対比 ・明度もしくは彩度の大きく違う色を選ぶ ・同じ色名の色でも、微妙な色合いの差でわかりやすさが変わる 18 CIE xy 色度図の利用 なるべく濃度の高い鮮やかな色を使う 第１色盲 色盲でない人 ダイヤブロック（日本） レゴ（デンマーク） 第２色盲 ● 必要な配慮は、単純で論理的。 北欧は色盲の人の率が非常 に高い → バリアフリーデザイン の参考になる ● 同じ明度で、xy色度図の混同線に載る色がみわけにくい。 ● 眼科学(色覚) や色彩工学では常識。 なのにデザイン業界ではほとんど知られていない。 ←大問題 混同しやすい色の処理 色盲でない人 Lab 色指定の活用 b CIE 色度図の混同線は、 Lab図ではほぼ水平な線 になる。 a ・同じ明度で xy 色度図の混同線に載る色を １：混同線の法線方向へずらす ２：明度をずらす 第２色盲 Lab図で水平に並ぶよう な2つの色（Lとbの値が 同じ色）は混同しやすい。 →Lとbが均等に分散する ように色を選ぶ。 ・混同しやすそうな色にハッチングを付ける 交差点用の交通信号機の見やすさ Ｌ：明度 ａ：緑み→赤み ｂ：青み→黄色み 赤・ 黄・緑 電機製品のLED 交通信号機は緑を 青味の 強い緑 にしてある。 昔の青信号 (70年代まで) はもっと“緑”だった。 → 国際勧告を取り入れて、青味を強くした。 が、赤と 黄は、事実上色では区別できない。 → 点灯の位置と点灯時間で判断 している。 中央で短時間点灯するだけなのは黄色 右端で長時間点灯しているのは赤 → 一灯点滅式の赤と黄色は区別できない。 いつでも停止できるよう気をつける 色盲 ･色弱の人が交通事故を起こす率に差はない （旧東ドイツの大規模調査）が、 ・一灯式信号機は設置しない。 ・緑黄赤の色の順番を守る。 ・夜間に点灯位置を分かりやすくする。 のが大事 朱赤 ・黄・ 青緑 ・電気製品等の警告灯に定められたメッセージ 赤 (停止・警告)、黄 (注意)、緑 (ＯＫ・続行) しかしこの3色のLEDは、色盲の人には最悪の組み合わせ (日常生活で唯一、全く見分けがつかない色 の経験） ・第１色盲では、赤いLED はよく見えない ことも ・信号機の朱赤 ・ 黄・青味の 強い緑 は、緑はよいが赤と黄が 区別しづらい。 朱赤 ・白・ 青 ・３色なら、朱赤 、白、青 がいちばん見やすい 色盲でない人にも分かりやすい ●●● ● ● ←光だけでは位置が不明 発光部の場所や形、点灯点滅 の違いも併用● ● ● → ■ ▲ ● ●●● ● ● ←黄色だけ下線を付ける ・必要なら表示色に関する業界申し合わせの変更も ●●● ● ● ←回りに光る枠を付ける （昨年来、どうでもいい場所ばかりに青や白の LED が多用） 19 どんな色のLEDなら見やすいか？ ・ 高輝度赤 は第１色 盲の人には非常に 暗く見える ・ 朱赤、 オレンジ 、 黄色、 緑は、第１、 第２色盲には同じ 色にしか見えない ・ 青味の 強い緑 (信 号機の緑色) は、 明確に緑に見え る ・ 青は間違えない ・ 白も間違えない ・ 青味の 強い緑と 青 は、色盲でない人 がむしろ混乱する。 ・朱赤 、青味の 強い緑 、 青、白 まとめ 色覚バリアフリーなデザイン ● 色なしでも理解できるようにデザインし、その上で強調のために 副次的に色を添える。（点線、ハッチング、濃淡、書体、下線･･･） ● 離れたところの色を照合させない 凡例は図の中に、行き先表示や路線名は線のすぐ脇に ● 色の面積はなるべく大きく 線は太く、字は大きく、字を白抜きにして地の色を変える ● 色名だけでものを示さない。場所、形などの情報を併用。 ×「赤いボタンを押してください」 ○「３番目の四角い赤ボタンを押してください」 ● 配色には暖色系・寒色系を対比させ、明度・彩度を大きく変える。 ● 緑は青みを強く。赤は深紅･濃い赤を避け、朱赤ぎみに。 ● LED には特に注意。赤･オレンジ･黄色･緑の LED は同じ色！ の4色がベスト コストが高いけど･･･ 東京の地下鉄路線図（｢営団｣ 営団｣9路線、｢ 路線、｢都営｣ 都営｣4路線） 東京の地下鉄路線図（｢ 営団の路線図 ■ 色覚の仕組みと色盲･色弱の原理 ■ 色盲･色弱の人はどんな色が見にくいか？ ■ 色盲･色弱の人はどんな色が見やすいか？ ■ 色覚バリアフリーな色の選び方 ■ すべての人に見やすいデザインの工夫 ■ ■ 色覚バリアフリーデザインの具体的実現法 オレンジライン（オレンジ） 丸の内線 レッドライン（赤） 南北線 エメラルドライン（エメラルド） 有楽町線新線 ブラウンライン（茶） 日比谷線 シルバーライン（銀ネズミ） スカイライン（ライトブルー） 浅草線 ローズライン（ピンク） 千代田線 グリーンライン（緑） 三田線 ブルーライン（ブルー） 有楽町線 ゴールドライン（黄土） 新宿線 リーフライン（黄緑） 半蔵門線 パープルライン（紫） 大江戸線 マゼンダライン（牡丹） 東西線 都営の路線図 地下鉄路線図の見やすさ調査 シンボルカラー 銀座線 第２色盲シミュレーション シンボルカラーの前提 ある色を見ればほとんどの人が同じ色名を思い浮かべる • ある色を見ればほとんどの人が同じ色名を思い浮かべる 実際に使用されている路線図を被験者に配布し、各路線の色名 を自由回答してもらう。 • 塗り分けられた各色がどの人にも分かりやすく見分けられる すべての路線の組み合わせ（合計78 通り)について、それぞれ がどの程度見分けにくいかを○と△で回答してもらう。 アンケートの配布 2003年3月19日 19日〜5月20日 20日 • 2003年 500人（色盲でない 約350人、色盲 350人、色盲 約150人） 150人） • 約500人（色盲でない • 全国 アンケートの回答 有効回答302人 （回収率：60.4%） 60.4%） • 有効回答302 302人 （回収率：60.4% 282人 • 色盲・性別の属性不明者を除くと 色盲・性別の属性不明者を除くと282 282人 男性 女性 合計 色盲でない 92 92 184 色盲 91 7 98 合計 183 99 282 • （色覚型や性別は自己申告による） 20 どの路線が、何色に見えるか？ 挙げられた色名が揃っていた路線 丸ノ内線 赤 朱 レッド 挙げられた色名がさまざまだった路線 有楽町線 黄土 濃黄 黄 オレンジ 金 ゴールド あさぎ うぐいす からし ベージュ もえぎ やまぶき 国防色 カーキ オリーブ 淡黄緑 薄緑 黄緑 緑 茶 褐色 若草 若竹 路線図によって思い浮かべる色名が異なる 色盲でない場合の例 浅草線 営団路線図 ： 都営路線図 ： 赤紫系 3.2 0.6 ピンク系 91.7 1.9 赤系 1.9 87.2 オレンジ系 0 8.4 南北線 営団路線図 ： 都営路線図 ： 緑系 25.0 66.0 青緑系 59.0 21.2 水色系 3.2 0 青系 5.2 5.1 東西線 営団路線図 ： 都営路線図 ： 水色 40.4 75.0 青系 57.7 23.1 濃い青系 0.6 0 三田線 営団路線図 ： 都営路線図 ： 水色 0 0 青系 69.3 80.8 濃い青系 29.5 14.8 青の濃淡： 水色 と 青 紫系 青 と 濃い青 0 3.8 南北線 薄緑 緑 淡緑 薄黄緑 黄緑 浅緑 グリーン ライトグリーン 若竹 若葉 新緑 青葉 青緑 緑青 エメラル ド エメラルドグリーン コバルトブルー ブルーグリーン ミントグリーン 水色 空色 青 色盲の場合に特徴的な色名イメージ １ 都営路線図の例 銀座線 オレンジ系 色盲でない 88.6 57.8 色盲 黄系 7.7 7 色盲の場合に特徴的な色名イメージ ２ 都営路線図の例 黄土色系 0.6 4.2 黄緑系 0 17.0 緑系 0 5.6 大江戸線 色 盲 で な い 色盲 南北線 赤系 7.7 32.4 茶色系 4.5 12.7 緑系 0 5.6 緑系 66.0 50.7 青緑系 21.1 9.9 水色系 5.1 0 新宿線 色盲でない 色盲 0 4.2 2.6 9.9 0 2.8 76.3 62.0 18.6 18.3 有楽町線 色盲でない 色盲 3.2 21.2 19.9 12.7 62.2 23.9 0.6 23.9 1.3 2.8 赤系 0 緑系 96.8 80.3 茶色系 0 9.9 日比谷線 色 盲 で な い 色盲 ピンク系 0 8.5 灰色系 99.4 88.7 1.3 14.1 0 11.3 77.5 50.7 浅草線 色盲でない （営団） 色盲 赤紫系 3.2 26.8 ピンク系 91.7 60.6 千代田線 色盲でない 色盲 有楽町新線 色 盲 で な い 色盲 第２色盲シミュレーション 色覚に関わらず見分けにくい路線の色 丸ノ内線と浅草線 色盲でない 色盲 営団路線図 都営路線図 3.8 79.5 2.8 85.4 有楽町新線と大江戸線 営団路線図 都営路線図 色盲でない 2.6 46.2 1.4 66.2 色盲 浅草線と大江戸線 色盲でない 色盲 営団路線図 都営路線図 32.1 18.6 23.9 15.5 色盲でない 色盲 赤紫系 ピンク系 72.4 0 26.8 8.5 灰色系 0 19.7 灰色系 0 21.2 第２色盲 シミュレーション 色盲の人の方が見分けにくい路線の色 黄土色・黄緑色・オレンジ色 ピンク・灰色・青緑 有楽町線と新宿線 色盲でない 色盲 営団 3.8 26.8 都営 6.4 77.5 日比谷線と南北線 色盲でない 色盲 営団 0.6 43.7 都営 0 26.9 有楽町線と銀座線 色盲でない 色盲 営団 6.4 60.6 都営 32.1 78.9 日比谷線と浅草線 色盲でない 色盲 営団 0 31.0 都営 0.6 1.4 銀座線と新宿線 色盲でない 色盲 営団 0 29.6 都営 0.6 59.2 浅草線と南北線 色盲でない 色盲 営団 0 16.9 都営 0 0 第２色盲シミュレーション 21 色盲でない人の方が見分けにくい路線の色 緑・青緑色・水色 千代田線と南北線 色盲でない 色盲 営団 25.6 4.2 都営 42.3 36.6 南北線と東西線 色盲でない 色盲 営団 14.1 0 都営 1.3 0 営団：南北線の青緑が水色(東西線)寄り 都営：南北線の青緑が緑(千代田線)寄り 千代田線と新宿線 色盲でない 色盲 営団 13.5 2.8 都営 1.9 0 営団 12.8 11.3 都営 20.6 11.3 ある ある色を見ればほとんどの人が同じ色名を思い浮かべる 色を見ればほとんどの人が同じ色名を思い浮かべる 塗り分けられた各色がどの人にも分かりやすく見分けられる ←× ←× ■ 挙げられる色名や見分けにくい路線に、２つの路線図で大きな差があった 紫・赤紫 半蔵門線と大江戸線 色盲でない 色盲 まとめ ■ 現状の地下鉄路線図は、色盲であるかどうかに関係なく： 緑・黄緑 → 「同じ色名の範疇」に属する色であっても、色合いが違うと大きな 影響がある。 → 注意深く色合いを選定することで、わかりやすさを大きく改善できる！ ■ 色盲において混乱が生じる色は、 CIE 色度図の混同線の理論と一致 → 色選定作業における CIE 色度図の積極的な利用を推進 デ ザ イ ナ ー に 使 い や す い 形 で の CIE 色度図の利用手段が必要！ ■ とはいえ、どんなに色合いを調節しても、色名の分かりやすさ、相互の見 分けやすさは完全には解決しない。 → 色名を明記する → 色以外の情報の区分手段を並列して提供する 問題があるのは日本だけではない（ロンドン地下鉄） これはかなり見やすい（パリ地下鉄） これはかなり見やすい（パリ地下鉄） Paris subway 第２色盲のシミュレーション パリの地下鉄 1. 線が太い 2. 路線名（番号）が地図の中に直接示 されている → 同じ色の線を辿るのは、離れた場所 の色を比較するよりはるかに容易 22 第２色盲シミュレーション ■ 色覚の仕組みと色盲･色弱の原理 ■ 色盲･色弱の人はどんな色が見にくいか？ ■ 色盲･色弱の人はどんな色が見やすいか？ ■ すべての人に見やすいデザインの工夫 ■ 色覚バリアフリーな色の選び方 ■ 地下鉄路線図の見やすさ調査 ■ 色覚バリアフリーデザインの具体的実現法 色が分かりにくくてもOK。色名を伝えられない外国人にもOK。 地下鉄路線図 コンテスト 色覚バリアフリーデザインの工夫 (C) 正明堂印刷・伊藤裕道＆制作スタッフ ● 定められたシンボルカラーの色名の範囲内で色合いを微調整 ● 紛らわしい路線には、淡い濃淡のハッチング ● 凡例に色名を明記 (C) 正明堂印刷・伊藤裕道＆制作スタッフ ● 路線のシンボル記号を明記 (2004年4月より営団・都営が導入決定) 23 色覚バリアフリーデザインの工夫 ● 路線の交差部は細い白線で色の境界を強調 真の色覚バリアフリー (C) 正明堂印刷・伊藤裕 道＆制作スタッフ (C) 正明堂印刷・伊藤裕道＆制作スタッフ ● 営団：ベタか横縞、駅は□ 都営：縦縞、駅は○ ←ひとめで識別 ● 路線名を図の中に記入（凡例との対照が不要） ● 色分け、路線名記入、シンボル記号記入と何重にも冗長に情報表示 色覚バリアフリーのよくある誤解 ● 自由に色を使えなくなる。 ● 派手な色しか使えず、けばけばしいデザインになる。 ● 普通の人にはかえって見にくくなる。 ↓ すべて間違い ↓ ● 色覚バリアフリーは、単に配色を変えるだけではない 。 ● 色の工夫とデザインの工夫を絶妙に組み合わせ 、最大 の効果を得る。 → コンピューターによる自動化は不可能 → デザイナーの独創性と手腕！！！！！！ ● パッと見て、従来と比べて違和感を感じさせない。 ● 微妙な配色の工夫、微妙なデザインの工夫 ● 特定の人のためだけではなく、全ての人に見やすいもの。 色覚バリアフリーデザインのワークフロー ● VisCheck によるシミュレーションを繰り返しながら、各 タイプの色覚で区別しやすい色あいに調整する。 （コーポレートカラーなど変更できない色を基点に、それ と区別しやすい色あいを選んでゆく。） ● 絶対に区別できて欲しい部分、場合によっては間違えても 構わない部分を厳密に把握し、優先順位を考えながら配色。 ● 色以外の情報でも区別できるようデザインを工夫する。 ↓ ● 第１色盲、第２色盲、第１色弱、第２色弱の４タイプの色 覚の人にモニターを依頼し、バリアフリーが達成できてい るか検証する。（タイプによって見え方がかなり違う。） ● 必要に応じて配色、デザインの再調整を行なう。 色覚バリアフリー推進委員会 (仮称) ● NPO設立準備中。 ● 精密検査で色覚タイプをチェックした第１色盲、第２色盲、 第１色弱、第２色弱のモニター要員を提供。 ● 現行の商品・施設等の配色・デザインの問題点を指摘。 ● 新製品の操作部・表示画面等の配色・デザインの開発協力。 ● 公共施設の案内表示等の配色・デザインの設計協力。 ● デザインコンサルタント企業等が請け負ったバリアフリー チェック作業への協力（コンサルの孫請け）。 ● 従来より格段に見やすさが向上していると認められた製品・ 施設等にバリアフリーマークを認定。 連絡先 color@iam.u-tokyo.ac.jp 24
© Copyright 2024 Paperzz
