配色と可読性とは?視認性の高い色の組み合わせを明度差から解説

配色と可読性の基本

まずは可読性という言葉の意味と、色のどの要素が読みやすさを左右しているのかを押さえましょう。

配色と可読性とは何か

可読性とは、文章をストレスなく読み進められるかどうか、つまり「文字の読みやすさ」のことです。

配色と可読性とは、文字の色と背景の色の組み合わせが、この読みやすさにどう影響するかという考え方を指します。

読みやすさは書体・文字の大きさ・行間などでも変わりますが、この記事では「色」の目線にしぼって解説します。

文字の目線から見た読みやすさは、読みやすい本文の記事で解説しています。

文字・色・レイアウトを合わせた可読性の全体像は、可読性とは?で整理しています。

読みやすさを決める主役は「明るさの差」

色で読みやすさを決める一番の要素は、文字と背景の「明るさの差」です。

色には色相(赤・青・緑といった色み)、明度(明るさ)、彩度(鮮やかさ)の3つの性質がありますが、文字の輪郭をくっきり見せるのは、このうち明度の差です。

Webアクセシビリティの国際的なガイドラインであるWCAGでも、文字と背景の「コントラスト比」は、色みではなく明るさ(相対輝度:人の目が感じる明るさに合わせて、一番暗い黒を0、一番明るい白を1として表した値)の差だけから計算します。

WCAGの解説書では、色の見え方に個人差があることを踏まえて、「色が主要因とならないような方法でコントラストを算出している」と説明されています(WAICによる日本語訳)。

色の見え方の違い(色覚の多様性)と、色に関わるWCAGの基準は、色のアクセシビリティとは?で解説しています。

明るさの差がどのくらいあるかは、色からいったん色みを取り除き、明るさだけを残したグレーにしてみるとよく分かります。

色の明るさ(明度)と、色み(色相)・鮮やかさ(彩度)の違いは、色の三属性とは?で解説しています。

それぞれ左半分が元の色、右半分が明るさだけを残してグレーにした見本

左の見本の赤と緑は、色みはまったく違うのに、グレーにするとほとんど同じ明るさになり、文字が消えてしまいます。

右の見本の淡い黄色と焦げ茶は、グレーにしても文字がはっきり残ります。

つまり、読みやすい色の組み合わせとは「色みが違う組み合わせ」ではなく、「明るさが十分に違う組み合わせ」なのです。

この明るさの差を1:1〜21:1の数値で表したものがコントラスト比で、基準の詳細はコントラスト比とは?WCAGの基準をやさしく解説で解説しています。

色相や彩度の差だけでは読みやすくならない

色相(色み)の差や彩度(鮮やかさ)の差は、明るさの差がなければ、読みやすさにはほとんどつながりません。

理由は、上の見本で見たとおり、目が文字の形を読み取る手がかりは明暗の境目だからです。

色相の差だけの例が、先ほどの赤地に緑の文字です。

彩度の差だけの例として、鮮やかな青の文字を、同じくらいの明るさのくすんだ青灰色の上に置いてみます。

鮮やかさが違っても、明るさが近いと文字は沈んでしまう

左の見本では、文字の鮮やかさと背景のくすみははっきり違うのに、明るさがほぼ同じなので文字が背景に沈んでいます。

右の見本では、同じ青系でも文字を暗く、背景を明るくしたことで、明るさの差が生まれて読みやすくなっています。

色相や彩度は、印象やブランドらしさをつくる役割と考え、読みやすさは明るさの差で確保すると覚えておきましょう。

明度・彩度が与える印象については、明るい色・暗い色の印象の違いとは?と鮮やかな色・くすんだ色の印象の違いとは?で解説しています。

色の組み合わせで可読性が下がる3つのパターン

明るさの差が足りないと読みにくくなるのは分かりやすい例ですが、ほかにも色が原因で読みにくくなる代表的なパターンが3つあります。

パターン1:鮮やかな色同士のハレーション

1つめは、鮮やかな色同士を組み合わせたときに起きる「ハレーション」です。

ハレーションとは、彩度の高い色同士が隣り合ったとき、境目がチカチカしてまぶしく見える現象のことです。

明るさが近い鮮やかな色どうしだと境目がはっきりせず、色がにじんだりチラついたりして見えるため、文字を長く読むと目が疲れやすくなります。

先ほどの赤地に緑の文字の見本のように、鮮やかで明るさが近い色同士では、読みにくさに目の疲れが加わります。

鮮やかな色を背景に使いたいときは、背景を少し暗く(または明るく)して明るさの差をつけ、文字は白や黒に近い色にするのが基本です。

ハレーションが起きやすい組み合わせは補色とは?、文字色での避け方は背景色と文字色の組み合わせとは?で紹介しています。

パターン2:柄や写真の上に文字を置く

2つめは、ストライプなどの柄や写真の上に、直接文字を置くパターンです。

柄や写真は場所によって明るさが違うため、文字のある部分では読めても、別の部分では背景に溶け込んでしまいます。

明暗の縞模様の上に、焦げ茶の文字を置いた見本

左の見本では、白い縞の上の文字は読めますが、暗い縞の上では文字の一部が欠けて見えます。

右の見本のように、文字の後ろだけに無地の面を敷くと、柄を見せたまま読みやすさを確保できます。

WCAGの失敗例(基準を満たさない典型例)をまとめた資料でも、背景画像の上の文字は、文字の背後で一番暗い部分(暗い文字の場合)または一番明るい部分(明るい文字の場合)とのコントラストを確かめるよう示されています(F83の日本語訳)。

全体の平均では読めても、一番条件の悪い場所で文字が背景に溶けると、そこだけ読めない文字が出てしまうからです。

写真の上の文字を読みやすくする具体的な方法は、写真と文字色の組み合わせとは?で解説しています。

パターン3:小さく細い文字に、ぎりぎりの色を使う

3つめは、文字の大きさと色の明るさの差がつり合っていないパターンです。

文字が大きく線が太いほど、少ない明るさの差でも読めますが、小さく細い文字ほど大きな差が必要になります。

小さく細い文字は表示に使える点(ピクセル)が少なく、線のふちが背景の色と混ざった中間の色で描かれるため、実際の色よりも薄く見えやすいからです。

WCAGでも、本文など通常の文字には4.5:1以上、大きな文字には3:1以上と、文字の大きさで基準が分かれています。

その理由は、解説書で「より大きい及びより広い文字ストロークを持つテキストは、より低いコントラストでも読みやすい」と説明されています(WAICによる日本語訳)。

どちらも白い背景に同じグレー(#808080)の文字

左の見本の小さな注釈は、本文の目安である4.5:1に届かず、かすれて読みにくくなっています。

右の見本の大きな太字は、同じ色でも大きな文字の目安(3:1以上)を満たし、無理なく読めます。

注釈や日付のような小さい文字ほど、薄い色で控えめにしたくなりますが、本当は濃い色が必要だという点に注意しましょう。

「大きな文字」がどのサイズからを指すのかは、コントラスト比とは?で解説しています。

読みやすい色の組み合わせを作る3つのステップ

ここまでの仕組みを踏まえて、可読性の高い色の組み合わせを作るための手順を3つのステップにまとめます。

ステップ1:文字と背景のどちらかを明るく、どちらかを暗くする

最初に決めるのは、色みではなく「どちらを明るくして、どちらを暗くするか」です。

白っぽい背景なら文字は黒に近い暗い色、暗い背景なら文字は白に近い明るい色、というように明暗を反対側に振り分けます。

中くらいの明るさの色同士(たとえば中間のグレーの背景に、鮮やかな赤の文字)は、明るさの差が出にくいので避けましょう。

ステップ2:色みは「淡い背景」か「濃い文字」に持たせる

ブランドカラーなどの色みを出したいときは、明るさの差を保ったまま、背景を淡い色に、文字を濃い色にして使います。

同じ青系でも、背景にはごく淡い青、文字には紺に近い濃い青を使えば、色の統一感と読みやすさを両立できます。

たとえば、ごく淡い青の背景(#EAF2FB)に紺に近い濃い青の文字(#1F3A6B)なら約9.9:1、白い背景(#FFFFFF)に深い緑の文字(#1E5B3A)なら約8.0:1で、色みを出しながら読みやすさも確保できます。

鮮やかな色そのものは、ボタンや線、アイコンなど、長い文章を読ませない部分に回すのが安全です。

背景色と文字色を具体的に決める手順は、背景色と文字色の組み合わせとは?で解説しています。

ステップ3:グレーにして確かめ、数値で確かめる

組み合わせを決めたら、まずは色を抜いたグレーの状態で文字が読めるかを見てみましょう。

デザインツールのモノクロ表示や、画面を白黒で印刷したものを見るだけでも、明るさの差が足りない箇所に気づけます。

たとえばiPhoneなら、スクリーンショットを撮って「写真」アプリの編集画面でフィルタの「モノ」を選ぶだけで確かめられます。

画面全体をモノクロにしたいときは、「設定」の「アクセシビリティ」→「画面表示とテキストサイズ」→「カラーフィルタ」で「グレイスケール」を選ぶ方法もあります。

最後に、WebAIM Contrast Checkerなどのツールでコントラスト比を測り、本文なら4.5:1以上、大きな見出しなら3:1以上を満たしているかを確かめます。

WebAIM Contrast Checkerは英語のサイトですが、文字色(Foreground)と背景色(Background)の欄にカラーコード(#3A332Aのような値)を入れるだけで、コントラスト比と、基準を満たすかどうか(Pass/Fail)を表示してくれる無料のツールです。

使い方はコントラスト比とは?で解説しています。

ツールの使い方はコントラスト比とは?で紹介しています。

実践のポイント

配色で可読性を考えるときに陥りやすい失敗と、よくある疑問をまとめます。

注意点・よくある間違い

• 「色が違うから読めるはず」と、色相の差だけで組み合わせを選んでしまうことがあります。
  色みが違っても、明るさが近ければ読みにくくなります。
• 柄や写真の背景で、文字の一部分だけを見て色を決めてしまうことがあります。
  文字の後ろで一番明るい部分、または一番暗い部分を基準に確かめましょう。
• 見出しで問題なかった色を、そのまま小さな注釈やキャプションにも使ってしまうことがあります。
  小さく細い文字ほど、より濃い色が必要です。

よくある質問

• Q. 明るさの差は大きければ大きいほどいい?
  A. 基本的には差が大きいほど読みやすくなります。
  ただし、真っ白と真っ黒のように差が最大の組み合わせは、まぶしく感じる人もいるため、本文には少し柔らかい黒やオフホワイトを使うサイトも多くあります(背景色と文字色の組み合わせとは?で解説しています)。
• Q. 色の明るさの差は、目で見て判断できる?
  A. 目安にはなりますが、色の見え方は周りの色や画面の設定にも左右されるため、見た目だけでは判断を誤ることがあります(背景色による色の見え方とは?で解説しています)。
  グレーにして確かめたうえで、ツールでコントラスト比を測るのが確実です。
• Q. 「可読性」と「視認性」は同じ意味?
  A. 少し違います。
  可読性は文章を読み続けやすいか、視認性はパッと見て目に留まりやすいかを指します。
  どちらも、明るさの差が大きい色の組み合わせほど高くなる点は共通です。
  判読性も含めた3つの言葉の違いは、視認性・可読性・判読性の違いの記事で解説しています。

まとめ

配色と可読性の関係で一番大切なのは、文字と背景の「明るさの差」です。

色相や彩度の差だけでは読みやすくならず、鮮やかな色同士のハレーション、柄や写真の背景、小さく細い文字では、さらに読みにくさが増します。

明暗を反対側に振り分け、色みは淡い背景か濃い文字に持たせ、グレーと数値で確かめる、という順番で考えると、視認性の高い色の組み合わせを作れます。

まずは自分のサイトのスクリーンショットを1枚撮ってモノクロにし、読みにくくなる文字がないか探してみましょう。