CSSの新しいプロパティ「accent-color」が便利！今までできなかったフォーム要素のカラーを簡単に変更できる

Post on:2022年3月26日

CSSの新しいプロパティ「accent-color」

現在のHTMLフォーム要素は、カスタマイズが難しいと言われています。カスタムスタイルをほとんどまたはまったく使用しないか、inputのスタイルをリセットして一から作り直すかのどちらかしかないように感じられます。
参考: モダンブラウザに適したCSSリセットのまとめ

そして、一から作り直すとなると、予想以上に手間がかかります。また、要素の状態に応じたスタイル（:indeterminate）を忘れてしまったり、アクセシビリティの機能が失われてしまったりすることもあります。ブラウザで提供されているものを完全に再現するのは、予想以上に大変な作業になるかもしれません。

accent-color: hotpink;

1	accent-color: hotpink;

CSS UIの仕様のCSSの新しいプロパティ「accent-color」は、たった1行のCSSで要素にカラーを適用でき、要素にブランドを組み込む方法を提供することで、カスタマイズの手間を省くことができます。

デモページ

accent-colorプロパティはcolor-schemeでも機能し、ライトでもダークでもカラーを適用できます。次の例では、ユーザーがダークテーマをアクティブにしているため、ページはcolor-scheme: light dark;を使用し、ダークテーマのホットピンクの色合いのコントロールにはaccent-color: hotpink;を使用しています。

デモページ

accent-colorのサポートブラウザ

accent-colorは、2022年3月にすべてのブラウザにサポートされました。

accent-colorのサポートブラウザ

「accent-color」にサポートされている要素

現在のところ、accent-colorプロパティでカラーを変更できるのはチェックボックス・ラジオボタン・レンジスライダー・プログレスバーの4つの要素のみです。これらの要素はCSS accent-colorでライトとダークの配色でプレビューできます。

注:
以下のデモで要素がすべて同じカラーである場合、使用しているブラウザはaccent-colorプロパティをサポートしていません。

【訳者注】
Chromium93で表示したキャプチャを加えました。

チェックボックスでaccent-colorプロパティを使用

See the Pen
Checkbox: default vs accent-color by web.dev (@web-dot-dev)
on CodePen.

accent-colorプロパティをサポートしているブラウザでは、下記のように表示されます。

Chromium 93での表示

ちなみに、サポートされていない場合は下記のように表示されます。

Chrome 92での表示

ラジオボタンでaccent-colorプロパティを使用

See the Pen
Radio: default vs accent-color by web.dev (@web-dot-dev)
on CodePen.

Chromium 93での表示

レンジスライダーでaccent-colorプロパティを使用

See the Pen
Range: default vs accent-color by web.dev (@web-dot-dev)
on CodePen.

Chromium 93での表示

プログレスバーでaccent-colorプロパティを使用

See the Pen
Progress: default vs accent-color by web.dev (@web-dot-dev)
on CodePen.

Chromium 93での表示

コントラストの確保

アクセシブルではない要素が存在しないようにするために、accent-colorプロパティを使用するときは、カスタムアクセントと一緒に使用される適格なコントラストカラーを決定する必要があります。

下記は、Chrome 94（左）とFirefox 92 Nightly（右）のアルゴリズムの違いを示したものです。

左: Chrome 94
右: Firefox 92 Nightly

ここから得られる最も重要なことは、ブラウザを信頼することです。ブランドカラーを提供し、ブラウザが賢い判断をしてくれることを信じましょう。
※ダークテーマでは、ブラウザはカラーを変更しません。

他の要素のカラーを変更するCSS

上記の4つのフォーム要素以外にも、どうやって変更するのか疑問に思うかもしれません。ここでは最小限のカラーを変更するデモを紹介します。

フォーカス時のリング
テキスト選択のハイライト
リストのマーカー
矢印のインジケーター（Webkitのみ）
スクロールバーのサム（Firefoxのみ）

参考: CSSでスクロールバーをカスタマイズする方法を徹底解説

CSSは下記のようになります。

html { 
  --brand: hotpink;
  scrollbar-color: hotpink Canvas;
}

:root { accent-color: var(--brand); }
:focus-visible { outline-color: var(--brand); }
::selection { background-color: var(--brand); }
::marker { color: var(--brand); }

:is(
  ::-webkit-calendar-picker-indicator,
  ::-webkit-clear-button,
  ::-webkit-inner-spin-button, 
  ::-webkit-outer-spin-button
) {
  color: var(--brand);
}