スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Webの配色判定ソフト

文字と背景の配色が悪いと、とても見づらいWebサイトになってしまいます。
そんなことにならないよう、色の明るさや色相の差を調べて、適切な配色かどうか判定してくれるフリーソフトを紹介します。
その名もズバリ読みやすいHTML色作りツールです。
パソコンのモニタや色覚の個人差を考慮すると、文字の場合背景色との明度差125以上&色差500以上であるのが望ましいのだそうですが、このソフトは画面から取得した2色や自分で作成した任意の2色について、その条件を満たしているかどうか瞬時に表示してくれます。

このソフトを使って、文字と背景の配色を調べてみました。
次にあげたのは、十分な明度差&色差がある、良い例です。
(#以下は上が文字、下が背景の16進法色表記)
文字と背景のコントラストが高い例

上の二つは完全な白と黒の組み合わせです。
人によっては、ちょっとコントラストが強すぎると感じるかもしれませんね。
下の2つの方が見やすい人もいるでしょう。

次も比較的良い配色です。
オシャレな雰囲気もありますし。
字が読みやすい配色の例

さて、この後は「問題な配色」です。
まず明度差はそれなりにあるが、色差が基準以下の例です。
イエローカードでしょうか。
字が読みにくい配色の例

ちょっと判定が厳しいのでは?と思うかもしれませんが、実際はこれより字が小さかったり、文が長かったりするわけです。
やはり、もう少し見やすい配色にすべきですね。

最後は、明度差も色差も基準以下のレッドカード配色です。
非常に字が読みにくい配色の例

・・・・・・・・ありますよね~、こういうサイト。(-_-;)
こういうのに限って、管理人は「いいデザインだ」などと思っていることが多いので、困りものです。

環境や個人差による色の見え方の違いも考慮すると、サイトの配色が適切かどうか自分だけで判断するのは意外に難しいのです。
この「読みやすいHTML色作りツール」で、あなたも自分のサイトを調べてみてはいかがでしょうか。

なお、こちらの記事もご参考に⇒色の見え方は皆違う!

テーマ : フリーソフト
ジャンル : コンピュータ

コメントの投稿

非公開コメント

★ カテゴリー ★
全ての記事

全ての記事を表示する

最新のコメント
お役立ちサイト
訪問者数
★ 最新の記事 ★
スポンサードリンク
サイト内検索
管理人のWebサイト
★ランキング参加中★

RSSフィード
QRコード
QR
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。