サイト制作

CSSのaccent-colorでフォームの色を合わせる｜変わる部分と変わらない部分

慈愛妃きづな

2026-11-08

この記事には広告・アフィリエイトリンクが含まれます。

チェックボックスなどの標準UIに色を付けるaccent-color。対象の違いと、選択状態・キーボード操作を確認する手順を紹介します。

標準の部品に、アクセント色を指定する

accent-colorは、ブラウザーが描く一部のフォーム部品の強調色を指定するCSSです。チェックボックスやラジオボタンを、サイトの色に寄せたいときの候補になります。

たとえば input[type="checkbox"] { accent-color: #2761a3; } のように指定します。部品の形を一から描き直さず、ブラウザーが持つ操作部品の一部に色を反映する方法です。

MDNでは、対応する部品としてチェックボックス、ラジオ、範囲選択、進捗表示が挙げられています。すべてのフォーム部品や、すべての状態に同じように適用されるわけではありません。

文字入力欄の背景や、通常のボタンの全面を変える目的なら、別のプロパティの検討が必要です。「色が変わらない」場合は、まず対象の部品と状態が対応範囲に入っているかを確認しましょう。

チェックが入った状態だけを見て完成とせず、未選択、フォーカス中、無効の状態も確かめます。ブラウザーやOSによって描き方が違うため、一つの環境のスクリーンショットと完全に同じ表示を約束する指定ではありません。

色が薄すぎて状態を判別しにくくならないか、キーボードで移動したときに位置が分かるかも見ます。選択を色だけに頼らず、チェックやラベルの意味が残ることが大切です。

色を合わせても、ラベルが関連付いていなければ使いやすいフォームにはなりません。ラベルを押して切り替えられるか、Tabキーで移動できるかなど、元の操作を確認します。

対応状況には差があるため、公開前に対象ブラウザーの互換性を確認し、指定が効かない場合も操作と内容が伝わる設計にします。装飾の一行で終わりにせず、状態が分かるかまで見ると、見た目と使いやすさを一緒に整えられます。