::Webデザインや配色に役立つ(かもしれない)テクニック、便利なツールを紹介しています。使えるカラーピッカーはないかなぁと探していたら、とっても高機能で使いやすいツールを発見!配色を自動的に計算してくれるツールはいろいろありますが、今回はアクセシビリティを考えた優しいツールをご紹介します。アクセシビリティの高い背景色と文字色の組み合わせを、リアルタイムに確認することができるツールです。サイトやディスプレイ上に表示される色をスポイト機能を使って簡単に取得し、文字色と背景色の見やすさを診断してくれます。こんな感じ↓(クリックで拡大)全ての人のために読みやすくアクセシビリティを考えるのは、色覚障害を持つ人や高齢者のためだけではありません。サイトでの滞在時間は約1分と言われていますが、長時間パソコンに向かって目の疲れた状態だと、文字と背景色が同系色のページや、派手な色使いはさらに訪問者を疲れさせてしまいます。色だけに頼らないグレー濃度の差では、色の違いが判別できない場合もあるので、一度自分のサイトをモノクロの状態でチェックするといいと思います。GrayBitURLを入れるとグレースケール変換してくれるサイトこのブログをモノクロにするとこんな感じです。わたしは今のところ、白背景(ffffff)にテキストは少し薄い黒(555555)という無難な組み合わせです...。関連フォントとリンク色のカスタマイズリンクの表示も「詳しくはこちら」など、色だけの情報に頼らないことも大切だと思います。Color*.Comments文字色変えました?読みやすくなったような気がします。背景白+文字灰色という組合せはよく見るのですが、灰色が薄いブログが多く、非常に読みにくい所が多い。僕は大体反転させて読みます。僕は主に液晶でブログを読むのですが、液晶の輝度は相当下げています。(0〜8の中の、2にしています)この輝度で見ると、女性に多い中間色系のブログはとても読みにくい。自分のデザインをチェックするために閲覧環境をわざと悪くする、と言うのも、デザインを考える際のテクニックになると思います。13:43■LSTYさん読みやすくなったと言われて、ほっとしました。記事本文の文字色は、だんだん濃くしていったんですが、白に真っ黒でも逆に目が疲れますね。よくても、Winで見ると濃すぎてビックリということもあります。>自分のデザインをチェックするために閲覧環境をわざと悪くする誰もが最新のモニターで見ているわけではないので、いろんな環境でチェックできるといいですね。会社でいちおうチェックはしています(笑)コメントありがとう。?Webデザインや配色に役立つ(かもしれない)テクニック、便利なツールを紹介しています。無駄にエロい人オンナ心は複雑ですが、シンプルでわかりやすいデザインを目指しています。::×この広告は180日以上新しい記事の投稿がないブログに表示されております。