2006-07-03 Mon

背景色と文字色の見やすさをチェック RSS あとで読む kwout this!

color

 以前色を決めるときに使っていて便利だった Color Schemer が Windows 用しかないので、Mac で使えるカラーピッカーはないかなぁと探していたら、とっても高機能で使いやすいツールを発見!

 配色を自動的に計算してくれるツールはいろいろありますが、今回はアクセシビリティを考えた優しいツールをご紹介します。

ColorSelector5.0 : FUJITSU Japan win mac
 ColorSelector は、アクセシビリティの高い背景色と文字色の組み合わせを、リアルタイムに確認することができるツールです。
サイトやディスプレイ上に表示される色をスポイト機能を使って簡単に取得し、文字色と背景色の見やすさを診断してくれます。

こんな感じ↓(クリックで拡大)
colorselector


全ての人のために読みやすく

 アクセシビリティを考えるのは、色覚障害を持つ人や高齢者のためだけではありません。
 サイトでの滞在時間は約1分と言われていますが、長時間パソコンに向かって目の疲れた状態だと、文字と背景色が同系色のページや、派手な色使いはさらに訪問者を疲れさせてしまいます。

大原則:目の疲れた状態でサイトを見直そう:: ウェブデザインの基本マナー

色だけに頼らない

 グレー濃度の差では、色の違いが判別できない場合もあるので、一度自分のサイトをモノクロの状態でチェックするといいと思います。

GrayBit
URLを入れるとグレースケール変換してくれるサイト
 このブログをモノクロにするとこんな感じです。
 わたしは今のところ、白背景(ffffff)にテキストは少し薄い黒(555555)という無難な組み合わせです…。

関連
フォントとリンク色のカスタマイズ
 リンクの表示も「詳しくはこちら」など、色だけの情報に頼らないことも大切だと思います。
GIGAZINE - AJAXで配色を決める無料サービス「Accessibility Color Wheel」
 OK!が表示されれば OK!

del.icio.us コメントを表示 はてなブックマークはてなブックマーク livedoorCriplivedoorCrip Yahoo!ブックマークに登録 Yahoo!ブックマーク
posted by らぶ | Comment(2)  | TrackBack(0)  | 03 Color*.
Comments
 文字色変えました?読みやすくなったような気がします。
 背景白+文字灰色という組合せはよく見るのですが、灰色が薄いブログが多く、非常に読みにくい所が多い。僕は大体反転させて読みます。
 僕は主に液晶でブログを読むのですが、液晶の輝度は相当下げています。(0〜8の中の、2にしています)この輝度で見ると、女性に多い中間色系のブログはとても読みにくい。
 自分のデザインをチェックするために閲覧環境をわざと悪くする、と言うのも、デザインを考える際のテクニックになると思います。
LSTY at 2006-07-03 13:43
■LSTYさん
読みやすくなったと言われて、ほっとしました。
記事本文の文字色は、だんだん濃くしていったんですが、白に真っ黒でも逆に目が疲れますね。

モニターによる色の違いもありますが、Mac とWin でも微妙に色が違ったり、
Mac ではちょうどよくても、Winで見ると濃すぎてビックリということもあります。

>自分のデザインをチェックするために閲覧環境をわざと悪くする
誰もが最新のモニターで見ているわけではないので、いろんな環境でチェックできるといいですね。
怒られるかもしれないけど、会社のモニターがCTRの上、さらに古いので、
会社でいちおうチェックはしています(笑)
コメントありがとう。
らぶ at 2006-07-03 20:05
Add Comment
Name:

URL:

Comment:

Trackback
この記事へのTrackBack URL


人気エントリー Top 10
MoMAstore
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。