視認性・可読性の確保

誰もが読みやすい・見えやすい画面を作るためにはコントラスト比というものを考えた配色が必要です。JIS X8341-3, 5.5.cの規格にも適合するように文字色と背景色を決めましょう。

視認性・可読性と明度差

JISX8341-3 5.5.cに対応する部分で、視覚特性によっては背景色と文字色の関係から読みにくい組み合わせが存在することが指摘されています。

文字の見えやすさを視認性、読みやすさを可読性と言いますが、これは主に背景色と文字色の明度差に依存します。色覚障害の場合や加齢による場合など様々な条件が考えられますが、適切な視認性・可読性を確保するには、一般的には中央のサンプルのように明度差を大きく取るようにします。弱視の方などでOSのハイコントラスト機能を使って画面を閲覧する場合でも明度差がないと文字の判別がしにくくなります。

読みにくい色の組み合わせと改善例また画像などの場合には、明度差の大きな色で文字を縁取りしてやることによって、読みやすくなることがあります。

WCAG2.0(JIS X8341-3:2010)によるコントラスト比を使った色差計算

ウェブの様々な規格を制定するW3C(World Wide Web Consortium)のアクセシビリティ・ガイドラインであるWCAG2.0では、コントラスト比を用いた計算方法が推奨されています。

計算方法は難しくないのですが、株式会社インフォアクシアが簡単にチェックできるツール「カラー・コントラスト・アナライザー」を公開しておりますので、それを利用するとよいでしょう。

この規格はWebコンテンツJIS(JIS X8341-3:2010)の2010年改訂版で、そのまま採用されております。計算方法なども「JIS X8341-3:2010における文字コントラストの達成基準」のページで詳しく記述しておりますので、そちらも参照してください。

以前使われていた明度差と色差に基づく基準値

W3Cの「Techniques For Accessibility Evaluation And Repair Tools」の中で読みやすさの計算式の試案が提示されていました。現在は前述のコントラスト比が使われていますが、こちらも十分の参考になりますので、リンク先のページでぜひ一度お試しください。

明度差の計算式

  1. 文字、背景それぞれの色のRGB値を0～255の10進数で表し、それぞれR, G, Bとする
  2. 文字色、背景色の明るさを計算式 ((R x 299) + (G x 587) + (B x 114)) / 1000 で計算する
  3. 明度差が 125以上あれば、まず読みやすいと考えてよい

色差の計算式

  1. 文字、背景それぞれの色のRGB値を0～255の10進数で表し、数値の大きい方と小さい方をそれぞれmaxR、minRのようにする
  2. 色の差を計算式 (maxR - minR) + (maxG - minG) + (maxB - minB) で計算する
  3. 色差が 500 以上あれば、まず読みやすいと考えてよい

実際に計算を行うのは非常に大変なことですが、既出のカラーコントラストチェッカーを用いれば、計算することなく視認性・可読性を確保することが出来ます。