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

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

定義：accent-color 是一個單獨的 CSS 屬性，用來給特定的原生表單控件的“強調區域”上色，無需偽元素、無需 JS、無需重造。

當前各主流瀏覽器支持著色的控件：

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

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

核心模型與默認值：

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

• 初始值：auto
• 適用元素：所有元素（但只有“帶強調區”的原生控件才有可見效果）
• 是否繼承：是（在 :root 設置一次，全站受益）
• 計算值：auto 或計算后的顏色（與 color 相同規則）

規范允許瀏覽器為保證可讀性做細調（如修改亮度、切換勾選圖標的前景色、生成漸變等）。結論：不同引擎對某些極端顏色會有細微差別——設計如此，并非 Bug。

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

1. 全站品牌著色

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

2. 分區著色（降低認知負擔）

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

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

3. 一色通吃明暗模式

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

無需維護兩套深淺主題強調色。

4. 從設計 Token 驅動

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

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

5. 局部覆蓋 + 全局默認

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

它在哪些部位“上色”

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

可訪問性：必須面對的現實

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

兼容性與互操作

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

規范里最影響實務的點

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

可直接復制的“真場景”片段

一次設主題，少量做局部覆蓋

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

/* 少數必要的局部強調 */
.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);
}

統一滑塊與進度條的視覺

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()，漸進增強 */

何時放棄 accent-color、轉向完全自繪

• 需要非標準形態（切換開關、膠囊式單選、擬物滑塊）。
• 希望跨引擎像素級一致（設計系統“展廳級”組件）。
• 想要復雜的懸停/聚焦動畫，原生部件不開放這些鉤子。

自繪示例（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); }

權衡：得到完全掌控力，但也接手語義、焦點、命中區域與無障礙的全部細節，回歸測試壓力上升。

上線前檢查清單（Production Checklist）

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