チェックボックスの色はどう決める？選択状態を分かりやすくする方法

チェックボックスは、項目ごとに選ぶ・選ばないを切り替えるフォーム部品です。複数の候補を同時に選べる場面にも使われるため、ラジオボタンのような「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です。WCAG 2.2では通常サイズの文字は背景とのコントラスト比4.5:1以上、大きな文字は3:1以上が基準なので、この組み合わせは通常サイズのラベルにも十分な明暗差があります。

HTMLの <input type="checkbox"> は、項目をチェック済み・未チェックに切り替えるためのネイティブなフォーム部品です。MDNでも、チェックボックスは個別の値を選択する用途に使われています。複数項目を同時に選べるフォームでは、それぞれのチェックボックスに「メール通知を受け取る」「利用規約に同意する」のような意味が分かるラベルを付けます。

独自UIを作る場合、W3CのCheckbox Patternでは role="checkbox" と aria-checked を使って状態を伝える方法が示されています。通常のHTMLチェックボックスで要件を満たせる場合は、まずネイティブ部品を使う方が、キーボード操作や状態通知を自分で再実装する範囲を減らせます。

一部選択とフォーカスは、選択済みとは別の形で示す

W3CのCheckbox Patternでは、チェック済み・未チェックに加えて、一部だけ選択されている「mixed（混在）」状態も扱えます。たとえば親項目の一部だけが選ばれている場合は、中央に横線を表示するなど、通常のチェックマークとは異なる形を使います。3つ目の色だけで混在状態を表すのではなく、記号の形でも区別します。

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

アクセントカラーは必ず青である必要はありません。ブランドカラーを使う場合も、選択中の塗り・チェックマーク・周囲の背景とのコントラストを確認します。HueRollでは、候補色を3桁または6桁のHEXやカラーピッカーで調整し、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やWCAGのAA・AAA自動判定には対応していないため、実際に隣接する組み合わせは別途確認します。