検索ボックスの色はどう決める？入力しやすく見せるWEBデザイン

検索ボックスは、入力欄・検索ボタン・虫眼鏡アイコン・プレースホルダーなど、少ない要素で「ここに検索語を入れる」と伝える必要があります。周囲との境界を薄くしすぎたり、入力文字と補助文字の差を弱くしすぎたりすると、どこに入力すればよいか分かりにくくなります。基本は、入力欄をニュートラルに保ち、検索ボタンとフォーカス状態だけにアクセントカラーを集めることです。

入力欄の輪郭と文字を先に整える

以下のHEX（Webで色を表す16進数コード）例では、ページ背景をライトグレー ■#F8FAFC、検索ボックスの入力面を白 ■#FFFFFF にします。この2色のコントラスト比（前景色と背景色の相対的な明るさの差を示す数値）は約1.05:1と小さいため、背景差だけで入力欄の位置を示すのは十分ではありません。

入力欄の必要な境界線をスレートグレー ■#64748B にすると、白 ■#FFFFFF に対して約4.76:1です。入力文字をダークブルーグレー ■#334155 にすると約10.35:1になります。枠線は入力欄の形を示し、文字色は入力した検索語を読みやすくするというように、役割を分けます。

HTMLの <input type="search"> は、検索語の入力を目的としたテキスト入力欄です。MDNでは通常のテキスト入力と機能的には同じですが、ブラウザーが異なる見た目を適用する場合があると説明されています。W3Cのフォームガイドでは、検索欄を含むフォーム部品に目的が分かるラベルを用意することが勧められています。見た目上ラベルを省く場合でも、コード上では検索欄だと分かる名前を残します。

検索ボタンとフォーカスだけにアクセントカラーを集める

検索ボタンをロイヤルブルー ■#1D4ED8、文字や虫眼鏡アイコンを白 ■#FFFFFF にすると約6.70:1です。入力欄全体を青くするのではなく、検索を実行する操作だけに強い色を使うと、どこへ入力し、どこを押すのかを分けやすくなります。

WCAG（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）2.2では、通常サイズの文字は背景とのコントラスト比4.5:1以上、大きな文字は3:1以上が基準です。またNon-text Contrastでは、操作部品や状態を識別するために必要な視覚情報は、隣接色との3:1以上が基準です。虫眼鏡だけで検索ボタンの意味を伝える場合は、アイコンの見え方だけでなく、ボタンに分かる名前を付けることも重要です。

入力中の検索欄には、ブルー ■#2563EB のフォーカスリングを使う例があります。白 ■#FFFFFF に対して約5.17:1、ページ背景の ■#F8FAFC に対しても約4.94:1です。W3CのFocus Visibleでは、キーボードで操作できる要素に見えるフォーカス表示が必要とされています。検索ボタンのアクセント色と似ていても、リングという形の違いを残せば、「実行ボタン」と「現在入力中」を区別しやすくなります。

プレースホルダーや補助アイコンを薄くしすぎない

プレースホルダーに「サイト内を検索」のような短い例を入れる場合は、ラベルの代わりにはせず補助情報として使います。白 ■#FFFFFF の入力欄にスレートグレー ■#64748B のプレースホルダーを使うと約4.76:1です。入力文字の ■#334155 より少し弱く見せながら、通常サイズの文字として必要な明暗差を確保できます。

入力済みの検索語を消すクリアボタンや補助アイコンを表示する場合は、ブルーグレー ■#475569 を白 ■#FFFFFF 上で使うと約7.58:1です。ただし、色を薄くするだけで「補助操作」を表現せず、位置や形、分かる名前も合わせて設計します。ブランドカラーを検索ボタンに使う場合も、入力面・文字・アイコン・フォーカスとの組み合わせを個別に確認します。

HueRollでは、候補色を3桁または6桁のHEXやカラーピッカーで調整し、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やWCAGのAA・AAA自動判定には対応していないため、検索ボックスの枠線・入力文字・ボタン・フォーカス・補助アイコンなど、実際に隣接する組み合わせは別途確認します。