プレースホルダーの文字色はどう決める？薄すぎないフォームデザイン

プレースホルダーは、入力欄が空のときに「例：name@example.com」のような短いヒントを表示する文字です。補助的な情報だからといって薄くしすぎると、読みにくくなることがあります。基本は、入力済みの文字より少し弱く見せつつ、背景とのコントラストを確保することです。さらに、プレースホルダーをラベルの代わりにはせず、入力内容の名前や重要な説明は常に見える形で残します。

プレースホルダーも通常の文字としてコントラストを確認する

WCAG（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）2.2の文字コントラスト基準は、プレースホルダーの文字にも適用されます。通常サイズの文字は背景とのコントラスト比（前景色と背景色の相対的な明るさの差を示す数値）4.5:1以上、大きな文字は3:1以上が基準です。

たとえば白 ■#FFFFFF の入力欄に、スレートグレー ■#64748B のプレースホルダーを使うと約4.76:1です。入力済みの文字をダークブルーグレー ■#334155 にすると、白との比は約10.35:1になります。プレースホルダーを少し弱く見せながら、通常サイズの文字として必要な明暗差を確保できます。

一方、より淡いブルーグレー ■#94A3B8 を白 ■#FFFFFF 上で使うと約2.56:1です。この組み合わせは通常サイズのプレースホルダーには不足します。「プレースホルダーらしく薄くする」ことを優先しすぎず、実際の背景色との比率で判断します。

色だけでなく、ブラウザーのopacityも確認する

CSSの ::placeholder は、プレースホルダーテキストだけを指定する疑似要素です。W3CのForms Tutorialでは、ブラウザーがプレースホルダーを低いコントラストで表示することがあり、色と不透明度を組み合わせて見た目を薄くする場合があると説明されています。そのため、色コードだけでなく実際に描画された見え方を確認します。

たとえばプレースホルダー色を ■#64748B に設定しても、追加の透明度がかかれば実際の表示はより薄くなります。意図した色をそのまま使う場合は、::placeholder 側で opacity: 1 を明示する方法があります。入力欄の背景がライトグレー ■#F8FAFC の場合、■#64748B との比は約4.55:1なので、この組み合わせでも通常サイズの文字の4.5:1をわずかに上回ります。

背景色を変えると比率も変わるため、白背景で確認した色をそのまま別の入力欄へ使わず、実際の背景ごとに確認します。

プレースホルダーは短い例にして、ラベルや説明を置き換えない

MDNとW3Cのフォームガイドでは、プレースホルダーは入力例や短いヒントに使い、<label> の代わりにしないことが勧められています。プレースホルダーは入力を始めると消えるため、「メールアドレス」「電話番号」のような項目名や、入力条件そのものを置き換える用途には向きません。

入力形式の説明が必要な場合は、ラベルや入力欄の近くに常時見える説明を置きます。たとえばラベルを「電話番号」、プレースホルダーを「例：09012345678」のように分ければ、入力後も何の項目か分かります。フォーカス中の入力欄をブルー ■#2563EB のリングで示す場合、白 ■#FFFFFF との比は約5.17:1です。プレースホルダー、ラベル、フォーカス表示はそれぞれ役割を分けて考えます。

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