エラーメッセージは赤だけでいい？WEBフォームの色の使い方

WEBフォームのエラーメッセージは、赤くすれば十分でしょうか。赤は入力内容の不備を見つける手がかりになりますが、枠線だけを赤にしても、どの項目をどう直せばよいかは伝わりません。また、赤い背景に白文字を置くと、組み合わせによっては読みにくくなります。大切なのは色の決まりではなく、問題の場所・理由・修正方法をひと続きで伝えることです。ここでは市民体育館のコート予約フォームを例に考えます。

エラーは赤色だけで示さず、項目名と直し方を伝える

例えば「利用日」が未選択、「メールアドレス」が指定の形式に合わない状態で送信しようとしたとします。「入力エラー」とだけ表示するのではなく、利用日のそばに「利用日を選択してください」、メール欄のそばに「メールアドレスを名前@example.comの形式で入力してください」と書きます。入力欄の色が見分けにくくても、修正する場所と内容が分かるようにするためです。

WCAG 2.2（WEBコンテンツのアクセシビリティ指針）では、色を情報の唯一の手がかりにしないことに加え、検出した入力エラーの項目と内容を文字で示すことがレベルAの基準になっています。修正方法が分かるときに適切な提案をすることは、レベルAAの基準です。赤はよく使われる選択肢ですが、必須の色ではありません。同じフォームの案内・警告・成功表示と区別できる、統一したエラー表現を選びましょう。

エラーが複数あるときは、フォーム上部に件数と項目名をまとめ、その後で各入力欄のそばにも説明を表示すると見つけやすくなります。色を変えるだけでなく、エラーの見出し、枠線、文字、必要に応じて注意のマークを一緒に用います。

体育館のコート予約フォームで使うエラー配色例

利用日・時間枠・連絡用メールアドレスを指定する仮想の予約フォームを想定します。HEXはWEBの色を16進数で指定するコードです。通常時と入力エラー時の色を、各背景とのコントラスト比（相対的な明るさの差）で確認します。

• ページの背景・見出し：オフホワイト■#F7F8F5にチャコール■#29363Dの説明文を置くと約11.66:1です。見出しを深い青■#285767にすれば、同じ背景と約7.44:1です。エラー以外の説明まで赤くしないようにします。
• フォーム全体のカード：白■#FFFFFFにチャコール■#29363Dの項目名を載せると約12.43:1です。白■#FFFFFFとページのオフホワイト■#F7F8F5の差は約1.07:1と小さいため、カードの位置は余白と見出しでも区切ります。
• 通常の入力欄：白■#FFFFFFの入力面にグレー青■#72828Bの輪郭を付けると約3.98:1です。外側のオフホワイト■#F7F8F5に対しても約3.73:1あります。ラベルは常に表示し、未入力時にしか見えない案内文だけに頼りません。
• 未選択の「利用日」：エラーと判定した入力欄の線を深い赤茶■#973F39にし、白■#FFFFFFの入力面との差を約6.81:1にします。「利用日を選択してください」という文字も同じ赤茶■#973F39で白■#FFFFFFのそばに表示すれば約6.81:1です。枠線の変化だけで終わらせません。
• 形式が違うメールアドレス：入力欄の下に淡い赤■#FBEDE9の案内面を設け、深い赤茶■#973F39で「名前@example.comの形式で入力してください」と書くと約5.96:1です。何が間違っているかと、入力例の両方を示します。入力済みの内容は不必要に消しません。
• フォーム上部のエラー一覧：淡い赤■#FBEDE9とページ背景■#F7F8F5の差は約1.07:1なので、枠線も深い赤茶■#973F39にします。枠線と淡い赤■#FBEDE9は約5.96:1です。「2項目を確認してください」と示し、各項目に移動できる下線付きリンクを深い青■#24516Dで置けば、淡い赤■#FBEDE9との文字の比率は約7.44:1です。
• 鮮やかな赤を使いたい場合：明るい赤■#EF6260に白■#FFFFFFの文字を置くと約3.19:1で、通常サイズの文字の4.5:1には届きません。赤という色名だけで可読性を判断せず、実際の組み合わせを確認します。
• 赤以外のエラー色：ブランドの他の表示と混同しない場合、淡い紫■#F1ECF7に深い紫■#684A87の「入力エラー」を置く方法もあります。文字・枠線とも背景と約6.20:1です。紫色だからエラーだと決めつけず、同じエラーの見出しと修正案内を添えます。
• 修正後の入力欄：正しい入力へ直したら、実際の再検証結果に合わせてエラー表示を解除し、枠線を通常のグレー青■#72828Bへ戻します。白■#FFFFFFとの比率は約3.98:1です。修正済みかどうかを色だけで判断せず、入力内容と状態が合うようにします。
• キーボードのフォーカス：Tabキーで項目へ移動したときは、エラー枠とは別に深い青■#24516Dの輪郭を付けます。白■#FFFFFFと約8.49:1の差があります。どの欄に操作の焦点があるか、エラーかどうかとは別に示します。
• 「予約内容を確認する」ボタン：深い青緑■#245E73に白■#FFFFFFの文字を使うと約7.18:1です。ボタンとページ背景■#F7F8F5も約6.74:1あります。押した結果、入力条件に合わない項目があればその欄へ案内し、検証が通っただけで予約確定とは表示しません。

通常の入力欄は落ち着いた枠線で統一し、エラーのある欄だけに見出し・色・修正案内を追加する構成です。赤を使う場合も紫を使う場合も、問題の内容が文字で伝わることを優先します。

再入力・読み上げ・再送信の動作まで確認する

エラーが確定した入力欄には、HTML（WEBページの構造を記述する言語）の aria-invalid="true" で不正な入力状態を支援技術に伝える方法があります。aria-describedby で入力欄とエラー説明の要素を関連付けることもできます。必須欄が空というだけで、入力前からすべてに不正な状態を付けるのではなく、検証のタイミングと合わせて扱います。

エラー一覧を表示したら、キーボード利用者や読み上げ利用者が一覧に気付き、該当欄へ移動できるか確認します。入力済みの他の項目は可能な限り保持し、修正後に再送信したときは新しい検証結果へ表示を更新します。通信の失敗と、入力形式の誤りは原因と対処が違うため、同じ文言にしないことも大切です。

WCAG 2.2のレベルAAでは、通常サイズの文字と背景に4.5:1以上、大きな文字に3:1以上、操作の識別に必要な非テキストの表示は隣接色と3:1以上が原則です。スマートフォンでも説明文や枠線が見つけられるか試しましょう。HueRollでは選択色と白・黒のコントラストを確認できますが、任意の2色の比較やAA・AAAの自動判定はできません。本文の任意の色同士の比率は別途計算しています。