ラジオボタンの色はどう決める？フォームになじむアクセントカラー

ラジオボタンは、複数の候補から1つだけを選ぶときに使うフォーム部品です。選択中だけアクセントカラーを使うと状態を見分けやすくなりますが、色だけで「選択済み」を伝えるのは避けます。外側の円、中央の点、ラベル、フォーカス表示を役割ごとに整理し、フォーム全体になじむ配色にすることが大切です。

未選択は落ち着かせ、選択中だけアクセントを使う

以下のHEX（Webで色を表す16進数コード）例では、フォーム背景を白 ■#FFFFFF、未選択のラジオボタンの外枠をスレートグレー ■#64748B にします。外枠と白背景のコントラスト比（前景色と背景色の相対的な明るさの差を示す数値）は約4.76:1です。

選択中は外枠と中央の点をロイヤルブルー ■#1D4ED8 にすると、白 ■#FFFFFF に対して約6.70:1です。未選択と選択済みで色が変わるだけでなく、中央に点が現れる形の変化もあるため、状態を複数の手掛かりで示せます。

WCAG（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）2.2のNon-text Contrastでは、操作部品や選択状態を識別するために必要な視覚情報は、隣接色との3:1以上が基準です。またUse of Colorでは、色を情報伝達の唯一の手段にしないことが求められます。選択済みを青だけで示さず、中央の点や形の変化も残します。

ラベル文字とグループ名を読みやすくする

選択肢の文字はダークブルーグレー ■#334155、背景は白 ■#FFFFFF にすると約10.35:1です。選択中のラベルだけを青くする必要はなく、ラジオボタン本体の形と色で状態が分かるなら、文字色を統一するとフォーム全体を落ち着かせやすくなります。

HTMLの <input type="radio"> は、同じ name を持つ選択肢を1つのグループとして扱い、その中から1つだけを選べます。MDNでは、関連する選択肢を <fieldset> と <legend> でまとめる例も示されています。「配送方法」「支払い方法」のように、何について1つ選ぶのかが分かるグループ名を用意します。

W3CのRadio Group Patternでも、ラジオグループと各ラジオボタンには分かる名前が必要とされています。独自のラジオUIを作る場合は、見た目だけを丸くするのではなく、選択状態がプログラム上でも伝わるようにします。通常のHTMLラジオボタンで要件を満たせる場合は、まずネイティブのフォーム部品を使う方が実装を単純にできます。

フォーカス色は選択色とは別の役割として確認する

キーボードで操作しているときは、どの選択肢にフォーカスがあるかも分かる必要があります。たとえば白 ■#FFFFFF の周囲にダークネイビー ■#0F172A のフォーカスリングを置くと約17.85:1です。選択状態の ■#1D4ED8 とフォーカス状態の ■#0F172A を別の見た目にすると、「選択されている」と「現在操作している」を混同しにくくなります。

アクセントカラーは必ず青である必要はありません。ブランドカラーを使う場合も、選択中の外枠や中央の点と白背景とのコントラストを確認します。淡い色を使いたい場合は、色相だけで状態を変えるのではなく、太さや中央点などの形も併用します。

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