# accent-color

> フォーム部品やチェックボックスなどのアクセント色を指定するプロパティです。ブラウザのデフォルトUIの色をカスタマイズでき、ブランドカラーに合わせたフォームデザインを実現できます。

- カテゴリ: 背景・装飾
- URL: https://www.css-dictionary.com/property/accent-color/

## 構文

```css
accent-color: <color>
```

## Tailwindでは

- `accent-pink-500` → accent-color: パレットのpink-500
- 一般形: `accent-{color}-{shade}`

## ブラウザ対応

- 対応が限定的
- Chrome 93+ / Firefox 92+ / Safari 26.2+ / Edge 93+

## コード例

### 例1: accent-colorでフォーム部品の色を変更できます。上記はHTMLとCSSを組み合わせた例です。

```css
<input type="checkbox" style="accent-color: #f59e42;" checked> オレンジ色のチェックボックス
```

## TIPS

input[type=checkbox]やradio、progressなどで使える。

## AIがよく間違えるポイント

チェックボックスやラジオの色変えにAIはappearance: noneからの完全自作を提案しがちですが、「色を変えたいだけ」ならaccent-color 1行で済みます（ネイティブのアクセシビリティを保てるのが利点）。形状まで変えたい場合に初めて自作を検討する、という段階の使い分けが重要です。

## AIへの依頼文例

- フォームのチェックボックス・ラジオ・レンジをブランドカラーにしたい。自作せずaccent-colorで済むか判断して実装して

## 関連プロパティ

- [color](https://www.css-dictionary.com/property/color.md)
- [background-color](https://www.css-dictionary.com/property/background-color.md)
- [pseudo-user-valid](https://www.css-dictionary.com/property/pseudo-user-valid.md)