警告表示に黄色を使うときの注意点｜読みやすいWEBデザイン
WEBサイトの警告表示に黄色を使うと、確認してほしい場所を区別しやすくなる場合があります。ただし、黄色い帯を置くだけでは「何が問題で、次にどうすればよいか」は伝わりません。白文字を重ねると読みにくくなる黄色もあります。ここではポスター印刷のデータ入稿ページを例に、警告の背景・文字・枠線と、確認を促す操作を一緒に設計する方法を紹介します。
黄色は「要確認」に使い、内容と次の行動を文字で示す
例えば入稿データのプレビューの近くに、「仕上がり線のそばに文字があります。切れない位置か確認してください」と注意を出す場面を想定します。これは必ず入稿できないエラーとは違い、利用者に内容を見直してほしい警告です。先頭に「要確認」と書き、何を確認するのか、どこで確認できるのかを短い文章で伝えます。プレビューから自動的に問題を検出できることを前提にはしません。
淡い黄色は注意をまとめる背景の候補になりますが、白い背景との差が小さい場合があります。そのため、見出し・太字・警告マーク・枠線を組み合わせ、色だけに依存しない表示にします。W3CのWCAG 2.2（WEBコンテンツのアクセシビリティ指針）では、色を情報や操作の唯一の手がかりにしないことが求められます。
「確認してから進める警告」「操作を受け付けられないエラー」「単なるお知らせ」も分けましょう。どの種類にも黄色を使ってしまうと、急いで直すべきことと参考情報を区別しにくくなります。色の数より、見出しと文章が適切な意味を伝えているかが重要です。
ポスター印刷の入稿画面で黄色い警告を読みやすくする配色例
データのプレビュー、用紙サイズ、確認事項、入稿へ進むボタンのある仮想の画面を考えます。HEXはWEBで色を指定する16進数のコードです。次の色はあくまで一例として、組み合わせる背景とのコントラスト比も確認します。
- ページ背景と通常の文字：全体の背景はオフホワイト#F8F7F3、説明文はチャコール#29363Bにして約11.63:1です。見出しには落ち着いた青灰#284F60を使い、同じ背景と約8.24:1を確保します。
- 入稿プレビューのカード：白#FFFFFFの面にチャコール#29363Bの説明を置くと約12.46:1です。白#FFFFFFとページ背景#F8F7F3は約1.07:1しか違わないため、必要な輪郭にはグレー#75838Aを使います。枠線と白#FFFFFFは約3.91:1です。
- 警告欄の背景：プレビューの下に、淡い黄色#FFF1BFの面を用意します。白いカード#FFFFFFとの差は約1.13:1なので、背景の黄色だけで警告の位置が伝わるとは考えません。
- 警告の見出しと本文：「要確認」の見出し・注意マークには濃い黄土色#6B4B0Eを使い、黄色#FFF1BFと約7.05:1にします。本文をチャコール#29363Bにすると同じ黄色と約11.03:1です。「仕上がり線のそばの文字を確認してください」と具体的に書きます。
- 警告欄の枠線：黄土色#8B640Fの線を黄色#FFF1BFに使うと約4.73:1、周囲の白#FFFFFFに対しても約5.35:1です。薄い黄色い面の輪郭を補い、警告を本文の説明に埋もれさせないための線です。
- 鮮やかな黄色を使う場合：強い黄色#F1CF36の上に白#FFFFFFの文字を置くと約1.53:1で、通常サイズの文字には不足します。チャコール#29363Bなら同じ黄色と約8.14:1です。黄色の面を強くする場合でも、白文字が読めると決めつけないようにします。
- 警告内の確認リンク：「プレビューで余白を確認する」は深い青緑#245F71の下線付き文字にします。黄色#FFF1BFとの比率は約6.30:1です。警告の内容と、次に確認する場所を直接つなぎます。
- 単なるお知らせ：受付時間などの案内欄は淡い青#EAF1F4にし、文字を青灰#30566Cにすると約6.88:1です。「お知らせ」の見出しを付け、警告と同じ黄色を使わないようにします。
- 入稿を止めるエラー：仮に未対応のファイル形式で処理できない場合は、淡い赤#F7EBE8に濃い赤茶#923D34で「アップロードできません。対応形式を確認してください」と表示します。文字と背景は約6.13:1です。警告と異なり、続行できない理由と修正方法を明記します。
- 入稿内容の確認ボタン：カードの外に深い青緑#245F71のボタンを置き、白#FFFFFFで「入稿内容を確認する」と表示します。文字とボタンは約7.12:1、ボタンとオフホワイト#F8F7F3は約6.64:1です。黄色い警告欄全体をクリック操作に見せず、実際のボタンと案内文を分けます。
- 補足文字とキーボードのフォーカス：補足文にはグレー青#56646Cをオフホワイト#F8F7F3に使うと約5.70:1です。警告内のリンクへキーボードで移動したときは青灰#284F60の輪郭を付け、黄色#FFF1BFとの約7.82:1の差を確保します。
この例では、黄色は「確認が必要」という警告だけに使い、見出し・枠線・文章で意味を補っています。背景色を派手にするより、確認内容と次の操作を迷わず見つけられることが目的です。
警告を出すタイミングと消し方も確認する
プレビュー確認の警告は、実際に利用者が確認できる場所の近くに表示します。入力中に突然現れる注意を読み上げで伝える場合、HTML（WEBページの構造を記述する言語）の role="status" は通常の状態更新を穏やかに知らせるために使えます。role="alert" は重要で時間的な緊急性のある通知向けで、すべての黄色い案内に付ける必要はありません。どちらも内容と更新タイミングに合わせて使い分けます。
確認前に自動で警告が消えたり、色だけを変えて説明をなくしたりしないでください。入稿を止めるかどうかはデザインの黄色だけで決めず、実際の入力条件に合わせて制御します。スマートフォンでも警告の文章、リンク、確認ボタンの順序を確かめましょう。
WCAG 2.2のレベルAAでは通常サイズの文字と背景に4.5:1以上、大きな文字に3:1以上が原則必要です。操作の識別に必要な非テキストの図形や輪郭は隣接色と3:1以上が基準ですが、装飾のすべてに一律の数値が適用されるわけではありません。HueRollでは選択色と白・黒のコントラストを確認できますが、任意の2色の比較やAA・AAAの自動判定には対応していません。この記事で示した任意の色同士の比率は別途計算しています。