注釈や脚注を読みやすくする色は？小さなテキストの配色ポイント
WEB記事の小さな「※1」や、本文の下に置かれた説明は、何色にすると読みやすいのでしょうか。注釈は用語や条件を補う説明で、脚注は本文中の記号と対応する注記をページの下部などに置く方法です。本文より控えめに見せたくても、文字色を薄くしすぎると参照先を見失います。ここでは架空の読書会調査を例に、注釈記号、脚注本文、戻るリンクの色と配置を整理します。
小さい注釈や脚注でも、文字とリンクを十分な濃さにする
例えば架空の調査記事に「集計対象は週末の読書会です（※1）」と書き、記事末尾に「※1：土曜日に実施した会のみが対象で、平日の会は含めません」と示すとします。これは配色の説明用に作った例で、実在の調査結果ではありません。注釈記号と脚注を同じ「※1」でそろえることで、どの説明を読むべきか分かります。
脚注は本文より少し小さくしても構いませんが、一般的な文章と同じように背景との明るさの差を確保します。「小さな文字だから薄くする」という順番ではなく、まず読める色を選び、文字サイズや上下の余白で本文と区別しましょう。目安として本文16px・脚注14～15pxを比較できますが、これは設計例であり、文字を小さくする必要があるという意味ではありません。px（ピクセル）はWEB画面で文字や余白の寸法を表す単位です。
本文の「※1」を脚注へ移動できるリンクにするなら、脚注側にも「本文へ戻る」という分かりやすいリンクを置く方法があります。色だけに頼らず下線を付け、対応する記号や文言を明記します。番号を極端に小さい上付き文字にするより、周囲の文字と見分けられ、選びやすい大きさを確保することが先です。
白背景と淡い脚注欄で比べる文字色の組み合わせ
色はHEX（「#」に続く0～9とA～Fの6桁で色を指定するコード）で示します。コントラスト比は、文字と背景の相対的な明るさの差を示す数値です。以下の値は不透明な単色同士で計算しています。
案1：白い記事の下部に脚注を並べる
- 記事の背景を白#FFFFFF、本文を濃い青灰色#273846にします。本文と背景のコントラスト比は約12.07:1です。
- 脚注の文章には少し抑えた青灰色#4D626Dを選びます。白#FFFFFFとの比は約6.40:1です。見出し「注釈・出典」を付け、本文の段落から余白で区切ります。
- 本文中の「※1」と脚注の「本文へ戻る」リンクは、深い青緑#155B72にして下線を付けます。白#FFFFFFとのコントラスト比は約7.58:1です。
脚注を目立たせないつもりで淡い灰青色#ADB8C0にすると、白#FFFFFFの上では約2.02:1しかありません。これは通常サイズの文字に求められる4.5:1を下回ります。出典や集計条件のように記事の解釈に必要な情報には使わないようにします。
案2：記事末尾に淡い背景の脚注欄を設ける
脚注が複数あり、本文と区切りたいときは、背景を淡い青灰色#F0F4F6にできます。この欄の脚注文字を青灰色#4D626Dにすると約5.78:1、「本文へ戻る」リンクを深い青緑#155B72にすると約6.85:1です。脚注欄内で本文に近い濃い青灰色#273846を使う場合は約10.90:1になります。
白#FFFFFFと淡い青灰色#F0F4F6の背景同士は約1.11:1で、色の差が小さめです。欄の始まりを明確にしたい場合は「注釈・出典」の見出しや余白を付け、必要なら灰青色#617A87の境界線を使います。この線と淡い背景#F0F4F6の比は約4.09:1です。境界線を見分ける必要がある設計でも、色の差を確認できます。
参照番号の対応とスマートフォンでの使いやすさを確認する
脚注は文字が読めるだけでなく、元の文章と行き来できることも大切です。本文の「※1」から対応する脚注へ、脚注から「本文へ戻る」で元の位置へ移動できるか確認します。番号が増えた場合も「※1」「※2」を取り違えないよう、順番と説明文を一致させましょう。リンク先が正しくても、参照記号が小さすぎて選べなければ不便です。
スマートフォンでは脚注が2～3行に折り返すことがあります。行間を詰めすぎず、番号と説明の始まりをそろえ、戻るリンクを次の注釈と混同しない配置にします。文字サイズだけでなく、拡大したときに文章やリンクが重ならないかも確かめてください。
WCAG（WEBコンテンツのアクセシビリティに関する指針）のレベルAAでは、通常の文字と背景のコントラスト比は原則4.5:1以上、大きな文字は3:1以上です。小さな脚注や参照リンクには通常文字の基準を当てはめます。写真の上や透明な背景に置く場合は、実際の色を別途確認してください。注釈と脚注は情報を隠す場所ではなく、本文を確かめやすくするための案内です。