このコントラスト、どっちが正解？文字と背景の配色のセンスを磨いておこう
現場で使えるデザインセンスを、2択クイズで身に付ける「デザインクイズチャレンジ」。
Webデザイナーの松下 絵梨です。
今回は、文字と背景のコントラストをテーマに、3問クイズを出します。
コントラストとは「文字の色」と「その背景にある色」の明るさの差のことです。
以下の3つの作例を見て、AとB、あなたはどちらの文章が読みやすいと感じますか？
1問目「バナー内のテキスト」（難易度★）
Webサイトに表示されるバナー、読みやすい文章はどちらですか？
2問目「見出しと本文」（難易度★★）
Webサイトの商品紹介エリアの文章、読みやすい文章はどちらですか？
3問目「お問い合わせボタン」（難易度★★★）
アプリ内のお問い合わせボタン、読みやすい文章はどちらですか？
いかがでしたか？
私が考える答えは……
1問目の答え：B
2問目の答え：B
3問目の答え：A
以上が私なりの解答です。
あなたが読みやすいと感じた文章は、AとBどちらでしたか？
ではここからは、それぞれの作例のAとBで、何が異なっていたのか？を説明し、作例で用いられていたデザインテクニックについて紹介していきます。
1．メインのテキストは装飾に埋もれないようにする
まず、1問目から振り返っていきましょう。
私が選んだ答えは「B」でした。
作例AとBの違いは、バナー内のメイン情報である「こども英会話」というテキストの読みやすさです。
作例AもBも背景にアルファベットの装飾が散りばめられていますが、作例Aはそのアルファベットがはっきり見えてしまっていることで、メインのテキストが読み取りづらくなっています。
一方Bでは、背景のアルファベットの存在感が控えめになっており、メインのテキストが読みやすく仕上がっています。
この作例の背景に配置されているアルファベットは、装飾としての役割しかなく、情報の提供や特別な機能を果たしているわけではありません。
そのため、バナーの中心的存在として扱うものではないのです。
このような背景効果を効果的に引き立てるためには、主となるテキストとの間にしっかりとしたコントラストを確保することが不可欠です。
グレースケール（モノクロ風）で確認すると、違いが一目でわかる
コントラストを確保する際は、「色」の情報や印象に引っ張られないように、明暗の差で判断します。
そこでオススメしたいのが、グレースケール（モノクロ風）での表示確認です。
グレースケールで表示を確認すれば、「色」という情報が強制的にオフになります。
そうすれば、純粋な明るさの差（明度差）だけでデザインを客観的に評価できます。
グレースケールで確認すると、Aは「こども英会話」の文字と背景のアルファベットの明るさが近くなり、ところどころつながって見える箇所が出ます。
その結果、文字の輪郭が曖昧になって読み取りづらくなります。
Bは文字と背景の明度差が十分にあるため、グレースケールでも文字がはっきりと浮き上がって見えます。
色に頼らなくても、明るさの差だけで文字がはっきり読める状態です。
色がなくても文字がはっきりと読めるデザインは、どんな色の組み合わせでも読みやすさを保てる、いわば「骨格がしっかりしたデザイン」といえます。
もちろん、色を“飾り”として使うこと自体は問題ありません。
大切なのは、読ませたいテキストが背景に埋もれないこと。
迷ったらグレースケールで確認するようにしましょう。
ではここからは、MacとWindows、それぞれのOSの機能を用いて、グレースケールで表示を確認する方法をお教えします。
macOSで画面をグレースケール（モノクロ風）表示にする方法
1．メニューバーのAppleメニューから「システム設定」を選択
2．サイドバーで「アクセシビリティ」をクリックし、右側の「ディスプレイ」をクリック
3. 「カラーフィルタ」のトグルボタンをクリックしてONにし、「フィルタタイプ」は「グレイスケール」を選択
※グレイスケール表示を終了する場合は、再度「カラーフィルタ」のトグルボタンをクリックしてOFFにする。
（macOSではグレースケールを「グレイスケール」と表記しています）
Windowsで画面をグレースケール表示にする方法
1．スタートメニューから「設定」アイコンをクリック
2．サイドバーで「アクセシビリティ」をクリックし、右側の「カラーフィルター」をクリック
3. 「カラーフィルター」をONにし、「グレースケール」を選択
※グレースケール表示を終了する場合は、再度「カラーフィルター」をクリックしてOFFにする。
2．文字と背景のコントラストに配慮しよう
次に2問目を振り返ります。
私が良しとした答えは「B」でした。
作例Aは一見おしゃれでやわらかな印象があり、食欲をそそる色合いと感じる方もいらっしゃるかもしれません。
しかし、読みやすさという点では、文字が背景に溶け込み、やや読みにくく感じます。
一方、Bは文字がくっきりと浮かび上がり、見出しや本文がはっきりと読み取れます。
このように、色のコントラストを十分に確保できないと、文字の視認性が下がり、情報が伝わりにくくなることがあります。
特に小さな文字や細いフォントでは、その影響が大きくなります。
そこで意識すべきなのが「アクセシビリティ」です。
アクセシビリティを意識しよう
アクセシビリティとは、年齢や身体的な特徴、利用している機器や環境に左右されることなく、すべての人が不自由なく情報へアクセスできるよう配慮することを指します。
例えば、
- 日中の屋外では、スマートフォンの画面が光を反射して見えづらい
- 加齢によって、小さな文字が少し読みづらくなる
- 特定の色が見分けにくい人がいる
など、情報へのアクセスのしやすさは、人や状況によってそれぞれ異なります。
そのため、どんな人がどんな状況で見ても、情報がきちんと伝わるように「読みやすさ」をデザインで確保することが大切です。
これがアクセシビリティを考えるうえで、とても重要な第一歩です。
そして、その基本となるのが、文字と背景とのコントラスト比です。
アクセシビリティの世界的な基準に、WCAG（Web Content Accessibility Guidelines）というものがあります。
このガイドラインでは、テキスト本文と背景とのコントラスト比（明るさの差）を「4.5：1」以上確保することが推奨されています。
では続いて、そのコントラスト比を確認するための方法をお教えします。
Adobe Colorで確認してみよう
文字と背景とのコントラスト比を確認する際に便利なのが、無料で使えるオンラインツール「Adobe Color」です。
このツールを使うためには、該当箇所のカラーコードの抽出が必要です。
以下では、Illustratorを用いた、カラーコードの抽出方法をお教えします。
1．Illustrator上でオブジェクト（文字や背景の長方形など）を選択し、左側のツールパネルの下部にある塗りボックスをダブルクリック
2．カラーピッカーが表示されるので、下部の「16進数（#から始まる6桁のコード）」をコピー
「Adobe Color」に移動し、文字色と背景色それぞれのカラーコードを入力すれば、コントラスト比が数値で表示されます。
作例AとBを比較すると、以下のようなコントラスト比の差があることがわかりました。
WCAGというガイドラインでは、テキスト本文と背景とのコントラスト比（明るさの差）を「4.5：1」以上確保することが推奨されているため、Aは不適格です。
作例Aのコントラスト比は「3.26：1」と基準である「4.5：1」を下回っています。
一方、Bでは「5.88：1」と十分な明暗差があります。
見た目の好みや感覚だけでなく、こうした世界基準の「ものさし」を使ってデザインを判断するのが、プロのデザイナーへの第一歩です。
アクセシビリティへの配慮は、「一部の特別な人のための対応」ではなく「あらゆる状況にいるユーザー」を想像することでもあります。
まさに情報を届けたいすべての相手への「思いやり」でもあるのです。
3．ボタンは、設置場所の背景とのコントラストも意識しよう
それでは最後の3問目です。
3問目は少し難しかったかもしれません。
私が良しとした答えは「A」です。
コントラスト比だけで見れば、どちらの作例も、ボタン内の文字とボタン本体の色のコントラスト比は基準を満たしています。
文字自体の可読性に問題はありません。
しかし、このボタンが設置されている黒い背景とのバランスを見ると、両者の違いが見えてきます。
ボタン全体と、ボタンが設置されている黒い背景とのコントラスト比を見ると、作例Bは「2.7：1」と低くなってしまっており、背景に溶け込んでしまっています。
これでは「ここが押せる場所だ」と気づかれにくい状態です。
一方作例Aは、ボタン本体と背景のコントラスト比が「4.43：1」あり、背景と十分に区別できます。
ボタンのようにクリックしたりタップしたりできる「操作可能な要素」は、それがボタンだと認識できなければ意味がありません。
実はボタンの要素についても、先ほどご紹介したWCAGというガイドラインで「背景に対して3：1以上のコントラスト比を確保する」ことが推奨されています。
ボタンを設置する際は「ここが押せる場所だ」と瞬時に認識できるかどうかを意識しながら、デザインしましょう。
まとめ：コントラストを意識した配色のポイント
今回は「文字と背景の配色」におけるコントラストについて解説しました。
最後に今回のノウハウのまとめです。
1．メインのテキストは装飾に埋もれないようにする
- グレースケール（モノクロ風）で確認すると、違いが一目でわかる
- OSの設定を変えれば、グレースケールでの確認がすぐにできる
2．文字と背景のコントラストに配慮しよう
- アクセシビリティとは、年齢や身体的な特徴、利用している機器や環境に左右されることなく、すべての人が不自由なく情報へアクセスできるよう配慮すること
- アクセシビリティの世界的な基準に、WCAG（Web Content Accessibility Guidelines）というものがある
- WCAGでは、テキスト本文と背景とのコントラスト比（明るさの差）を「4.5：1」以上確保することが推奨されている
3．ボタンは、設置場所の背景とのコントラストも意識しよう
- WCAGでは、「ボタンは背景に対して3：1以上のコントラスト比を確保する」ことが推奨されている
コントラストの確保は、アクセシビリティへの配慮です。
情報を届けたいすべての相手への「思いやり」をもって、誰にとっても読みやすい、洗練されたデザインを実現しましょう。
Tips：Illustratorの生成AIで背景パターンを作る
文字と背景のコントラストを意識していても、背景の模様や色が強すぎると、肝心の文字が埋もれてしまうことがありますよね。
そんなときにデザイナーの強い味方となるのが、Illustratorの生成AIで背景パターンを作る「パターンを生成」機能です。
装飾を加えながらも、本文の読みやすさを損なわないデザインを、驚くほど手軽に作成できます。
使い方の例
1．長方形など、背景模様を適用したい範囲を選択
2．「ウィンドウ」＞「コンテキストタスクバー」にチェックを入れる
3．「塗り」をクリック
4．「パターンを生成」をクリックし、プロンプト入力欄に、生成するパターンを説明する文章を入力し、［生成］ボタンをクリック
例：「やわらかな印象のパステル調チェック柄。本文の読みやすさを保つ淡い背景。」
数秒で複数の候補が生成されるので、気に入ったものをそのまま背景として適用できます。
生成されたパターンはベクターデータとして編集できるため、形やバランスを自由に調整できます。
さらに、「再配色パネル」を使えば、色合いや明度を変更して文字とのコントラストをより最適化することも可能です。
ポイント：本文を読みやすくするために有効なプロンプト表現
- 「やわらかいパステル調のトーンに」
- 「読みやすさを保つために低い彩度で」
- 「背景として使いやすい、落ち着いた明るさ」
AIによる生成パターンを上手に活用すれば、配色のバランスを取りながら、誰にとっても読みやすい、洗練されたビジュアルを効率的に作り出すことができます。
ぜひ、あなたのデザインワークに取り入れてみてください。
Illustratorの「パターンを生成」機能について詳しく見る
お相手はWebデザイナーの松下 絵梨でした。
本コーナーでは、あなたのデザイン力のアップにつながる様々なクイズが用意されています。
ぜひほかのクイズにもチャレンジしてみてください。
※本コンテンツは、デザイナーがそれぞれの視点で理想とするデザインを語っています。
クイズの正解はひとつではなく、あくまで参考としてご活用ください。
執筆：松下 絵梨
大阪出身大阪在住のweb/UIデザイナー、講師。株式会社ロクナナ所属。
成安造形大学准教授、Adobe Community Expert、京都芸術大学非常勤講師、帝塚山大学非常勤講師、CSS Nite in Osaka主宰。
『Adobe XDではじめるWebデザイン＆プロトタイピング 一歩先行く現場のスキル』の著者。