お問い合わせフォームの配色はどうする？安心して入力できる色の使い方

お問い合わせフォームは、名前・メールアドレス・問い合わせ内容などを入力する場所です。色を増やして華やかにするより、入力欄と説明を見つけやすくし、送信ボタンやエラーだけに必要な強さを持たせる方が情報を整理しやすくなります。色だけで「安心」を作れるわけではないため、見やすい配色に加えて、ラベル・入力説明・エラー文を明確にすることが大切です。

背景を静かにし、ラベルと入力欄を見つけやすくする

ページ背景をライトグレー ■#F8FAFC、フォーム面を白 ■#FFFFFF にすると、入力部分を大きく着色せずにまとめられます。ラベルや本文をダークブルーグレー ■#334155 にすると、白 ■#FFFFFF に対するコントラスト比（前景色と背景色の相対的な明るさの差を示す数値）は約10.35:1です。補足説明をブルーグレー ■#475569 にすると約7.58:1です。

入力欄の背景を白 ■#FFFFFF のままにし、必要な境界線をスレートグレー ■#64748B にすると、白との比は約4.76:1です。ページ背景の ■#F8FAFC と白 ■#FFFFFF の差は約1.05:1と小さいため、入力欄の境界が操作上必要なら背景差だけに頼りません。

W3Cのフォームガイドでは、入力欄には目的が分かるラベルを付けることが勧められています。プレースホルダーは入力すると消えるため、ラベルの代わりにせず、「メールアドレス」「お問い合わせ内容」のような文字を入力欄の外に残します。

必須・送信・エラーで色の役割を限定する

必須項目は赤い文字だけで区別せず、「必須」と文字で明記します。たとえばダークレッド ■#B42318 の「必須」ラベルを白 ■#FFFFFF 上で使うと約6.57:1です。色を補助にしながら、必須か任意かを文字でも判断できるようにします。

送信ボタンはロイヤルブルー ■#1D4ED8、文字は白 ■#FFFFFF にすると約6.70:1です。入力欄や補助リンクまで同じ強い色にせず、最後の「送信する」のような主要操作にアクセントを絞ると、フォーム内の優先順位を作りやすくなります。

入力エラーはペールレッド ■#FEF2F2 の背景にダークレッド ■#B42318 の文字を合わせると約6.01:1です。ただし、赤い枠や背景だけでエラーを伝えず、「メールアドレスの形式を確認してください」のような具体的な文言を表示します。WCAG（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）2.2でも、色を情報伝達の唯一の手段にしないことが求められます。

安心して入力できるかは、色だけでなく説明の分かりやすさで確認する

フォームの印象は配色だけでは決まりません。入力項目を必要以上に増やさず、何を入力するのか、必須か任意か、送信後に何が起きるのかを文字で示します。W3Cのフォームガイドでも、必要な入力形式や補足説明を利用者が確認できる形で提供することが勧められています。

WCAG 2.2では、通常サイズの文字は背景とのコントラスト比4.5:1以上、大きな文字は3:1以上が基準です。また、入力欄などの操作部品を識別するために必要な視覚情報には、隣接色との3:1以上が基準になります。色だけで必須・エラー・選択状態を伝えず、ラベル、説明、枠線なども組み合わせます。

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