入力欄のフォーカス色は何色がいい？操作中だと伝わるWEB配色

入力欄のフォーカス色は、「今どこを操作しているか」がひと目で分かることを優先して決めます。青である必要はありませんが、通常時の境界線やページ背景と十分に区別できる色を選ぶことが大切です。ここでは、白い入力欄にブルーのフォーカスリングを付ける例を使い、通常時・操作中・エラー時の役割を分けて考えます。

フォーカス色は通常時よりはっきり見える色を選ぶ

以下のHEX（Webで色を表す16進数コード）例では、入力欄の背景を白 ■#FFFFFF、通常時の境界線をスレートグレー ■#64748B にします。この境界線は白に対して約4.76:1のコントラスト比（前景色と背景色の相対的な明るさの差を示す数値）です。

操作中の入力欄には、フォーカスリングとしてブルー ■#2563EB を使う例があります。白 ■#FFFFFF に対して約5.17:1、ページ背景をライトグレー ■#F8FAFC にした場合でも約4.94:1です。通常時の境界線とは色相と見た目の強さが変わるため、現在の入力位置を見つけやすくできます。

WCAG（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）2.2のFocus Visibleでは、キーボードで操作できる要素に見えるフォーカス表示が必要です。さらにNon-text Contrastでは、フォーカスのように状態を識別するために必要な視覚情報は、隣接色との3:1以上が基準になります。ブラウザー既定のフォーカス表示をそのまま使う場合は例外がありますが、独自に色を変えるなら実際の背景とのコントラストを確認します。

CSSではフォーカスリングを消さず、操作中だけ変化を付ける

CSSの :focus は、クリックやキーボード操作などで要素がフォーカスを受けた状態を指定する疑似クラスです。たとえば input:focus に outline を設定すれば、入力中の欄だけにリングを表示できます。キーボード操作時のフォーカス表示を調整したい場合は、:focus-visible も利用できます。

フォーカスを見せたくないという理由で outline: none だけを指定するのは避けます。W3CのFocus Visibleでも、見えるフォーカス表示をなくすことは失敗例として扱われています。独自のデザインにする場合は、元のアウトラインを消す代わりに、同等以上に分かりやすいリングや境界線を用意します。

入力文字はダークブルーグレー ■#334155、背景は白 ■#FFFFFF とすると約10.35:1です。ラベルや入力済み文字の読みやすさを保ちつつ、フォーカス時だけ外側に ■#2563EB を加えると、画面全体を強く着色せずに現在位置を示せます。

エラー色とフォーカス色を同じ意味にしない

入力エラーにダークレッド ■#B42318 を使う場合、白 ■#FFFFFF に対して約6.57:1です。ただし、赤い境界線だけでエラーを伝えず、「メールアドレスの形式を確認してください」のような文言を併用します。フォーカスは「現在操作中」、エラーは「修正が必要」という別の状態なので、同じ色だけで両方を表さない方が分かりやすくなります。

また、フォーカス色をブランドカラーに変える場合でも、色名や好みだけで決めません。入力欄の背景、ページ背景、通常時の境界線と並べて確認し、操作中の欄が十分に区別できるかを確かめます。色だけに頼らず、リングの太さや位置など形の変化も併用すると、状態の違いを伝えやすくなります。

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