サイトのコントラストチェック

こんにちは。
アイ・カンパニーの井出です♪

今日は、ちょっとマイナーですが、WEBサイトを制作・運用される方には
押さえておいて頂きたい「色彩のコントラスト」について
ご紹介します。

サイトを作成する際に、イメージカラーやインパクトを与える色、センテンスごとの色など
様々な場面で、様々な色を使用するかと思います。

その時に気にかけたいのが「コントラスト」。
例えば、濃い緑の背景に黒い文字では、とても読みにくいですよね？
最も強いコントラストは白と黒ですが、黒い背景に白い文字も、ちょっと眼が疲れます。

また、色覚障害をお持ちの方がサイトを見た場合、どのように見えるのかを
意識する事も大切です。

画像にaltを入れたり、きちんとしたHTML構文で段落や見出しを付けるのは
視覚障害をお持ちの方でも、音声によってサイトを正しく理解できるようにする為です。

同じように、コントラストが微妙であったが為に色覚障害をお持ちの方が
読みにくいサイトを作らないよう、きちんとコントラストを意識する必要があります。

背景色と文字色を入力すると、コントラスト度がどの程度で
OKかNGかを判定してくれます。

W3Cやリントによるチェッカーでも、微妙なコントラストには警告を出してくれますが
こちらのサイトはより厳密です。

また、実際に色覚障害をお持ちの方の見え方を、段階ごとに再現してくれるサイトはこちら。
→アクセシビリティ・カラー・ホイール

上の「1」番のところに背景色と文字色を記入すると、下の「第1」～「第3」までの
色覚障害者の見え方が表示され、コントラスト度がOKかNGかが判定されます。

*********************************************************************

どんなユーザーにも、正しく情報を届けられるサイト作りを
目指していきたいものですね。