背景色と文字色の組み合わせとは?読みやすさを確保するコツを解説

基本の理解

まずはこの組み合わせがなぜ重要なのかを押さえましょう。

背景色と文字色とは何か

背景色と文字色とは、Webページにおいて、文字を配置する背景の色と、文字自体の色の組み合わせのことです。Webデザインでは、見た目の美しさ以上に「読みやすさ」を確保できる組み合わせを選ぶことが重要になります。

この読みやすさを左右するのが、背景色と文字色のコントラストです。※コントラストとは、隣り合う色同士の明るさ(明度)や色みの差の大きさのことで、差が大きいほど文字の輪郭がはっきりして読みやすくなります。白背景に黒文字はコントラストが強い組み合わせ、白背景に薄いグレー文字はコントラストが弱い組み合わせです。

適切な組み合わせは、ユーザーがストレスなく文章を読み進められる、可読性(文字の読みやすさ)の高いページを作れます。コントラストが十分に確保されていることで、視力の弱いユーザーや明るい屋外でも情報を認識しやすくなるという、アクセシビリティ(年齢や障害の有無にかかわらず、誰もが情報を利用できるようにすること)の観点からも重要な要素です。国内ではデジタル庁のウェブアクセシビリティ導入ガイドブックでも、こうした配慮の必要性が解説されています。

読みやすさの目安になる数値基準

「読みやすいかどうか」は、感覚だけでなく数値で確認できます。その基準として世界的に使われているのが、W3C(Web技術の標準化団体)が定めるWCAG(Web Content Accessibility Guidelines)です。日本でも、WCAG 2.0と同じ内容の日本産業規格JIS X 8341-3:2016があり、国内のWebアクセシビリティ対応ではこれらが拠り所になっています。

一般的なWebサイトが目指すことの多い「レベルAA」では、背景色とのコントラスト比(明るさの差を1:1〜21:1で表した数値)について、次のような基準が定められています。

対象	必要なコントラスト比
本文など通常サイズの文字	4.5:1以上
見出しなど大きな文字	3:1以上
ボタンの枠線・入力欄の境界・アイコンなどのUI部品	3:1以上

文字だけでなく、ボタンや入力欄の輪郭など「操作するために見分ける必要がある部品」にも基準がある点は見落とされがちです(WCAG 2.1 達成基準1.4.11 非テキストのコントラスト)。大きな文字の定義やレベルAAAとの違いなど、数値基準の詳細はコントラスト比とは?WCAGの基準をやさしく解説で解説しています。

デザイン性と読みやすさは両立できる

淡いグレーの背景に薄い文字を配置するとおしゃれに見えることはあっても、文字が読みにくくなる場合があります。ユーザーは情報を得るためにサイトを訪れており、読みにくいデザインは本来の目的を妨げてしまいます。

とはいえ、「読みやすさを優先するなら、デザイン性はあきらめるしかない」というわけではありません。コツは、色の「濃い版」と「淡い版」を役割で使い分けることです。たとえばブランドカラーが明るい青の場合、その青をそのまま本文の文字色にすると基準を満たしにくくなりますが、同じ青系の色を「背景には淡く、文字には濃く」使えば、ブランドらしさを保ったまま読みやすさも確保できます。

淡い色は、背景の面・区切り線・見出しの下線など「読ませる必要のない部分」に使い、本文の文字は色みを残しつつ明度を下げた濃い色にするのが基本です。

作業画面と実際の閲覧環境は違う

デザインを確認する際は、作業中の画面だけで判断しないことも大切です。FigmaやPhotoshopなどのデザインツールでは画面を拡大して作業することが多く、ディスプレイの明るさも高めに設定しがちです。一方、実際のユーザーは、暗い部屋でスマホを少し離して見ていたり、日差しの強い屋外で見ていたり、画面の小さい端末や明るさを落とした画面で見ていたりと、さまざまな環境でページを開きます。

また、OSやブラウザによって文字の描き方(輪郭のなめらかさや太さの出方)にも差があり、同じ細い文字でも環境によってはより細く、薄く見えることがあります。作業中にはっきり読めた文字が、実際の環境では読みにくくなるのはこのためです。

実践のポイント

背景色と文字色を決める際に陥りやすい失敗と、よくある疑問をまとめます。

注意点・よくある間違い

• デザインツール上では読めても、実際のブラウザやスマホで表示すると文字が薄くて読みにくいことに気づかないことがあります。必ず実機・実ブラウザでの確認を行いましょう(具体的な確認方法は下記)。
• 「おしゃれさ」を優先して薄いグレー文字を多用し、可読性を犠牲にしてしまうことがあります。本文など読んでもらう必要がある文字は、可読性を優先しましょう。
• 文字色だけを確認して、ボタンの枠線や入力欄の境界線が背景に埋もれていることに気づかないことがあります。UI部品も3:1以上を目安に確認しましょう。

実機・実ブラウザでの確認は、たとえば次のような方法で行います。

1. 自分のスマートフォンでページを開き、実際の画面サイズで読んでみる(URLを自分宛てに送る、QRコードを読み込むなど)
2. パソコンの画面から普段より一歩下がって距離を取り、無理なく読めるかを見る
3. ディスプレイやスマホの明るさを下げて、文字が背景に埋もれないかを見る
4. 可能であれば、WindowsとMac、iPhoneとAndroidなど、異なる環境でも確認する

明るさの差以外で読みにくくなる組み合わせ(ハレーション)

読みにくさの原因は「薄いグレー」だけではありません。赤と青、赤と緑のように、鮮やかさ(彩度)が高く、明るさが近い色同士を組み合わせると、境目がチカチカして見える「ハレーション」が起こり、文字がとても読みにくくなります。色みの差は大きくても明るさの差が小さいため、コントラスト比の数値も低くなりがちです。

目がチカチカする例:鮮やかな赤(#ff0000)× 鮮やかな青(#0000ff)=約2.2:1(基準未満)/落ち着いて読める例:少し暗めの赤(#c8102e)× 白=約5.9:1(基準クリア)

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

ダークモードでは「真っ黒×真っ白」を避ける

黒っぽい背景に明るい文字を置くダークモード(ダークテーマ)では、逆にコントラストが強すぎることが問題になりがちです。真っ黒な背景に真っ白な文字を置くと、文字の周りがにじんだように見えたり、眩しく感じたりすることがあります。

そのため、背景は真っ黒ではなく少し明るいダークグレー、文字は真っ白ではなく少し落としたオフホワイトにするのが一般的です。たとえばGoogleのデザインガイドラインであるMaterial Designのダークテーマでは、背景色の基本値に真っ黒ではなく#121212が使われています。

文字の太さ・大きさとの関係

同じ文字色でも、細い書体や小さい文字ほど線が細くなり、実際より薄く見えます。コントラスト比の計算には文字の太さが含まれないため、数値上は基準を満たしていても、細字・小さい文字では読みにくいことがあります。

細いウェイト(Light・Thinなど)の書体や、注釈などの小さい文字を使う場合は、基準ぎりぎりの色ではなく、より濃い色(目安として7:1前後、白背景なら#595959より濃い色)を選ぶと安心です。

よくある質問

• Q. 文字色は完全な黒(#000000)にすべき?
  A. まず、#000000や#333333は、Webで色を指定するときに使う「カラーコード(HEX)」という表記です。「#」の後ろの6桁の英数字で色を表し、#000000は真っ黒、#ffffffは真っ白、#333333は黒に近い濃いグレーを指します(仕組みはWebでRGBカラーが使われる理由とは?で解説しています)。
  そのうえで、完全な黒は、白背景に対してコントラストが強すぎて、かえって目が疲れると感じる人もいます。そのため、本文には少しだけ明るい「オフブラック」を使うサイトが多く、#333333(白背景に対して約12.6:1)や#212121(約16.1:1)などがよく使われます。どちらもWCAGの基準(4.5:1以上)を大きく上回っているので、読みやすさを保ちながら柔らかい印象にできます。
• Q. コントラストの基準を客観的に確認する方法は?
  A. コントラスト比をチェックできるツールを使うと、上で紹介したWCAGの基準(本文なら4.5:1以上)を満たしているかを客観的に確認できます。具体的には、次のようなツールがあります。
  ・WebAIM Contrast Checker:Webサイト上で文字色と背景色のカラーコードを入力するだけで、コントラスト比と合否(Pass/Fail)を表示してくれます(操作の様子は背景色による色の見え方とは?の動画で紹介しています)
  ・Chromeのデベロッパーツール:要素の文字色をクリックすると、表示されるカラーピッカーにコントラスト比が表示されます
  ・Figmaのプラグイン:デザイン中の文字と背景の色を選ぶだけで判定できるプラグイン(Starkなど)が公開されています
  ページ全体をまとめてチェックする方法は、コントラスト比とは?WCAGの基準をやさしく解説で紹介しています。
• Q. 「視認性」「可読性」「判読性」はどう違う?
  A. いずれも「見やすさ」に関わる言葉ですが、指しているものが少し違います。視認性は「パッと見たときに目に留まりやすいか・見つけやすいか」、可読性は「文章をストレスなく読み続けられるか」、判読性は「1文字1文字を誤読せずに見分けられるか」です。背景色と文字色の組み合わせは、このすべてに影響します。

まとめ

背景色と文字色の組み合わせは、Webデザインの読みやすさを直接左右する重要な要素です。本文は4.5:1以上、大きな文字やUI部品は3:1以上という数値基準を目安にしつつ、色の濃淡を役割で使い分ければ、デザイン性と読みやすさは両立できます。

また、薄いグレーだけでなく、鮮やかな色同士のハレーションや、ダークモードでの「真っ黒×真っ白」、細い書体など、数値だけでは見落としやすい落とし穴もあります。コントラスト比をツールで数値として確認したうえで、実際のブラウザ・実機での確認を必ず行う習慣をつけましょう。