笑顔計画|デザイナー's WEB SITE

コントラストの数値化

2018.06.07

この記事は約1分で読めます。

デザインをしていて日頃気をつけていることのひとつに、「背景色と乗せる文字などとのコントラスト」があります。 ここからはWEBにおける話になりますが、印刷物でも気にしています。 コントラスト比にはJIS規格があり、それに従うと、画像化された文字や背景と文字のコントラスト比は4.5:1がルールだそうです。 数値化されると感覚で捉えなくていいのでありがたいです。 が、 普通背景色と文字を見て「このコントラストはxx:xx」なんて正確な数字を言えることなんてあるのか!?と思いますよね。 そんなときの便利ツールがあります。 色のコントラストチェッカー   サイトでは背景色と文字色を入れると、自動でコントラスト比を計算してくれます。 極端な例で試してみました。 まずは背景色:白、文字色:白。当然文字は見えません。 コントラスト比1です。   次に背景色:白、文字色:黒。当然くっきり見える状態です。 今度はコントラスト比21です。文字の大きさや文字間・行間はまた別物です。 可読性という意味では問題なく、ただ少し読んでいて疲れるときもあるかもしれません。 私はもう少し文字色の濃さを落として、疲れないようにしてますね。 このサイトは背景色:白、文字色:#555です。7.45:1になります。   では背景色白に対して4.5:1の比率に近いのは何色になるのか。 グレーの度合いを検証してみました。 結論、背景色:白、文字色:#767676です。   #767676の文字色は これが#767676のグレーです。
#767676
少し柔らかい感じの色合いになりますね。 実際この色だけで書かれると、少し読みづらくなってくるかもしれません。   読みやすさを重視すると言う意味では、文字色・文字サイズや行間も大切ですが、コントラストも大切です。

こんな記事もあります

カテゴリ一覧へ戻る

コメントをどうぞ

メールアドレスは非公開です。お気軽にコメントください。全項目入力必須項目です。

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

プライバシーポリシー

Copyright© 笑顔計画 All rights reserved.