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

accent-color

ブラウザデフォルトのフォームコントロールの色をブランドカラーに合わせてカスタマイズできます。従来はフォーム要素の色変更にはカスタムCSSやJavaScriptが必要でしたが、accent-color を使えば1行で統一感のあるテーマを実現できます。シンプルながらUIの一貫性向上に大きく貢献するプロパティです。

フォームカラー

概要

ブラウザデフォルトのフォームコントロールの色をブランドカラーに合わせてカスタマイズできます。従来はフォーム要素の色変更にはカスタムCSSやJavaScriptが必要でしたが、accent-color を使えば1行で統一感のあるテーマを実現できます。シンプルながらUIの一貫性向上に大きく貢献するプロパティです。

対応ブラウザ

デスクトップ

Chrome 93+
Edge 93+
Safari 未対応
Firefox 92+

モバイル

Chrome Android 未対応
Safari iOS 未対応
Firefox Android 92+

基本構文

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

実務での使いどころ

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

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

注意点

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

アクセシビリティ

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

参考リンク