- 無障礙（Accessibility）
- forced-color-adjust
無障礙（Accessibility）
forced-color-adjust
用於選擇加入或退出強制顏色的通用類別。
| Class | Styles |
|---|---|
forced-color-adjust-auto | forced-color-adjust: auto; |
forced-color-adjust-none | forced-color-adjust: none; |
範例（Examples）
退出強制顏色（Opting out of forced colors）
使用 forced-color-adjust-none 通用類別讓元素退出強制顏色模式所強制的顏色。這在強制使用有限色盤會降低可用性的情況下很有用。
嘗試在開發者工具中模擬 `forced-colors: active` 來查看變化
Basic Tee
$35
<form> <img src="/img/shirt.jpg" /> <div> <h3>Basic Tee</h3> <h3>$35</h3> <fieldset> <legend class="sr-only">Choose a color</legend> <div class="forced-color-adjust-none ..."> <label> <input class="sr-only" type="radio" name="color-choice" value="White" /> <span class="sr-only">White</span> <span class="size-6 rounded-full border border-black/10 bg-white"></span> </label> <!-- ... --> </div> </fieldset> </div></form>你也可以使用 強制顏色變體 在使用者啟用強制顏色模式時有條件地添加樣式。
恢復強制顏色（Restoring forced colors）
使用 forced-color-adjust-auto 通用類別讓元素遵守強制顏色模式所強制的顏色：
<form> <fieldset class="forced-color-adjust-none lg:forced-color-adjust-auto ..."> <legend>Choose a color:</legend> <select class="hidden lg:block"> <option value="White">White</option> <option value="Gray">Gray</option> <option value="Black">Black</option> </select> <div class="lg:hidden"> <label> <input class="sr-only" type="radio" name="color-choice" value="White" /> <!-- ... --> </label> <!-- ... --> </div> </fieldset></form>如果你想要取消 forced-color-adjust-none 通用類別的效果，例如在較大的螢幕尺寸上，這會很有用。
響應式設計（Responsive design）
在 forced-color-adjust 通用類別前面加上像 md: 這樣的中斷點變體，讓該通用類別只在中型螢幕尺寸及以上時套用：
<div class="forced-color-adjust-none md:forced-color-adjust-auto ..."> <!-- ... --></div>在變體文件中了解更多關於使用變體的資訊。