« Zippo のカイロ | トップページ | ロン!シンメトリー »

2005/01/21

色覚特性と Web デザイン

ある掲示板での雑談をきっかけに,色覚障碍のことを少し調べてみた。参考になるサイトがいくつか見つかったが,その中でも Microsoft が掲載しているコラムは分かりやすくまとめられている。
昨年制定された JIS X 8341-3JIS検索)にも,ウェブサイト制作において「利用者の色覚特性」に配慮すべきことが示されているし,少なくともコントラスト(明度差)には気をつけてきたつもりだったが,上記コラムを読むと,一見コントラストが確保されていても色の組み合わせによっては,色覚障碍を持つ人にとって見づらい,あるいはほとんど見分けられない場合があるようだ。しかし,それを把握するのはなかなか難しいと思う。
そこで,コラムの後段「ソリューションの発見」で解説されている,グラフィックソフトを用いて行なうサイトや画像の配色のテストを,実際に Adobe Photoshop を使って試す方法を考えてみよう。

[1. CLUT Files]手順を簡単にするために,あらかじめ上記ページに載っている三種の色覚特性によって異なる見え方を反映したカラーパレットを,Photoshop の CLUT(Color Look-Up Table)として保存したものを用意した。通常これらは Photoshop の「プリセット」内「最適化カラー」フォルダに入れておけば良いだろう(見つけられさえすれば,どこに置いてもかまわない)。

[2. Indexed Color]まず,テストしたい画像(サイトのスクリーンショットや使用するボタン画像など)を Photoshop で開いて,それを[イメージ]メニューの[モード]から[インデックスカラー...]に変換する。そのときパレットは「Web」を選ぶこと(コラムでも説明されている「216色のセーフパレット」と同じ)。
元画像が GIFPNG-8 であり(すでにインデックスカラーになっている),かつ「Web」以外のパレットを持つ場合には,いったん RGB に戻したうえで,あらためて「Web」インデックスカラーに変換しなおす必要がある。

[3. Image menu]つぎに,再び[イメージ]メニューから,[モード]>[カラーテーブル...]を選ぶ。

[4. Color Table Dialogue]このときダイアログに並んでいるのが,216色の Web セーフカラーだ。
そこで[読み込み...]ボタンを押して,反映させたいパレット(例えば“ColorSense_1.act”)を選ぶ。

[5. Load Color Table]すると,対象画像のカラーパレットが置き換わって,色覚特性に応じた見え方をシミュレートできる。「プレビュー」にチェックしておけば,実際に適用しなくても結果が分かるので,そのまま三種のパレットを順に読み込んで,それぞれの場合にもきちんと判読・判別できるかどうか確認しておきたい。

|

« Zippo のカイロ | トップページ | ロン!シンメトリー »

コメント

ユーザビリティー大切ですね。
色は明度差をしっかり考える。
それ以上にALT属性を完璧にする。
と、学生にはいっとりますが、自分のサイトは無理(^_^;)

投稿: HAL_ | 2005/01/21 22:00

「ユーザビリティ」というより「アクセシビリティ」に関することですね。
「ユニバーサルデザイン」という概念に包摂されるものかもしれませんが。

もちろん,ウェブにかぎらず,さまざまなデザイン領域で配慮すべきことでしょうね。
その点で,たとえば iPod Shuffle のステータスランプが,「緑色:バッテリー良好 / オレンジ色:バッテリー低下 / 赤色:バッテリー不足」という具合に,色だけで状態を示すなんていうのは問題がありそうです。
http://docs.info.apple.com/article.html?artnum=300553-ja

富士通の ColorDoctor というチェッカーがありました。
http://design.fujitsu.com/jp/universal/assistance/colordoctor/
(フリーウェア・WindowsXP に対応 ^^;)

投稿: rinsho | 2005/02/09 04:47

その後、Mac用のチェッカーとして、Sim Daltonism というものが出ていました。
http://michelf.com/projects/sim-daltonism/

投稿: rinsho | 2008/04/11 07:20

さらに追記: Adobe Illustrator のプラグインとして、
PlugX-カラーUDパレット(株式会社地理情報開発)というのもありますね。
http://www.chiri.com/plugx_colorudpalette.htm

投稿: rinsho | 2008/04/11 16:37

コメントを書く



(ウェブ上には掲載しません)


コメントは記事投稿者が公開するまで表示されません。



トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/10582/2647589

この記事へのトラックバック一覧です: 色覚特性と Web デザイン:

« Zippo のカイロ | トップページ | ロン!シンメトリー »