プレースホルダーテキストのコントラスト要件

プレースホルダーテキストとアクセシビリティ

フォーム入力のプレースホルダーテキストはアクセシビリティの議論が多いトピックです。WCAG 2.1はプレースホルダーテキストがコントラスト最低基準を満たすことを明示的に要求していませんが（「本当の」コンテンツではないため）、ベストプラクティスではプレースホルダーを読みやすくすることを強く推奨しています。

薄いプレースホルダーの問題

ほとんどのブラウザはプレースホルダーテキストを薄いグレーでレンダリングします：

/* デフォルトのブラウザプレースホルダー色 */
::placeholder { color: #a9a9a9; }  /* Chrome: 白に対して2.32:1 - 不合格 */
::placeholder { color: #757575; }  /* Firefox: 白に対して4.60:1 - 合格 */

WCAG 1.4.3とプレースホルダー

WCAG達成基準1.4.3は「テキスト」と「テキストの画像」に適用されますが、プレースホルダーテキストが該当するかについては議論があります。ただし、**WCAG 2.1達成基準1.4.11（非テキストコントラスト）**はLevel AAでユーザーインターフェースコンポーネントに適用され、フォーム入力のプレースホルダーは意味のある情報を提供します。

推奨プレースホルダー色

/* 白（#ffffff）背景の場合 */
::placeholder { color: #6b7280; }  /* gray-500: 5.03:1 - AA合格 */
::placeholder { color: #71717a; }  /* zinc-500: 4.79:1 - AA合格 */
::placeholder { color: #737373; }  /* neutral-500: 4.69:1 - AA合格 */
::placeholder { color: #78716c; }  /* stone-500: 4.52:1 - AA合格 */

/* 暗い（#1f2937）背景の場合 */
::placeholder { color: #9ca3af; }  /* gray-400: 5.28:1 - AA合格 */
::placeholder { color: #a1a1aa; }  /* zinc-400: 5.24:1 - AA合格 */

ベストプラクティス

プレースホルダーテキストがWCAG 1.4.3の対象外と考える場合でも、読みやすくすることはすべてのユーザーに利益をもたらします。プレースホルダーテキストのコントラスト比を少なくとも4.5:1にすることで：

1. ユーザーがインタラクション前にヒントを読める
2. 低視力のユーザーが期待される入力形式を理解できる
3. 明るい環境照明でもプレースホルダーが見える

重要な注意

プレースホルダーテキストを可視ラベルの代替として使用しないでください。プレースホルダーはフォーカス時に消え、ユーザーがコンテキストを失います。常にプレースホルダーと可視の<label>要素を組み合わせてください。