Limited support 注意が必要。一部のブラウザのみ対応。プロダクション利用は慎重に判断すること。

accent-color

accent-color は CSS のプロパティで、一部の要素で生成されるユーザーインターフェイス要素の強調表示色を設定します。

フォームカラー

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
accent-color
93
93
92
15.4
93
15.4
auto
93
93
92
15.4
93
15.4
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 2件
制限事項
  • このブラウザでは部分的にしか実装されていません
実装メモ
  • Safari は、コントロールを読みやすくするために最小限のコントラストを維持しません。 バグ 244233 を参照してください。
注釈 2件
制限事項
  • このブラウザでは部分的にしか実装されていません
実装メモ
  • Android 版 Chrome では、コントロールの読みやすさのための最小限のコントラストが維持されません。 バグ 343503163 を参照してください。
注釈 2件
制限事項
  • このブラウザでは部分的にしか実装されていません
実装メモ
  • iOS 上の Safari は、コントロールの読みやすさを維持するために最小限のコントラストを維持しません。 バグ 244233 を参照してください。

基本構文

CSS 
input[type="checkbox"] {
  accent-color: #6200ee;
}
progress {
  accent-color: coral;
}

ライブデモ

checkbox

CSS checkbox demo.

プレビュー全画面表示

radio button

CSS radio button demo.

プレビュー全画面表示

Progress bar

CSS progressba- demo.

プレビュー全画面表示

実務での使いどころ

  • ブランドカラーに合わせたフォームスタイリング

    チェックボックスやラジオボタン、プログレスバーなどの色をサイトのテーマカラーに統一できます。

注意点

  • Safariでは未サポートのため、クロスブラウザ対応が必要な場合はフォールバックを検討してください。

アクセシビリティ

  • アクセントカラーとフォームコントロールの背景色のコントラスト比が十分であることを確認してください。WCAG 2.1の最低コントラスト比4.5:1を満たす色を選択しましょう。

参考リンク