forced-colors

Baseline 已廣泛支援

此功能已成熟，並可在多種裝置和瀏覽器版本上執行。自 2022 年 9 月起，所有瀏覽器都已支援此功能。

forced-colors CSS 媒體特性用於檢測使用者代理是否啟用了強制顏色模式，在該模式下，使用者代理會強制頁面使用使用者選擇的有限調色盤。Windows 高對比度模式就是強制顏色模式的一個示例。

語法

forced-colors 媒體特性指示瀏覽器當前是否處於強制顏色模式。

值

none: 強制顏色模式未啟用；頁面的顏色沒有被強制使用有限的調色盤。
啟用: 指示強制顏色模式已啟用。瀏覽器透過 CSS 系統顏色關鍵字向作者提供調色盤，如果合適，還會觸發 prefers-color-scheme 的相應值，以便作者可以調整頁面。瀏覽器根據 Canvas 系統顏色的亮度選擇 prefers-color-scheme 的值（有關更多詳細資訊，請參閱顏色調整規範）。

用法說明

受強制顏色模式影響的屬性

在強制顏色模式下，以下屬性的值將被視為未指定作者級別的任何值。也就是說，將使用瀏覽器指定的值。瀏覽器指定的值不會影響樣式層疊；這些值是在渲染時由瀏覽器強制執行的。

這些瀏覽器指定的值是從系統顏色集中選擇的——這確保了為啟用強制顏色的使用者提供常見 UI 元素的一致對比度。

此外，以下屬性在強制顏色模式下具有特殊行為

box-shadow 被強制設定為 'none'
text-shadow 被強制設定為 'none'
對於非 URL 值的 background-image 被強制設定為 'none'
color-scheme 被強制設定為 'light dark'
scrollbar-color 被強制設定為 'auto'

為上述屬性強制使用的系統顏色取決於元素的上下文。例如，按鈕元素上的 color 屬性將被強制設定為 ButtonText。在普通文字上，它將被強制設定為 CanvasText。有關每個系統顏色何時可能適用於各種 UI 上下文的更多詳細資訊，請參閱系統顏色列表。

注意：使用者代理根據原生元素語義選擇系統顏色，而不是根據新增的 ARIA 角色。例如，將 role="button" 新增到 div 不會使元素的顏色被強制設定為 ButtonText。

除了這些調整之外，瀏覽器還會透過在文字後面繪製“背板”來幫助確保文字可讀性。這對於在影像上放置文字時保持對比度尤為重要。

在某些情況下，使用者代理不會強制執行上述屬性的值

當元素上的 forced-color-adjust 設定為 none 時，所有強制顏色值都不會應用，作者樣式將正常應用。此外，文字的背板也將被停用。

當元素上的 forced-color-adjust 設定為 preserve-parent-color，並且元素上的 color 值未從其父元素繼承時，該元素將與將 preserve-parent-color 設定為 none 時表現相同。

當指定系統顏色時，將使用它而不是原本會被強制使用的值。

你還可以將系統顏色與上述列表中以外的任何屬性一起使用，以確保頁面的其餘部分與強制顏色模式下可用的受限調色盤整合。

<button class="button">Press me!</button>

CSS

css

.button {
  border: 0;
  padding: 10px;
  box-shadow:
    -2px -2px 5px gray,
    2px 2px 5px gray;
}

@media (forced-colors: active) {
  .button {
    /* Use a border instead, since box-shadow is forced to 'none' in forced-colors mode */
    border: 2px ButtonText solid;
  }
}