必須項目の色は赤でいい？WEBフォームで分かりやすく伝える方法

WEBフォームの必須項目に赤を使うこと自体は問題ありません。ただし、「赤いから必須」と色だけで意味を伝えるのは避けます。必須か任意かは文字でも分かるようにし、赤は補助的な強調として使うのが基本です。特にエラー表示でも赤を使うフォームでは、必須表示とエラー表示の役割が混ざらないように整理します。

赤は使えるが、「必須」という文字を残す

必須項目には、ラベルの近くに「必須」と明記する方法が分かりやすいです。HTML側でも required 属性を使えば、必須であることをプログラム上でも示せます。W3Cのフォームガイドでも、必須入力はラベルで明確に示し、フォームを完了するために必要な説明を利用者が確認できる形で提供することが勧められています。

WCAG（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）2.2では、色を情報伝達の唯一の手段にしないことが求められます。そのため、赤いアスタリスク（*）だけに頼るより、「必須」という文字を併記する方が意味を直接伝えられます。アスタリスクを使う場合も、フォームの冒頭などで何を表す記号か説明しておきます。

赤い必須ラベルと、ニュートラルな必須ラベルを使い分ける

以下のHEX（Webで色を表す16進数コード）例では、白 ■#FFFFFF の背景にダークレッド ■#B42318 で「必須」と表示すると、コントラスト比（前景色と背景色の相対的な明るさの差を示す数値）は約6.57:1です。通常サイズの短いラベルとして使える明暗差があります。

ただし、フォーム内のエラーも赤で表示する場合は、必須ラベルまで強い赤にすると役割が似て見えることがあります。その場合は、必須ラベルをライトブルーグレー ■#F1F5F9 の背景にダークブルーグレー ■#334155 で表示する方法もあります。この組み合わせは約9.45:1です。必須であることは文字で伝わるため、赤を使わなくても意味は失われません。

入力欄の文字を ■#334155、背景を白 ■#FFFFFF にすると約10.35:1です。入力欄の必要な境界線をスレートグレー ■#64748B にすると、白に対して約4.76:1です。必須表示だけを強くしすぎず、入力そのものを見つけやすくすることも大切です。

必須表示とエラー表示は、色だけでなく文言でも分ける

エラーには、ペールレッド ■#FEF2F2 の背景とダークレッド ■#B42318 の文字を使うと約6.01:1です。ただし、赤い枠や背景だけでエラーを示さず、「メールアドレスを入力してください」「形式を確認してください」のように、何を直せばよいか分かる文言を表示します。W3Cの入力検証ガイドでも、エラーを利用者に分かる形で通知することが重要とされています。

WCAG 2.2では、通常サイズの文字は背景とのコントラスト比4.5:1以上、大きな文字は3:1以上が基準です。また、入力欄などの操作部品を識別するために必要な視覚情報には、隣接色との3:1以上が基準になります。必須・任意・エラーの違いは、色、文字、記号、フォーム構造を組み合わせて伝えます。

HueRollでは、候補色を3桁または6桁のHEXやカラーピッカーで調整し、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やWCAGのAA・AAA自動判定には対応していないため、必須ラベル・入力欄・エラー表示など、実際に隣接する組み合わせは別途確認します。