補足テキストは何色がいい？本文より弱く見せる文字色の選び方

WEBサイトで本文の下に「道具は会場で貸し出します」のような短い説明を加えるとき、文字色は何色にすればよいのでしょうか。補足テキストは、本文の理解を助ける情報を少し控えめに見せるための文字です。しかし、薄くしすぎると必要な説明まで読みにくくなります。ここでは、本文より目立たせない文字色の選び方を、白背景と淡い色の背景で比較します。

補足テキストは本文より少し控えめに、ただし読める濃さにする

本文と補足テキストの違いは、情報の役割です。例えば、体験講座の紹介文が本文なら、「道具は会場で用意しています」はその内容を補う短い案内として置けます。補足だけをやや明るいグレーにすると、読者は本文を先に追い、必要に応じて説明を確認できます。

ただし、申込み締切、参加料金、必須の持ち物、エラーの原因など、行動に直接関係する情報を「補足だから」と薄くするのは避けましょう。重要な条件は本文と同じ濃さで示すか、見出しや案内欄を使って分かりやすく伝えます。色の薄さだけで情報の重要度を決めないことが大切です。

文字色を変える前に、補足を本文のすぐ下へ置き、少し短い行にまとめる方法も試せます。文字サイズや太さ、行間、余白を組み合わせれば、色の差を大きくしなくても役割を分けられます。

白背景と淡い背景で補足文字の色を比較する

架空の体験講座ページで、本文「初めての方も陶芸の工程を体験できます」の下に「道具は会場で貸し出します」を置く例を考えます。色はHEX（先頭の「#」と6桁の16進数で指定するカラーコード）で示します。コントラスト比は、文字とその背景の相対的な明るさの差を表す値です。

例1：白い本文エリアの補足文字

• 背景は白■#FFFFFF、本文は濃い青灰色■#273642にします。文字と背景のコントラスト比は約12.41:1です。
• 本文の下の補足には、少し明るい青灰色■#526576を使います。白■#FFFFFFとのコントラスト比は約6.03:1です。本文より控えめにしながら、短い説明を読むための差を確保できます。
• さらに薄い灰青色■#9AA8B4にすると、白■#FFFFFFとの比は約2.43:1です。この組み合わせは通常サイズの説明文に必要な4.5:1を下回るため、補足文字には勧めません。

補足の文字を14px程度にする場合も、文字色が薄くてよいわけではありません。px（ピクセル）はWEBページ上の文字や余白の大きさを指定する単位です。14pxはここでの設計例で、どの画面でも読みやすいことを保証する数字ではありません。本文との区別が十分なら、補足も同じ文字サイズにして構いません。

例2：淡い背景の案内欄に補足文字を置く

講座の持ち物をまとめる欄を、淡い青灰色■#EEF4F7にする例です。本文色■#273642とこの背景■#EEF4F7のコントラスト比は約11.18:1、補足色■#526576と同じ背景■#EEF4F7の比は約5.43:1です。白い背景で使ったのと同じ補足色でも、背景が変わるとコントラスト比も変わります。

補足には「会場には休憩用の椅子があります」といった、本文を助ける情報を置きます。必要な持ち物や集合時刻は補足色にまとめて弱めるのではなく、濃い本文色で示します。また、薄い灰青色■#9AA8B4と案内欄の背景■#EEF4F7は約2.19:1しかないため、白背景以上に見づらい組み合わせです。

小さい文字・背景の変更・スマホ表示で確認する

補足文字を本文より小さくするときは、色も同時に薄くしすぎないようにします。通常サイズの文字には背景との十分な明るさの差が必要です。W3Cが公開するWCAG（WEBコンテンツのアクセシビリティに関するガイドライン）のレベルAAでは、通常の文字は4.5:1以上、大きな文字は3:1以上のコントラスト比が原則です。補足テキストも意味のある文章なら対象になります。

背景色を変えたときや、補足の文字を写真の上に載せるときは、実際に接する背景と再計算してください。透明度で文字を薄くする場合も、背後の色によって見え方が変わります。スマートフォンでは、短い補足が複数行になっても本文との対応が分かるか、文字が小さすぎないかを確かめます。

「本文より弱く見せる」とは、情報を読めなくすることではありません。まずは背景に対して読める文字色を選び、必要に応じて大きさ・太さ・余白で控えめな位置付けにするのが実用的です。