下面給出一版盡量“到骨頭里”的解析；對討厭從零重做原生表單控件的人尤其有用。若仍嫌不夠深入，文末附上主要參考資料。

accent-color 是什么（以及不是什么）

定義：accent-color 是一個(gè)單獨(dú)的 CSS 屬性，用來給特定的原生表單控件的“強(qiáng)調(diào)區(qū)域”上色，無需偽元素、無需 JS、無需重造。

當(dāng)前各主流瀏覽器支持著色的控件：

• input[type="checkbox"]
• input[type="radio"]
• input[type="range"]（已填充軌道部分）
• <progress>（已完成進(jìn)度條）

不包含：文本輸入框、select、文件輸入、日期選擇等。不要把期待放錯(cuò)位置。

核心模型與默認(rèn)值：

:root {
  accent-color: auto;                 /* 默認(rèn)：跟隨系統(tǒng)/UA 主題 */
  /* 或者直接指定任何現(xiàn)代 <color> */
  accent-color: oklch(0.68 0.15 260);
}

• 初始值：auto
• 適用元素：所有元素（但只有“帶強(qiáng)調(diào)區(qū)”的原生控件才有可見效果）
• 是否繼承：是（在 :root 設(shè)置一次，全站受益）
• 計(jì)算值：auto 或計(jì)算后的顏色（與 color 相同規(guī)則）

規(guī)范允許瀏覽器為保證可讀性做細(xì)調(diào)（如修改亮度、切換勾選圖標(biāo)的前景色、生成漸變等）。結(jié)論：不同引擎對某些極端顏色會(huì)有細(xì)微差別——設(shè)計(jì)如此，并非 Bug。

一行代碼，抵掉一頁樣式黑魔法

1. 全站品牌著色

:root { accent-color: var(--brand, #4f46e5); }

2. 分區(qū)著色（降低認(rèn)知負(fù)擔(dān)）

fieldset.billing  { accent-color: var(--billing-accent,  #16a34a); }
fieldset.shipping { accent-color: var(--shipping-accent, #ea580c); }

適合偏好設(shè)置/結(jié)賬表單的分組視覺提示，避免用花哨底色擾民。

3. 一色通吃明暗模式

:root { color-scheme: light dark; }
:root { accent-color: oklch(0.70 0.20 280); } /* 保持色相；對比度由瀏覽器兜底 */

無需維護(hù)兩套深淺主題強(qiáng)調(diào)色。

4. 從設(shè)計(jì) Token 驅(qū)動(dòng)

:root { --accent: color(display-p3 0.38 0.27 0.90); accent-color: var(--accent); }

任何 <color> 語法可用：hex、rgb/hsl、lab/lch/oklch、P3 等。

5. 局部覆蓋 + 全局默認(rèn)

:root { accent-color: var(--brand-600); }      /* 全局默認(rèn) */
fieldset.danger,
input[type="radio"].danger { accent-color: var(--red-600); }  /* 強(qiáng)提醒區(qū)塊 */

它在哪些部位“上色”

• Checkbox/Radio：給勾選標(biāo)記/實(shí)心點(diǎn)和（因平臺(tái)樣式而異）控件的活躍背景/描邊著色。若平臺(tái)某狀態(tài)不使用強(qiáng)調(diào)色，該狀態(tài)可能看不到變化。
• Range：著色已填充的軌道（LTR 為左側(cè)）；滑塊（thumb）外觀由引擎決定。
• Progress：給完成部分著色，底軌保持中性。
• Select/Text/File/Date：不受影響。想完全定制需 appearance+自定義樣式，但也要接手鍵盤交互、焦點(diǎn)、無障礙語義等繁重職責(zé)。

可訪問性：必須面對的現(xiàn)實(shí)

• 對比度由瀏覽器兜底：引擎會(huì)為勾/點(diǎn)等選擇合適前景色，并可能微調(diào)你的強(qiáng)調(diào)色以滿足可讀性（Chromium 與 Firefox 算法略有差異）。
• 禁用態(tài)：仍應(yīng)用強(qiáng)調(diào)邏輯，但通常降低飽和/不透明度，看起來會(huì)更淡。
• 別為了顏色而“偽造控件”：原生控件 + accent-color保留了正確的焦點(diǎn)環(huán)、可點(diǎn)擊區(qū)域、語義與 AT 行為。
• 高對比/強(qiáng)制顏色模式：系統(tǒng)顏色可能覆蓋你的選擇；這是正確行為。必要時(shí)配合 forced-color-adjust 與系統(tǒng)顏色，同時(shí)避免僅憑顏色傳達(dá)信息。

兼容性與互操作

截至 2025-07-14，MDN 標(biāo)注為“限時(shí)可用”，但 Chrome/Firefox/Safari 的現(xiàn)代版本兼容度良好。 快速查詢可參考 Can I use → accent-color。確保測試你的目標(biāo)瀏覽器矩陣。

規(guī)范里最影響實(shí)務(wù)的點(diǎn)

• 取值空間：auto | <color>。transparent、currentColor 也屬于 <color>（但“隱形”控件不太可能通過對比度要求）。
• 繼承：是 → 這就是局部/分區(qū)作用域能優(yōu)雅生效的原因。
• UA 自主性：為了可讀性，瀏覽器可調(diào)整強(qiáng)調(diào)色或翻轉(zhuǎn)內(nèi)部圖元色。不同引擎間出現(xiàn)細(xì)微差別屬預(yù)期。
• 與 appearance 的關(guān)系：若 appearance: none 并徹底自繪，則放棄原生涂層，accent-color 自然無效。

可直接復(fù)制的“真場景”片段

一次設(shè)主題，少量做局部覆蓋

:root { --brand: oklch(0.76 0.16 265); accent-color: var(--brand); }

/* 少數(shù)必要的局部強(qiáng)調(diào) */
.settings-panel   { accent-color: var(--teal-600); }
.newsletter-optin { accent-color: var(--emerald-600); }

讓不同容器里的表單保持一致

form, dialog, details, fieldset, .Card, .Modal {
  accent-color: var(--brand-700);
}

統(tǒng)一滑塊與進(jìn)度條的視覺

input[type="range"], progress { accent-color: var(--brand-500); }

不分支處理明暗模式

:root { color-scheme: light dark; }
:root { accent-color: var(--brand-500); }  /* 對比留給引擎處理 */

Token + 回退策略

:root {
  --accent-light: oklch(0.82 0.12 280);
  --accent-dark:  oklch(0.68 0.16 280);
  accent-color: light-dark(var(--accent-light), var(--accent-dark));
}
/* 依賴 Color 5 的 light-dark()，漸進(jìn)增強(qiáng) */

何時(shí)放棄 accent-color、轉(zhuǎn)向完全自繪

• 需要非標(biāo)準(zhǔn)形態(tài)（切換開關(guān)、膠囊式單選、擬物滑塊）。
• 希望跨引擎像素級一致（設(shè)計(jì)系統(tǒng)“展廳級”組件）。
• 想要復(fù)雜的懸停/聚焦動(dòng)畫，原生部件不開放這些鉤子。

自繪示例（Checkbox）：

input[type="checkbox"] {
  appearance: none;
  inline-size: 1.125rem; block-size: 1.125rem;
  border: 2px solid color-mix(in oklch, currentColor 40%, black);
  border-radius: .25rem;
  display: grid; place-content: center;
}
input[type="checkbox"]::before {
  content: "";
  inline-size: .625rem; block-size: .625rem;
  transform: scale(0);
  transition: transform .14s ease-out;
  background: var(--brand-600);
  clip-path: polygon(14% 44%, 0 60%, 38% 100%, 100% 16%, 84% 0, 38% 62%);
}
input[type="checkbox"]:checked::before { transform: scale(1); }

權(quán)衡：得到完全掌控力，但也接手語義、焦點(diǎn)、命中區(qū)域與無障礙的全部細(xì)節(jié)，回歸測試壓力上升。

上線前檢查清單（Production Checklist）

• 全局設(shè)置一次：:root { accent-color: var(--brand-600); }（或應(yīng)用殼層）。
• 僅在必要處做覆蓋：結(jié)賬步驟、危險(xiǎn)操作等提供額外清晰度。
• **搭配 color-scheme**：與用戶偏好一致。
• 覆蓋狀態(tài)測試：勾/未勾、聚焦、懸停、禁用、暗色、強(qiáng)制高對比。瀏覽器可能微調(diào)顏色，以結(jié)果為準(zhǔn)。
• 舊瀏覽器回退：若品牌一致性是硬要求，再做 polyfill/降級；否則接受系統(tǒng)默認(rèn)，別過度投入。