顏色

無障礙顏色

請勿單靠顏色來表示使用者介面元件或其狀態：請使用圖像和/或形狀來區分。請勿「只」用顏色表示成功/錯誤。使用圖示或文字。

<!-- Good: Denotes state without colors alone -->
<div class="error-msg">
  <span aria-hidden="true">❌</span>
  <span>The password entered was invalid.</span>
</div>

對比

• 最低對比度標準：一般文字為 4.5:1，大型文字或圖示為 3:1。
• 確保非文字對比度符合標準：使用者介面元件邊界和狀態的對比度至少應為 3:1。
  • 包括構成邊界或表示 UI 元件存在的視覺元素 (邊框、背景、方塊陰影、底線)，例如輸入欄位邊框。
  • 這也包括表示元件中有效狀態的視覺元素 (例如核取方塊勾號或切換鈕)。
  • 注意：非文字對比度達到 3:1 可能會對極簡設計造成挑戰。柔和的漸層或細緻的內嵌/外嵌陰影，可柔化視覺邊界，同時滿足無障礙需求。
• 僅在必要時使用 prefers-contrast：如果設計採用低對比度的強調色 (例如細微邊框、柔和的次要文字)，需要強化時，請使用 @media (prefers-contrast: more)。大多數已符合基準對比度的網站都不需要使用。

淺色和深色色彩配置

• 支援淺色和深色色彩配置：遵循 @media (prefers-color-scheme: dark) 並與 color-scheme CSS 屬性配對，讓表單控制項、捲軸和其他使用者代理程式轉譯介面相符。詳情請參閱「深色模式」。

強制顏色模式

• 支援強制顏色模式：在強制顏色模式 (Windows 上的高對比度) 下，瀏覽器會以系統關鍵字覆寫作者顏色，並移除 background-image、box-shadow 和 border-image。使用 @media (forced-colors: active) 為顏色符記定義系統顏色備用方案。
• 僅在顏色為必要資訊時使用 forced-color-adjust: none (語法醒目顯示工具、顏色挑選器色塊)。請勿僅為了維持美觀而使用 forced-color-adjust: none。
• 請勿依賴 background-image、box-shadow 或 border-image 傳達邊框、分隔線或狀態：這些元素在強制顏色模式下會消失 (通常在列印時也會消失)。如果必須使用，請確保在強制顏色模式下有替代方案，例如使用 outline 或 border 搭配系統顏色關鍵字 (CanvasText、LinkText、ButtonText、Highlight、GrayText 等)。

生成色調

動態產生色調前，請先確認是否可以使用現有的預先定義設計權杖。這可讓設計師進一步控管，並確保一致性。

如需動態產生較亮或較暗的顏色，請按照下列步驟操作：

• 請勿只調整 oklch/oklab 或 lch/lab 中的亮度色版，例如 oklab(from var(--primary) 0.9 a b)。雖然理論上這是正確的做法，但瀏覽器尚未實作色域對應，因此產生的顏色無法預測。
• 您可以使用 color-mix() 混合白色或黑色 (最好是 oklab)。這樣可以確保顏色在色域內，但往往會過度降低色彩飽和度，並產生褪色的色調和陰影。
• 您可以結合亮度調整與其他方法 (例如 color-mix(in oklab, oklch(from var(--primary) 0.9 c h), white 30%))，在兩者之間取得平衡，但亮度調整幅度不應超過 30%。