フォーム部品の色を変える
accent-color
チェックボックスやスライダーの色を1行で変える。部品を自作せずにブランド色をなじませられる。
AIへの頼み方
フォームのチェックボックス・ラジオボタン・スライダー・進捗バーの色を、ブランド色にそろえてください。accent-color を1行で指定してください。色が効かない環境でも意味が伝わるよう、選択状態を色だけで示さないようにしてください。
動くデモ
この項目のデモは自動では動きません。操作して確かめてください。
全画面で見る ↗最小コード
/* これだけ。チェックボックス・ラジオ・スライダー・進捗バーの
「効いている色」がまとめてブランド色になる。 */
form {
accent-color: #5F7A30;
}
/* ページ全体に効かせるなら */
:root { accent-color: #5F7A30 }
/* 未対応でも壊れない：ブラウザ既定の色（青）で表示されるだけ。
フォールバックのコードを書く必要はない。
ただし 2026-08 時点では一部環境が部分対応（効く部品が限られる）なので、
「色が効かなくても意味が伝わる」設計にしておくこと。
例：選択中の項目を色だけで示さず、太字やチェック記号も併用する。 */対応状況
新顔 2026年08月時点で確認
実確認では Baseline limited（Safari は 26.2＝2025-12 で対応、モバイル系に部分対応が残る。caniuse グローバル 95.43%。設計 §9 の想定は「定番」だった）。ただし未対応でもブラウザ既定の色になるだけで壊れず、書くべきフォールバックが存在しない。2026-08-16 の親裁定により、この種のものはバッジ上「新顔」として扱う。
未対応でも既定色になるだけなので、実案件でそのまま使える。
対応状況は自動更新していません。確認日より後の変化はこのページに反映されていない場合があります。
使いどころ／避けどころ
フォームのある案件で、部品を自作せずにブランド色をなじませたいときに向く。チェックボックスやラジオボタンを見た目のために作り直すと、キーボード操作や読み上げの対応まで自分で背負うことになる。この1行なら、標準の使いやすさを保ったまま色だけ変えられる。
書くのはページ全体に1行か、フォームの外側に1行。個別に指定して回る必要はない。
避けたいのは、色だけで状態を示すこと。効く部品や効き方に環境差がまだ残っているので、色が付かない人がいる前提で考える。選択中の項目は太字にする、チェック記号を出す、といった色以外の手がかりを併せて置く。
薄い色を選ばないのも大事になる。チェックの記号は白で描かれるので、背景が薄いと記号が見えなくなる。ブランド色が淡いなら、この用途だけ濃いほうの色を使う。
未対応の環境ではブラウザ既定の青になるだけで、壊れることはない。だから対策のコードを書く必要はなく、そのまま入れて構わない。この辞典で「新顔」の札を付けているのはそういう理由になる。
色を変えたら、明るい表示と暗い表示の両方で、チェックの記号が見えるか確かめる。