注意書きの文字色はどう決める？目立たせすぎず読ませるWEB配色
WEBサイトの注意書きは、読者が見落とすと困る条件を伝えるための文章です。例えば屋外イベントの案内では、「雨天時は受付場所が変わります」といった情報を本文とは区別して示したくなります。しかし、注意書きをすべて鮮やかな赤や黄色にする必要はありません。大切なのは、少し控えめな配色でも文字が読め、何に注意すべきか伝わることです。ここでは架空の屋外マーケットの案内ページを例に、白背景と淡い背景の2案を比較します。
注意書きの文字色は薄くしすぎず、見出しと配置で区別する
注意書きは、単なる補足情報とは役割が異なります。「雨天時は受付が南口に変更になります。来場前に最新案内をご確認ください」といった、読者の行動に関わる条件を伝えます。以下のイベントと文面は配色説明のための架空の例です。
まず本文とは少し余白を空け、「ご注意」という短い見出しを付けましょう。文章は具体的な行動が分かる形にし、必要な条件を本文と同程度の読みやすい文字サイズで示します。背景色や左側の線を付ける方法はありますが、それらを見なければ注意だと分からない作りにはしません。
重要性が高い注意ほど文字を小さくしたり薄くしたりしないことが基本です。一方、すべての注意欄を強い赤色で塗ると、ページ内で必要以上に競い合うことがあります。注意の内容、配置する場所、読んでほしい順番に応じて、落ち着いた色を選びます。
白背景と淡い背景で、注意書きの文字色を比較する
色はHEX（「#」に続く0〜9とA〜Fの6桁で指定するカラーコード）で示します。コントラスト比とは、文字や線と隣の背景の相対的な明るさの差を表す数値です。共通のページ背景を白#FFFFFF、通常の本文を濃い青灰色#263748にすると、文字と背景は約12.19:1です。
案1：白背景のまま、落ち着いた文字と縦線で示す
- 注意欄の背景は白#FFFFFFのままにします。「ご注意」の見出しは濃い茶色#70430Cで、白#FFFFFFに対して約8.41:1です。
- 「雨天時は受付が南口に変更になります」という本文には、深い茶色#624618を使います。白#FFFFFFとのコントラスト比は約8.72:1です。
- 欄の左に落ち着いた黄土色#9B5E11の縦線を引く案もあります。白#FFFFFFとのコントラスト比は約5.25:1です。縦線が見えなくても「ご注意」と文章から内容が分かるようにします。
この案は、記事本文の途中に短い注意を挟む場合に向いています。背景を増やさず、線・見出し・余白でまとまりを作ります。注意を伝えるための文字は十分に濃く保つので、本文との差を作るためだけに淡い文字色へ変更する必要はありません。
案2：淡いクリーム色の注意欄で条件をまとめる
受付場所の変更と確認事項をひとまとまりにするなら、背景を淡いクリーム色#FFF4DCにする案があります。「ご注意」の見出しを濃い茶色#70430Cにすると約7.70:1、説明文を深い茶色#624618にすると約7.98:1です。左の縦線を黄土色#9B5E11にする場合は、クリーム色#FFF4DCとの比が約4.80:1になります。
白#FFFFFFとクリーム色#FFF4DCの背景同士の比は約1.09:1と小さいため、色面の差だけで注意を伝えず、「ご注意」のラベルと余白を残します。また、文字を薄いベージュグレー#B6A68Dにすると、クリーム色#FFF4DCとの比は約2.18:1に下がります。通常サイズの注意書きには不適切な組み合わせです。
注意の強さ・スマホ表示・背景変更で見直す
すべての注意書きを暖色にする必要はありません。例えば「受付では番号札をお取りください」のような通常の案内を、淡い青灰色#F2F5F7の欄に濃い青灰色#415568で表示する場合、文字と背景のコントラスト比は約7.04:1です。実際に来場者の行動を変更する注意と、通常の案内を、ラベルや配置でも使い分けます。
スマートフォンでは注意欄の左右の余白が大きすぎると、文章が細い幅に押し込まれます。見出しと説明が離れず、折り返し後も読みやすいか確認します。注意欄の色だけを変えて伝達を済ませず、必要なら重要な条件を申込み操作の近くにも文章で示しましょう。
WCAG（WEBコンテンツのアクセシビリティに関する指針）のレベルAAでは、通常サイズの文字と背景に原則4.5:1以上、大きな文字に3:1以上が求められます。意味のある図形や操作部品の見分けに必要な色の差には3:1以上が関係する場合もあります。上記は不透明な単色同士の計算値です。背景や文字の透明度、表示状態を変えた際は改めて確かめてください。色を強くする前に、注意の内容が文章で伝わるかを確認することが重要です。