テキストの可読性のチェック方法

どんなにステキな内容のテキストが書かれていたって、テキストが読みにかったらそれだけでマイナスです。
たとえば、白(#FFFFFF)背景に灰色(#CCCCCC)文字。読めません。
ということで、読みやすいであろう明度差、色差のチェックの方法が、なんと計算式で存在します。

明度差チェックの計算式

  1. 文字色、背景色それぞれの色のRBG値を0〜255の10進法で記します。
    それぞれ R xx、G xx、B xx とします。※xxは0〜255の数値が入ります。
    フォトショ系の画像処理ソフトがあると便利です。
    グループの一覧表示
    ↑ここです。
  2. 計算式{( R × 299 )+( G × 587 )+( B × 114 )}÷ 1000 で文字色、背景色の明度を出します。
  3. 文字色、背景色の明度差が125以上あれば読みやすいテキストといえます。

色相のチェック計算式

  1. 文字色、背景色それぞれの色のRBG値を0〜255の10進法で記します。
    文字色、背景色を比較して数値の大きいほうを maxR、小さいほうを minR のようにします。RGB分全部用意します。
  2. 計算式( maxR – minR )+( maxG – minG )+( maxB – minB )で文字色、背景色の差を出します。
  3. 文字色、背景色の色差が500以上あれば読みやすいといえます。

2 件のコメント

  • おお!すごい!わかりやすくていいですねぇコレ!
    ケータイサイトなんかつくるときに最高じゃないですか。すごいなぁ。
    これってやっぱり16進数のアレでつくったんでしょうか?
    …心底お疲れ様でございます。
    そして活用していただいてありがとうございます!

    こっそりバージョンアップを期待しております。

  • コメントを残す

    メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

    CAPTCHA