WEBフォームの色はどう決める？入力欄・ラベル・ボタンの配色

WEBフォームの色は、入力欄を見つけやすく、項目名を読みやすくし、送信ボタンを迷わず選べるように決めます。全体を鮮やかな色にする必要はありません。お問い合わせフォームを例に、背景・枠線・文字・操作中の表示を整理します。

入力欄・ラベル・ボタンは役割から色を決める

ラベルは「お名前」「メールアドレス」など、何を入力する欄かを示す項目名です。入力欄の背景は周囲とわずかに違う色にしても、境界が曖昧にならないよう枠線を付けます。ラベルは本文と同程度の濃さにそろえ、入力例などの補足文だけ少し弱くすると、読む順序を作れます。

プレースホルダー（入力欄の中に表示する記入例）は、入力し始めると消えます。色を調整してもラベルの代わりにはならないため、項目名は欄の外に残しましょう。送信ボタンはフォームの最後に行う操作なので、入力欄より色の存在感を強めます。

お問い合わせフォームの配色例

淡いグレーを土台にし、濃い文字と青い送信ボタンで構成する例です。HEX（16進数で色を表すコード）を記載しているので、制作時の指定にも使えます。

• フォーム周囲の背景：薄いグレー ■#F4F6F8。入力欄を置く面との差を小さくします。
• 入力欄の背景：白 ■#FFFFFF。入力文字の視認性を確保しやすい土台にします。
• ラベル・入力文字：濃いグレー ■#1F2937。入力欄の白に対して約14.68:1のコントラスト比です。
• 入力欄の枠線：グレーブルー ■#64748B。白い入力欄とのコントラスト比は約4.76:1です。
• 補足文：グレー ■#475569。白背景に対して約7.58:1で、小さめの文字にも使いやすい組み合わせです。
• フォーカス表示・送信ボタン：青 ■#1D4ED8。操作中の輪郭と主要操作を示します。ボタンの文字には白 ■#FFFFFFを合わせ、約6.70:1です。

枠線のグレーと補足文のグレーを同じにする必要はありません。枠線は「ここに入力できる」と伝える役割、補足文は読める文字であることが優先です。青はボタンと操作中の欄に限定すると、色の役割を追いやすくなります。

公開前は文字・境界・操作中の見え方を確認する

WCAG（Web Content Accessibility Guidelines：ウェブコンテンツのアクセシビリティ指針）2.2のAA水準では、通常サイズの文字と背景に原則4.5:1以上、大きな文字に3:1以上のコントラスト比が必要です。入力欄の存在や状態を示す枠線など、操作に必要な非テキストの表示には、隣接色との3:1以上が求められます。

この例の枠線 ■#64748Bは、外側の背景 ■#F4F6F8に対しても約4.39:1です。フォーカスの青 ■#1D4ED8は同じ背景に対して約6.19:1です。キーボード操作中は色を変えるだけでなく、輪郭を太くするなどして現在位置を示します。

最後に、未入力・入力中・入力済みを実際の画面で見比べ、ラベルが消えないこと、ボタンの文字が読めること、入力欄と余白を区別できることを確かめましょう。色の組み合わせが同じでも、画面の明るさや枠線の細さによって見え方が変わるため、スマートフォンでも確認します。