続きを読む… »

文字の読みやすさ

文字が読めるかどうかは、ウェブサイトの配色の中で最も重要な要素です。どんなにきれいな印象の色が出来上がっても、文字が読めなければ、伝えたい情報が伝わりません。最低限の機能を果たすためには、読めるような色の組み合わせにしておく必要があるのです。

文字を読みやすくするためには、背景色と文字色の明度の差が最も重要です。基本的には差が大きければ大きいほど、読みやすくすることができます。

ネットショップの場合、全体の背景色に一番多く使われるのは白か薄い色になるはずです。高彩度色などの強い色を使うと、文字だけでなく、商品写真も見えにくくなりますので、一部を除いては避けた方が無難です。

白い背景色と最も明度差のある色は黒になりますが、モニタで見る場合には、白(#000000)と黒(#FFFFFF)の組み合わせはコントラストが強すぎると感じられることがありますので、#333333から#666666くらいまでの濃い灰色の文字色を選ぶのが一般的です。

文字の読めるかどうかをツールでチェック

文字と背景の色が白・灰色・黒以外の場合には、どのくらいの色にすれば読みやすいのかわからないことも多いでしょう。その時には無料のツールなどを使って、客観的な判断をすることも出来ます。

このようなツールには様々なものがありますが、まずは富士通(株)が提供しているカラーセレクターをおすすめします。6桁のRGB値がわからなくとも、スポイト機能が付いていますので、実際に使っている文字色と背景色を画面上から拾い出して、読みやすいかどうか判断することが出来ます。

単に読みやすいかどうかだけでなく、「一般」、「白内障」、「第一色覚(赤)」、「第二色覚(緑)」、「第三色覚(青)」と様々な色覚特性について、それぞれに○(まる)、×(ばつ)を付けてくれるので、ページのバリアフリー化を実現することも可能です。

もう一つは(株)インフォアクシアが提供しているカラー・コントラスト・アナライザーです。こちらはW3C(ワールド・ワイド・ウェブ・コンソーシアム)というウェブの標準的な規格などを策定している団体が提唱する、WCAG2.0(ウェブコンテンツ・アクセシビリティ・ガイドライン)に定められたコントラスト比という基準が達成されているかどうかをチェックするものです。

こちらもスポイトが付いていますので、現状のサイトの文字が読めるかどうかを判断して、すぐに改善することが出来るでしょう。

文字が読みにくいあるいは読めないサイトは、それだけでユーザーがページから離れる要因となります。配色の美しさは二の次にして、今すぐ改善しましょう。

« 隠す