Webデザインにおいて、色というのは、非常に重要な要素であり、配色によっては、そのサイトの良し悪しが決まるといっても過言ではない、と思う。
なので、サイトデザインの際は、配色については、細心の注意を払って考えなければならいのだが、果たして、これは本当に考えられているのだろうかと疑問に感じました。
あるWebサイトを見たとき、非常に目が痛くなるような配色を使っていたのです。(サイト名は伏せておきます。)
そのサイトのデザインをしたのは、僕の知り合いのWebデザイナーなのです。
デザインというのは、デザイナーの思うようにデザインできるのが一番良いのですが、Webサイトの場合はちょっと違います。(Web以外でもあると思いますが・・・)
ここでは、敢えて、広い意味で言わせてもらいます。
Web標準に準拠したWebサイトこそが、良いWebサイトである。
Web標準に準拠したWebサイトというのは、W3Cのガイドラインに沿って作っていくのですが、結構色んな人が思っているのは、XHTMLとCSSのみです。XHTMLとCSSで作るのがWeb標準であると思っているのです。
もちろん、間違ってないのですが、XHTMLとCSSで作れば良いのでしょうか？
完全に違います。Web標準に準拠したというのは、他の要素もあるのです。
具体的に、他の要素の代表格が、WCAGです。
WCAGは、Web Content Accessibility Guidelinesの略で、このWCAGの中で、下記引用。
最低限のコントラスト：テキストおよび画像化された文字の視覚的な表現には、少なくとも 4.5：1 のコントラスト比をもたせる。
と、あります。
単純に言うと、ちゃんとコントラスト比を持たせているのか？ということです。
自分の好きな色だけで配色するのは非常に危険です。人によっては害を及ぼすかもしれないからです。
目がチカチカさせるような配色は気をつけなければなりませんので、配色は慎重に考えてデザインを心がけてください。
また、このコントラスト比の計算方法が存在します。
明度差
((R×299)+(G×587)+(B×114))/1000
計算した値が125以上あれば読みやすいという判定。
色差
(maxR-minR)+(maxG-minG)+(maxB-minB)
計算した値が500以上あれば読みやすいという判定。
また、コントラストチェッカー等あるので、サイトデザインの時にでも使うことを強くオススメします。下記がコントラストチェッカーのリストです。
- WebAIM: Color Contrast Checker
- Colour Contrast Check - snook.ca
- カラーコントラストチェッカー V2.0
- ColorSelector : 富士通
コメントする