こんにちは、にゃんこ師匠です。社内では1、2を争う猫好きで知られています。このブログでは主にデザインの視点に力点を置いた記事を担当する予定です。よろしくお願いします。

今回から3回にわけてアクセシビリティと色について解説します。今回はその1回目です。

色のコントラストと文字の大きさの関係

どんなに目立つ大きさにしても「背景色」と「文字色」のコントラストを明確にしないと識別が難しくなります。特にウェブサイトにおけるコンバージョンを追求するEFOでは1秒未満の高速な視認性に高い配慮が必要です。

瞬間的な判別には「一瞬で読める文字」「視線を誘導する色」を両立させる必要があり、どちらか1つでは「配慮に不足している」と言われています。

ポイントの1つになるのが輝度差=コントラストの確保です。背景と文字のコントラスト比が大きくなれば「読みやすく」、コントラスト比が低ければ「読みにくく」なります。

20141003007

また、目への負担を考慮してモニターのコントラストをOS設定で暗くしているユーザも少なくありません。LCDや液晶パネルも発色に大きな違いがあります。よって、コントラスト比は高いほど良いと言えます。

色覚異常でもコントラスト比は認識できる

一定確率で存在する先天性色覚異常。特に先天赤緑色覚異常は比較的多くいます。

日本人では男性の4.50%、女性の0.165%が先天赤緑色覚異常で、日本全体では約290万人が存在する。白人男性では約8%が先天赤緑色覚異常であるとされる。

http://ja.wikipedia.org/wiki/色覚異常

Wikipediaにもある通り、先天性色覚異常は遺伝的形質で常に一定の割合があります。色を扱う場合、まず、この事実に配慮する必要があります。先天赤緑色覚異常では赤や緑が判別しにくくなります。

信号なら並び順でも判断できますし、明確に見える事が多いため問題有りませんが、初見の購入フォームでは欠けている色を推測できません。この色は「赤や緑に見えない、もっと淡い色に見えているかも知れない」事を考慮する事も重要と言えます。

アクセシビリティが重要なフォーム入力では、こうした色が認識しにくい方のためにコントラストに関する配慮も重要です。

背景のコントラストと錯視にも配慮を

単にコントラストを確保するだけでは十分と言えません。次に重要になるのは背景色が与える色の錯視です。

20141003

大きな文字では赤の方が読みやすく、小さな文字はモノクロの方が読みやすく感じます。あるいは、そもそも赤背景が読みにくいと感じる方もいるでしょう。コントラスト比は一緒です。

このようにコントラストの違いだけではなく、背景と文字色の組み合わせにより印象が大きく異なります。人間の視覚のメカニズムにも配慮するのが、よりベターな入力フォームとなるでしょう。

その他、詳細な錯視の効果については以下のサイトが参考になります。

【参考】色彩の錯覚と錯視効果
http://dessin.art-map.net/technic/level19/05.htm

イメージ写真はクリエイティブコモンズ・ライセンスに基づき掲載しています。 写真掲載元:Julio César Cerletti García