2008年11月04日
文字色と背景色のコントラストが一目で分かる「Colour Contrast Check」、16進数表示
スポンサード リンク
サイト製作をしていると、たまに色に悩む時があります。
「この背景色の上に表示されるテキストはどんな色がいいかなぁー？」とか。
そんな時に便利なのが、「Colour Contrast Check」というサイトです。
このサイトは、文字色と背景色を決めるのに非常に便利です。
しかも、色が１６進数で表示されるので、Photoshopなどのアプリケーションを開かなくても、そのままHTMLファイルを編集することができます。
まずは、上のキャプチャのように「Foreground Colour」で文字色を決めます。
それから「Background Colour」で背景色を決めると、「Results」に選んだ色の組み合わせの結果が表示されます。
「Brightness Difference」には「明るさの差」、「Colour Difference」には「色味の差」が表示され、「Are colours compliant?」にはW3Cの基準に準拠している場合は「YES!」が、準拠していない場合は「NO!」が、どちらとも言えないような微妙な場合は「sort of」が表示されます。
様々な色の組み合わせをチェックしてみると「NO!」でも十分に視認性が確保されている印象の組み合わせもあったりします。
個人的には、ちょっとHTMLで色を変更したい時に、わざわざPhotoshopを開く必要なく１６進数で色が拾えるのがいいかなと。
僕のパソコンは３年以上前に買ったものなので、Photoshopを開くだけでもちょっと時間がかかるんですよね。。
スポンサード リンク
