日付やカテゴリなどのメタ情報は何色がいい？記事ページの文字色設計

WEB記事のタイトルの下に、公開日・更新日・カテゴリ・著者名を並べることがあります。こうした記事の基本情報を「メタ情報」と呼びます。本文より目立ちすぎない色にしたい一方、薄くしすぎると更新日や記事の分類が読めなくなります。ここでは架空の街歩き記事を例に、メタ情報を読みやすく、記事タイトルとも区別できる文字色を考えます。

日付やカテゴリは本文より控えめでも、読める濃さにする

記事ページでは、まずタイトルを読み、その後に公開日やカテゴリを確かめる人もいます。メタ情報は本文ほど長くないため、少し抑えた文字色にしても構いません。しかし、情報を表示する以上、背景との明るさの差を十分に確保することが大切です。色を薄くするだけでなく、文字の大きさと余白で見出しや本文との違いを付けます。

例えば架空の記事「川沿いの散策コース」で、「公開日：9月12日」「更新日：9月20日」「カテゴリ：街歩き」「著者：編集部」とタイトルの下に並べます。公開日と更新日にはそれぞれラベルを付け、単なる数字だけにしません。更新日が読めないと、情報の新しさを判断しにくくなる場合があります。

カテゴリが別の記事一覧へ移動するリンクなら、日時や著者名と同じ文字色でそろえる必要はありません。リンクの文字は見分けやすい色にし、下線などを加えて、色だけでクリックできることを伝えないようにします。

白背景と淡い背景で比較するメタ情報の配色例

以下ではHEX（「#」の後に0〜9とA〜Fを6桁並べるカラーコード）で色を示します。コントラスト比は、文字と背景の相対的な明るさの差を示す数値です。例は不透明な単色同士を計算したものです。

例1：白い記事ページのタイトル直下に置く

• 記事の背景は白■#FFFFFF、タイトルと本文には濃い青灰色■#253646を使います。この組み合わせのコントラスト比は約12.39:1です。
• 公開日・更新日・著者名には一段落ち着いた青灰色■#526475を使います。白■#FFFFFFとの比は約6.11:1で、タイトルより控えめながら文字を読むための差を保てます。
• カテゴリがリンクなら深い青■#1B587Fを使い、下線も付けます。白■#FFFFFFとのコントラスト比は約7.64:1です。

反対に、日付の文字色を薄い灰青色■#9CA9B5まで明るくすると、白■#FFFFFFとの比は約2.40:1に下がります。通常サイズの文字で必要な4.5:1には届かないため、この組み合わせは避けます。小さな文字ほど薄くしてよい、ということではありません。

例2：淡い背景のタイトルエリアに並べる

タイトルの周囲だけを淡い青灰色■#F1F6F8にする場合もあります。その上でタイトルを濃い青灰色■#253646にすると、コントラスト比は約11.37:1です。公開日・更新日・著者名は青灰色■#526475で約5.61:1、カテゴリのリンクは深い青■#1B587Fで約7.01:1になります。カテゴリのリンクには引き続き下線を付けます。

白■#FFFFFFと淡い青灰色■#F1F6F8の背景同士の比は約1.09:1と小さいため、背景の色差だけでタイトル部分を区切らず、上下の余白と文字の並びも整えます。本文エリアに移ったときに、日付などの情報が文章の一部に見えないかも確認してください。

小さな表示やスマートフォンで確認すること

メタ情報は14px程度の文字から試せますが、これは設計例であって固定の正解ではありません。px（ピクセル）はWEBページの文字などの大きさを指定する単位です。日付・カテゴリ・著者名が横に収まらない場合は、無理に縮小せず、改行しても各ラベルと値の対応が分かる配置にします。

更新日だけを濃くするかどうかは、記事の内容によって決めます。更新の有無が読者の判断に重要なら、色だけで目立たせるより「更新日」という言葉を明確に示します。カテゴリ名をリンクにする場合も、ホバーやキーボードで選択した状態で文字が読めるか確認しましょう。

WCAG（WEBコンテンツのアクセシビリティに関する指針）のレベルAAでは、通常の文字と背景のコントラスト比は原則4.5:1以上、大きな文字は3:1以上です。日付やカテゴリのような小さなメタ情報にも通常文字の基準を適用して確認します。文字色を増やすことが目的ではなく、タイトル、記事の基本情報、本文の順番が自然に伝わる設計が大切です。