ユーザー操作
accent-color
accent-color は、チェックボックスやラジオボタンなど、フォーム部品の目立たせる部分の色（アクセントカラー）を指定します。
構文
auto | <color>プレビュー
プリセット
右下の角をドラッグするとサイズを変えられます
コード
.box {
accent-color: #e0951a;
}コントロール
accent-color#e0951a
解説
値の書き方
色を書きます。初期値の auto では、ブラウザが決めた色（OS のアクセントカラーに合わせることもあります）になります。accent-color は継承するので、body などに 1 回書けば、ページの中のフォーム部品の色がそろいます。
効く部品
効くのは、チェックボックス・ラジオボタン・スライダー（<input type="range">）・進捗バー（<progress>）です。このページのプレビューには、この 4 つを並べています。チェックを入れたときの塗りや、スライダーのつまみまでの部分などが、アクセントカラーで描かれます。
appearance: none で見た目を消した部品や、ボタン・入力欄・セレクトボックスには効きません。
読みやすさはブラウザが保つ
チェックマークのような部品の上の印は、アクセントカラーとの差が出るように、ブラウザが色を選びます。Chrome・Edge では、初期表示の橙色ならチェックマークが黒く、プリセットの暗い色なら白くなります。明るいアクセントカラーでは、スライダーや進捗バーの残りの部分も濃い色になります。ブラウザは、読みやすさのために色の明るさを変えることもあります。Safari は 26.2 より前は、この差を保つ調整をしていません。