お知らせ欄の背景色はどう決める？本文と区別しやすい配色

お知らせ欄は本文より見つけやすくしたい一方、背景色を強くしすぎると、ページの中で必要以上に目立つことがあります。基本は、本文と同じ文字体系を保ちながら、お知らせ欄の面だけを少し変える方法です。ここでは白 ■#FFFFFF のページに、淡いブルーグレー ■#E8EEF5 を使い、見出し・本文・日付・リンクの役割を分ける配色を考えます。

本文との差は、強い色より背景面の変化で作る

お知らせ欄を区別するときは、鮮やかな色で囲むより、ページ背景から少しだけ明るさを変えた面を作る方が本文になじませやすくなります。ページ背景を白 ■#FFFFFF、お知らせ欄をブルーグレー ■#E8EEF5 にすると、この2色のコントラスト比（前景色と背景色の相対的な明るさの差を示す数値）は約1.17:1です。

この1.17:1は文字用のコントラスト基準を満たすための数値ではありません。ここでは、静的なお知らせ欄の面を本文背景から軽く分けるための差として使います。WCAG（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）2.2の非テキストコントラスト3:1は、操作部品を識別するために必要な視覚情報や、内容理解に必要な図形などが対象です。単なる装飾的な背景面まで一律に3:1必要という意味ではありません。

見出し・本文・日付・リンクを別の役割で整える

具体例では、お知らせ欄の背景を ■#E8EEF5、見出しをダークブルーグレー ■#334155、本文をブルーグレー ■#475569、日付などの補助情報をグレー ■#5B6475、リンクをブルー ■#1D4ED8 とする組み合わせがあります。

それぞれ ■#E8EEF5 に対して、見出しの ■#334155 は約8.87:1、本文の ■#475569 は約6.49:1、日付の ■#5B6475 は約5.10:1、リンクの ■#1D4ED8 は約5.74:1です。背景だけで区切り、文字は濃い色を保つと、本文との違いを作りながら情報を読みやすくできます。

「NEW」「重要」などの意味を付ける場合は、色だけで状態を伝えず、文字ラベルも併記します。たとえば新着だけ青くする場合でも、「NEW」と表示すれば、色を見分けにくい場合にも意味が残ります。

小さい文字とリンク、クリックできる要素を別々に確認する

WCAG 2.2では、通常サイズの文字は背景とのコントラスト比4.5:1以上、大きな文字は3:1以上が基準です。お知らせ欄では日付やカテゴリが小さく表示されやすいため、補助情報だからといって薄くしすぎないことが大切です。今回のグレー ■#5B6475 は、背景の ■#E8EEF5 に対して約5.10:1あります。

リンクは文字色だけで本文と区別する場合、色の違いだけに頼らない設計も検討します。下線を付ける、リンク文を「詳細を見る」のように明確にするなど、色以外の手掛かりを加えると分かりやすくなります。また、お知らせ欄全体をクリックできるカードにする場合は、フォーカス表示や操作部品を識別するために必要な視覚情報について、隣接色との3:1以上も確認します。

HueRollでは、候補色を3桁または6桁のHEX（Webで色を表す16進数コード）やカラーピッカーで調整し、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やWCAGのAA・AAA自動判定には対応していないため、お知らせ欄の背景・文字・リンクなど実際に隣接する組み合わせは別途確認します。