このコントラスト、どっちが正解？文字と背景の配色のセンスを磨いておこう

3問目の答え：A

以上が私なりの解答です。

あなたが読みやすいと感じた文章は、AとBどちらでしたか？

ではここからは、それぞれの作例のAとBで、何が異なっていたのか？を説明し、作例で用いられていたデザインテクニックについて紹介していきます。

グレースケール（モノクロ風）で確認すると、違いが一目でわかる

コントラストを確保する際は、「色」の情報や印象に引っ張られないように、明暗の差で判断します。

そこでオススメしたいのが、グレースケール（モノクロ風）での表示確認です。

グレースケールで表示を確認すれば、「色」という情報が強制的にオフになります。

そうすれば、純粋な明るさの差（明度差）だけでデザインを客観的に評価できます。

グレースケールで確認すると、Aは「こども英会話」の文字と背景のアルファベットの明るさが近くなり、ところどころつながって見える箇所が出ます。
その結果、文字の輪郭が曖昧になって読み取りづらくなります。

Bは文字と背景の明度差が十分にあるため、グレースケールでも文字がはっきりと浮き上がって見えます。
色に頼らなくても、明るさの差だけで文字がはっきり読める状態です。

色がなくても文字がはっきりと読めるデザインは、どんな色の組み合わせでも読みやすさを保てる、いわば「骨格がしっかりしたデザイン」といえます。

もちろん、色を“飾り”として使うこと自体は問題ありません。

大切なのは、読ませたいテキストが背景に埋もれないこと。
迷ったらグレースケールで確認するようにしましょう。

ではここからは、MacとWindows、それぞれのOSの機能を用いて、グレースケールで表示を確認する方法をお教えします。

macOSで画面をグレースケール（モノクロ風）表示にする方法

1．メニューバーのAppleメニューから「システム設定」を選択

2．サイドバーで「アクセシビリティ」をクリックし、右側の「ディスプレイ」をクリック

3. 「カラーフィルタ」のトグルボタンをクリックしてONにし、「フィルタタイプ」は「グレイスケール」を選択

※グレイスケール表示を終了する場合は、再度「カラーフィルタ」のトグルボタンをクリックしてOFFにする。

（macOSではグレースケールを「グレイスケール」と表記しています）

Windowsで画面をグレースケール表示にする方法

1．スタートメニューから「設定」アイコンをクリック

2．サイドバーで「アクセシビリティ」をクリックし、右側の「カラーフィルター」をクリック

3. 「カラーフィルター」をONにし、「グレースケール」を選択

※グレースケール表示を終了する場合は、再度「カラーフィルター」をクリックしてOFFにする。

アクセシビリティを意識しよう

アクセシビリティとは、年齢や身体的な特徴、利用している機器や環境に左右されることなく、すべての人が不自由なく情報へアクセスできるよう配慮することを指します。

例えば、

• 日中の屋外では、スマートフォンの画面が光を反射して見えづらい
• 加齢によって、小さな文字が少し読みづらくなる
• 特定の色が見分けにくい人がいる

など、情報へのアクセスのしやすさは、人や状況によってそれぞれ異なります。

そのため、どんな人がどんな状況で見ても、情報がきちんと伝わるように「読みやすさ」をデザインで確保することが大切です。

これがアクセシビリティを考えるうえで、とても重要な第一歩です。

そして、その基本となるのが、文字と背景とのコントラスト比です。

アクセシビリティの世界的な基準に、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」と十分な明暗差があります。

見た目の好みや感覚だけでなく、こうした世界基準の「ものさし」を使ってデザインを判断するのが、プロのデザイナーへの第一歩です。

アクセシビリティへの配慮は、「一部の特別な人のための対応」ではなく「あらゆる状況にいるユーザー」を想像することでもあります。

まさに情報を届けたいすべての相手への「思いやり」でもあるのです。

1．メインのテキストは装飾に埋もれないようにする

• グレースケール（モノクロ風）で確認すると、違いが一目でわかる
• OSの設定を変えれば、グレースケールでの確認がすぐにできる

2．文字と背景のコントラストに配慮しよう

• アクセシビリティとは、年齢や身体的な特徴、利用している機器や環境に左右されることなく、すべての人が不自由なく情報へアクセスできるよう配慮すること
• アクセシビリティの世界的な基準に、WCAG（Web Content Accessibility Guidelines）というものがある
• WCAGでは、テキスト本文と背景とのコントラスト比（明るさの差）を「4.5：1」以上確保することが推奨されている

3．ボタンは、設置場所の背景とのコントラストも意識しよう

• WCAGでは、「ボタンは背景に対して3：1以上のコントラスト比を確保する」ことが推奨されている

コントラストの確保は、アクセシビリティへの配慮です。

情報を届けたいすべての相手への「思いやり」をもって、誰にとっても読みやすい、洗練されたデザインを実現しましょう。