第6回 アクセシビリティキャンプ東京

色color

2013年6月14日

アクセシビリティキャンプ東京実行委員会

「色」とは？

• 色の三属性

– 色相・明度・彩度

• 色の物理的性質

– 波長・強度・純度

• 視細胞のうち、錐体が色を見分ける

– 明るい時しか知覚できない

Photo by Chevre

http://pl.wikipedia.org/wiki/Grafika:Kredki_Foto.jpg

色が無いのに色がある？

• ベンハムのこま

– 物理的性質と感覚のズレで色覚現象

http://plaza.rakuten.co.jp/hatenaclub/diary/200808290000/

なぜ色を使う？

• 色の違いは200ミリ秒以内に判別でき、人が注意を払おうと気づく（中略）よりも短い時間です– ビューティフルビジュアライゼーションより

なぜ色を使う？

• 「人間の知覚に基づく色空間は、どのように切り取ったとしても3つの次元を持」つのでHSBやRGB（見たことない）の各次元に変数を割り当てられるからだと思っています

• '教えて、黒澤さん！

色で見分ける

事例：地下鉄

http://ja.wikipedia.org/wiki/%E6%9D%B1%E4%BA%AC%E5%9C%B0%E4%B8%8B%E9%89%84%E4%B8%B8%E3%83%8E%E5%86%85%E7%B7%9A

事例：京急

優等列車は種別ごとに種別色（停車駅表参照）を定めており、英語での案内にはその色を用いる場合もある。

http://ja.wikipedia.org/wiki/%E4%BA%AC%E6%80%A5%E6%9C%AC%E7%B7%9A

事例：レーン表示

http://usability.ueyesdesign.co.jp/diary/697.html

車線毎にアスファルトが塗り分けられています。右折レーンがブルー、直進可能な車線はピンク、左折のみの車線は着色無し、というルールなんですかね？

事例：自転車のライト

http://hanasawa.com/archives/1555

車両に付けるライトは周囲に自分の存在・場所・進行方向を知らせるものです。（中略）赤いライトを前につけると、周囲に進行方向を誤認させ事故を誘発することになる。

色がどう見えているか？

色がどう見えているか？• 20人に1人、色覚障害を持ったユーザーが居る

‒ 色で表現できることは多い。しかし、色が伝わらない状況も多い

‒ どういう根拠でシミュレーションしてる？

• 視覚の変化はどう訪れるか？‒ 先天性

‒ 加齢で角膜黄変や視力低下→色の恒常が働く

‒ 病気で急変→徐々に変化する場合より大変そう

• その状態をどう呼ぶか？‒ 色覚特性？色覚異常？色盲？色弱？

事例：ゴッホの絵

ともすれば「正常色覚の人の方が（色を見て理解するという点では）色覚異常の人より優れている」と思いがちな私たちに、ある点では「色覚異常の人の方が正常色覚の人より優れている」ことを示す実例のひとつだと言うことができるかもしれない。

http://asada0.tumblr.com/post/11323024757

事例：肉

http://www.shirashiki.ehimeclay.com/wp-content/uploads/n1-tokachi03.jpg

赤い生肉に火が通って茶色くなる変化はわかりづらいと思うんですが、どうなんだろう？

色への依存

色への依存とは？• 色だけに依存したコンテンツとは何か？

‒ 色でしか伝えられない情報は存在するか？

‒ 問題は解消できるか？

‒ そもそも依存しないようにできるか？

• 多様なメディア、プロダクトにおける色弱者の見え方、困りごと‒ 街の看板表示や家電製品の表示がわかりづらかったり？

‒ 色を使った資料作成が難しかったり？

事例：ロンドンの地下鉄

http://www.tfl.gov.uk/gettingaround/14091.aspx

事例：ロンドンの地下鉄

http://www.tfl.gov.uk/gettingaround/14091.aspx

事例：津波警報

• 禁転載、らしいので…

‒ http://jfly.iam.u-tokyo.ac.jp/color/tsunami/

事例：色のめがね

http://asada.tukusi.ne.jp/chromaticglass/j/

「色のめがね」は、スマートデバイスのカメラとスクリーンを使用し、科学的な理論に基づいた手法により、見えにくい色の一部をリアルタイムに見えやすい色に変更した上で、オリジナル画像と交互に表示することによって、色をわかりやすくします。

色の印象と選択

色の印象と選択• 文化・地域（国内・海外）・性別・年代での、色のイメージの違いは？‒ グローバルデザインの時の色は？

‒ 参考になる資料はある？

‒ コーポレートカラーの策定は？

• デザイナーは色をどう決める？‒ 自分の好みで色を決定しがち？

‒ 色への役割のもたせ方は？

事例：女性向けEC

http://fril.jp/

事例：高級志向の歯科医院

http://www.dc-kawamura.com/

事例：ツブカラ

http://www.tubucolor.net/

アクセシブルな色

アクセシブルな色• プロセス、取り組み

‒ 普段の業務でどの程度気にしている？

‒ どのように配慮している？

‒ 「不適切な配色」があることは知っているが、実際のデザイン時にどうすれば？

‒ 効果測定はどうしてる？• 関係者の説明のために数字がほしいとき

• ウェブやデジタルメディア‒ 閲覧環境による変化を軽減する方法はないか？

‒ アクセシビリティー、ユーザビリティーを左右する色使いについての事例を知りたい

アクセシブルな色• WCAG2.0 や JIS-X8341-3:2010 を踏まえ：

‒ 等級Aではカラーコントラストの規定がないがそれでいいのか

‒ コントラスト比が4.5:1、もしくは7:1あれば問題なく読めるのか。人によって読みにくいということはないのか

‒ 隣接する前景色や背景色のコントラスト比はどうしたらいいのか

‒ コントラストを考えるときの「大きな文字」とはどれくらいからなのか

アクセシブルな色• WCAG2.0 や JIS-X8341-3:2010 を踏まえ：

‒ WCAG 2.0の「1.4.1 色の使用」(レベルA)を達成するために円グラフなどの色の凡例に縞々やドットなどのパターンをつけるという方法がありますが、色覚異常の方に判別がしづらい色、あるいは明度がまったく同じ色でその縞々やドットのパターンを作ってしまったら、利用者によって、また白黒印刷したときなどにパターンが判別できない事態が起こるのではないか、ということが気になります。

例えば、こういう時

http://jfly.iam.u-tokyo.ac.jp/color/

チェックと問題解決

Five Simple Step- Colour Accessibility

http://www.fivesimplesteps.com/products/colour-accessibility

色覚問題に関する指導の手引き

http://www.nig.ac.jp/color/monbushou_tebiki_1.html

カラーユニバーサルデザイン機構

http://www.cudo.jp/

カラーユニバーサルデザインガイドブック

http://www.pref.fukushima.jp/kenmin/u_d/fud/cud/cud_02.html

WE ARE COLORBLIND

http://wearecolorblind.com/

色弱模擬フィルタ

http://www.variantor.com/jp

Photoshop

http://www.adobe.com/jp/joc/pscs4/showcase/vol02/tips/

カラーユニバーサルデザインとその実践例

視覚以外での色の伝達

事例：色を音で表現する

• http://www.youtube.com/watch?v=N8eHCAwGUfo

事例：カラートーク

色名を知りたい物体の表面に、カラートーク本体をあて、ボタンをワンプッシュ。センサーが測定して、そのデータにより系統的に分類してある色を選びだし、色名を音声でお伝えします。

http://www.hokkei.co.jp/c_1.html

事例：色のイメージを伝える• 本書の題名になっている『今日の風、なに色?』は、

伸行が言った言葉からとっています。

眼が見えない伸行に色というものを理解させるために、「りんごの赤」「バナナの黄色」などと教えていました。

すると伸行は「じゃ、今日の風はなに色?」と聞いてきたのです。

眼が見えない伸行にとっては、大好きな食べ物に色というものがあるなら、同じく大好きな風に色があっても不思議はありません。(本書より)

赤丼・青丼・白丼・黒丼• 赤丼：鮭、いくら

• 青丼：青魚

• 白丼：しらす、イカ、鯛

• 黒丼：まぐろ（！）

さあ、みんなで考えよう！

色とは？

見分ける

どう見える？

色依存印象と選択

アクセシブルな

色

チェックと問題解決

視覚以外の伝達