WEBサイトのキャプション色はどう決める？小さい文字を読みやすくする方法

写真の下に置く「植え付け直後の様子」のような短い説明は、本文より小さな文字になることがあります。この文字をキャプションと呼び、写真や図表の内容と本文をつなぐ役割があります。しかし、目立たせないために薄いグレーを選ぶと、写真を見ながら確認したい情報が読みづらくなる場合があります。ここでは架空の家庭菜園の記録記事を例に、キャプションの文字色と背景、画像との配置を考えます。

キャプションは本文より控えめでも、情報を読める色にする

キャプションは、写真や図表が何を示すかを読者に伝える説明文です。例えば2枚の苗の写真を並べる場合、「左：植え付け直後／右：2週間後」と書けば、画像の比較対象が分かります。本文より小さくする場合でも、写真の意味を理解するために必要な文字なので、背景とのコントラストを十分に保ちます。

本文より控えめに見せたいときは、文字色だけでなく、大きさや画像との位置関係も使えます。例えば本文を16px、キャプションを14～15pxとする設計から試し、写真のすぐ下に置いて左右の端をそろえます。px（ピクセル）はWEB制作で文字や余白の長さを指定する単位です。この文字サイズはあくまで出発点で、画面上での読める大きさを確認して調整します。

キャプションは、画像の代替テキスト（画像を見られない人に内容を伝えるための説明）とは役割が異なります。画面に見えるキャプションを付けたからといって、必要な代替テキストの検討を省くことはできません。

写真下の白背景と淡い背景で文字色を比較する

次の例では、本文・キャプション・背景の色をHEX（「#」に続く0～9とA～Fの6桁で色を表すコード形式）で示します。コントラスト比は文字と背景の相対的な明るさの差を表す数値です。

例1：白い記事背景に、写真の説明を添える

• 記事の背景は白■#FFFFFF、本文は濃い青灰色■#263846にします。本文と背景のコントラスト比は約12.09:1です。
• 写真の下のキャプションは少し明るい青灰色■#536775にし、白■#FFFFFFとの比を約5.89:1に保ちます。写真の幅に合わせて説明を配置すると、どの画像の説明か追いやすくなります。
• 文字色を薄い灰色■#A5AFB5まで明るくすると、白■#FFFFFFとのコントラスト比は約2.23:1です。通常サイズのキャプションに必要な4.5:1を下回るため、この組み合わせは避けます。

例えば「左：苗を植えた直後／右：2週間後の葉の様子」という短い説明を、比較写真の直下に一つ置きます。文字が画像から離れると、どちらに対応する説明か判断しづらくなるため、写真とキャプションの間隔を先に整えます。

例2：淡い色の画像カードや濃色パネルに配置する

複数の成長記録をカードで並べる場合は、カードの背景を淡い緑灰色■#ECF2EEにする方法があります。この上で濃い青灰色■#263846の本文は約10.65:1、キャプションの青灰色■#536775は約5.19:1です。白い背景で使った文字色をそのまま選んでも、背景を変えた場合は比率を再確認します。

別のデザインとして、濃い青灰色■#273F49のパネルの中に写真と説明を入れるなら、キャプションは明るい灰青色■#E8F0F3に切り替えます。この文字とパネル背景の比は約9.61:1です。白背景用の暗いキャプション色をそのまま使わず、実際に置く面と組み合わせて考えます。

小さな文字や写真への重ね置きで確認したい点

キャプションは14px程度の小さな文字でも通常の文字として扱い、単に「補助だから薄くてよい」とは考えません。WCAG（WEBコンテンツのアクセシビリティに関するガイドライン）のレベルAAでは、通常サイズの文字に4.5:1以上、大きな文字に3:1以上のコントラスト比が原則として必要です。小さなキャプションなら通常文字の基準を確認します。

写真の上にキャプションを直接重ねる場合は、写真の場所によって明るさが変わります。白文字や黒文字が常に読めるとは限らないため、可能なら写真の下の単色の面に移し、重ねる必要があるときも文字の背後の実際の色で確認してください。スマートフォンでは折り返しによって説明と写真が離れないか、文字が小さすぎないかも確認します。

図表の読み方や撮影条件など、写真の理解に欠かせない情報は特に薄くしないことが大切です。キャプションを控えめにするなら、文字色を極端に弱めるより、本文より少し小さくして画像のすぐ下にそろえる方が、役割を示しながら読める状態を保ちやすくなります。