WEB記事の囲み枠は何色がいい？本文になじむ背景とボーダーの選び方
WEB記事で道具の一覧や用語の説明を本文から少し区切りたいとき、囲み枠には何色を使えばよいのでしょうか。背景を濃くすれば目立ちますが、囲み枠が続くたびに文章の流れを止めることもあります。一方、背景を淡くしすぎると、どこからどこまでが一つの情報なのか分かりにくくなります。今回は架空の水彩画入門記事に「道具メモ」を入れる場面を例に、白い枠と淡い背景の枠を比較します。
囲み枠の背景とボーダーは、まとめたい情報の役割で決める
ここでいう囲み枠は、本文から関連情報を取り出し、背景色やボーダー（囲みの輪郭となる線）と余白で一つのまとまりにする表示です。引用文を出典付きで示す枠や、緊急の注意を伝える警告欄とは目的を分け、道具の一覧・用語の説明・確認項目などに使います。
例えば「水彩紙の上に色を重ねる」という説明の途中に、「道具メモ：水入れ、筆を拭く布、試し塗り用の紙を手元に用意します」という小さな欄を置きます。見出しの「道具メモ」を付ければ、枠線が目立たなくても本文とは違う役割が分かります。実際の道具は描き方によって異なるため、この例は配色と配置を説明するための仮の内容です。
先に本文と囲み枠の文字色を選び、次に背景と線の必要性を考えます。背景も線も必ず両方必要というわけではありません。本文に自然になじませたいなら、最初はページと同じ白い面を線で区切る案から試せます。より広いまとまりが必要なら、淡い背景を追加して比較します。
道具メモを「白い囲み枠」と「淡い背景の囲み枠」で比較する
以下ではHEX（「#」と、その後ろに0～9とA～Fを6桁並べて指定する色コード）を使います。コントラスト比とは、文字や線などの前景色と隣り合う背景色の相対的な明るさの差を示す数値です。両案ともページ背景を白#FFFFFF、通常の本文を濃い青灰色#293B46に固定し、本文と背景の比を約11.61:1にします。
案A：白い面をボーダーで区切り、色面を増やさない
- 囲み枠の内側も白#FFFFFFとし、文字は本文と同じ濃い青灰色#293B46を使います。この組み合わせは約11.61:1です。
- 「道具メモ」という見出しには深い青緑#1C5551を使います。白#FFFFFFとのコントラスト比は約8.51:1です。
- 外周のボーダーを落ち着いた灰緑#55776Fにすると、内側と外側の白#FFFFFFに対して約4.94:1の差があります。
この案は、本文の途中に短いメモを挟みたいときに向いています。白い面が続くため、背景の色数を増やしません。ボーダーは2px程度の太さから試せますが、px（ピクセル）はWEBで長さを指定する単位であり、この数値は固定の基準ではありません。線が細すぎて見つけにくければ、太さや上下の余白も調整します。
案B：淡い緑灰色の背景で関連情報をまとめる
道具メモをもう少しまとまりとして見せたい場合は、囲み枠の背景を淡い緑灰色#EEF5F1にします。中の文字を濃い青灰色#293B46にすると、コントラスト比は約10.49:1です。見出しの深い青緑#1C5551は同じ背景#EEF5F1に対して約7.69:1、補足として小さく表示する灰青色#526572は約5.48:1です。
ただし、淡い背景#EEF5F1と周囲の白#FFFFFFの差は約1.11:1しかありません。輪郭を明確にしたいときは、案Aと同じ灰緑#55776Fのボーダーを使うと、内側の淡い背景#EEF5F1に対して約4.46:1、外側の白#FFFFFFに対して約4.94:1になります。同じ線色を再利用すれば、ボックスごとに新しい色を増やさずに済みます。
逆に、補足の文字色を薄い灰緑#A8B7AEにすると、淡い背景#EEF5F1との比は約1.89:1と小さくなります。文字を目立たせないためにコントラストを落としすぎると、道具の説明そのものを読み落とす可能性があります。
囲み枠の幅・余白・線の役割を調整する
囲み枠の横幅は本文の幅にそろえ、内側に16～20px程度の余白を設けるところから試せます。「道具メモ」の見出しと中身の間は詰めすぎず、枠の前後にも段落との間隔を取ります。囲み枠を何個も連続させるなら、本当に本文から切り離したい内容だけに使っているか見直しましょう。
CSS（WEBページの見た目を指定する仕組み）ではbackground-colorで背景、borderで枠線を指定できます。ただし、背景の色だけを変えて意味を伝えるのではなく、見出しや文章でも内容を区別します。通常の情報をまとめる装飾的な枠線が、すべてWCAGで3:1以上を義務付けられるわけではありません。一方、操作部品や意味の理解に不可欠な図形の境界などには、隣接色と3:1以上が関係する場合があります。ここでは枠を見つけやすくするための設計値として、内外の背景との比も確認しています。
WCAG（WEBコンテンツのアクセシビリティに関する指針）のレベルAAでは、通常サイズの文字と背景に原則4.5:1以上、大きな文字には3:1以上のコントラスト比が必要です。上記の文字色は通常文字の基準を超えるように選びました。スマートフォンではボックスの内側の余白で文章が狭くなりすぎないか、文字を拡大しても枠からはみ出さないか確認してください。囲み枠は装飾を増やすためではなく、読み進める中で関連情報を整理するために使うのがポイントです。