Web制作

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

この記事は2008年1月に公開したものです(18年以上前)。当時の情報にもとづいており、現在の仕様とは異なる場合があります。

どんなにステキな内容のテキストが書かれていたって、テキストが読みにかったらそれだけでマイナスです。
たとえば、白(#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以上あれば読みやすいといえます。

ウェブサイトの制作・改善や、社内の困りごとのご相談を承っています。

相談してみる