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

フォーム要素のチェックボックス・ラジオボタン・レンジスライダー・プログレスバーのカラーを簡単に変更できるCSSの新しいプロパティ「accent-color」の基礎知識と使い方を紹介します。

CSSの新しいプロパティ「accent-color」の基礎知識と使い方

CSS accent-color
by Adam Argyle, Joey Arhar

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

このページのデモをご覧になる時は、Chromium93でご覧ください。

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

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

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

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

accent-colorプロパティの使用例

デモページ

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

accent-colorプロパティの使用例

デモページ

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

2021年8月現在、accent-colorプロパティはChromium93+およびFirefox92+にサポートされています。

「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での表示

Chromium 93での表示

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

Chrome 92での表示

Chrome 92での表示

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

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

Chromium 93での表示

Chromium 93での表示

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

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

Chromium 93での表示

Chromium 93での表示

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

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

Chromium 93での表示

Chromium 93での表示

コントラストの確保

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

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

アルゴリズムの違い

左: Chrome 94
右: Firefox 92 Nightly

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

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

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

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

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

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

これらのCSSは現在リリースされているブラウザでサポートされています。

See the Pen
special input element selection tester
by web.dev (@web-dot-dev)
on CodePen.

今後の可能性

仕様では、accent-colorプロパティの適用をこの記事で紹介した4つの要素に限定しているものではありません。そのため、追加される可能性もあります。例えば、select要素内で特定のoption要素をaccent-colorプロパティで強調表示できます。

sponsors

top of page

©2021 coliss