顏色
顏色系統是一小組漸層，按角色命名，並根據它們實際渲染的背景進行驗證。大多數顏色錯誤都是系統性錯誤。一個孤立挑選的值、一個因為看起來對就借用的代號、一個無人測量的配對。
永遠不要回報你沒有測量過的對比度值，也永遠不要猜測一個你可以計算出來的顏色。顏色是少數有精確答案的介面問題之一，所以請提供精確答案。
對比度要求屬於 hr-better-accessibility。表面、陰影和圖示顏色不在此技能範圍內。
符合專案的顏色系統
重複使用專案的代號和表示法。為了修正一個數值而添加第二種表示法，會讓調色板更難理解。一個一致的十六進位系統，勝過散落著 oklch() 的十六進位系統。
一旦代號存在，就用 lint 規則或 guard 測試來強制執行，該規則會對代號檔案以外的顏色文字報錯，並保留一個簡短的允許清單給那些設計上需要原始值的地方。一條只有文字的「使用代號」規則，背後沒有檢查機制，很快就會失靈。
對於一個新系統，oklch() 是最好的預設值，因為它的數字行為符合下面漸層規則的描述。在其他所有地方，一個顏色函式庫會在專案自己的表示法中產生相同的漸層（color-formats.md）。
系統是漸層，不是顏色
一個中性漸層、一個強調漸層，以及產品實際渲染的狀態漸層。一個沒有任何地方匯入的 warning 漸層，是對零像素的維護。第二個強調色相只有在兩個東西必須一眼就能區分開來時，才有其存在的價值。
每個階梯都有其任務
一個漸層不是一個可以憑肉眼挑選的漸層色帶。每個階梯的存在是因為某個角色需要它：頁面背景、元件懸停、邊框、實心填色、內文文字。不要產生沒有任何角色使用的階梯。Tailwind 的 50–950 和 Radix 的 1–12 慣例都可以對應到這些角色（palette-structure.md）。
按色相命名原始值，按角色命名語意
原始值命名一個數值（--blue-500），且永遠不會在元件中使用。語意代號命名一個任務（--color-text-secondary），指向一個原始值，並且是元件唯一會引用的層級。
這個界線正是讓主題化成為可能的關鍵。沒有它，深色模式就意味著需要審查每一個用法，以弄清楚哪個是指「強調色」，哪個只是想要藍色（token-naming.md）。
僅在角色內使用代號
永遠不要因為某個代號今天的數值看起來正確就借用它。一個用作文字顏色的分隔線，在邊框變淺之前都還可以，但之後文字也會跟著變淺。如果某個角色沒有對應的代號，請新增該代號。
在漸層中保持色相一致
一個結構良好的漸層由四個屬性定義：
- 階梯遵循一個精心設計的感知亮度進程（palette-generation.md）。
- 色相從頭到尾保持恆定。
- 鮮豔度在漸層中間達到峰值，並在兩端衰減。
- 階梯在淺色端比在深色端分佈得更密集。
兩端都應避免使用純黑色和純白色，因為它們根本無法承載色相。請使用顏色函式庫，而不是憑感覺（palette-generation.md）。
一個顏色，一個意義
在整個介面中為一個顏色賦予單一用途，並將色相相差 15° 以內的任何顏色視為同一種顏色。如果強調色代表「可互動」，那麼靜態文字上的這個色相會告訴使用者點擊某個不可點擊的東西，而一個以中性色渲染的互動元素也會同樣誤導使用者。顏色絕不是意義的唯一載體，這由 hr-better-accessibility 負責。
每個視圖只填滿一個操作
當填滿的顏色用來表示主要強調時，一個主要操作獲得此顏色，而其同級操作保持中性。把顏色放在背景上，而不是標籤上。一個填滿的按鈕在整個房間都能被看出是主要按鈕；而中性按鈕上使用強調色的文字看起來像連結。
當多個有顏色的背景是用於編碼不同的狀態或類別，而非彼此競爭時，這是可以的。
測量實際渲染的配對，然後回報
測量前景色與其實際渲染的背景（而非頁面背景）之間的對比度。當一個配對失敗時，回報該配對、其測量值以及它未達到的閾值，然後不要更改顏色。顏色是設計決策。只有在被要求時才更改它們，更改後重新測量（contrast.md）。
選擇漸層的插值空間
插值空間是一種外觀設定，而非正確性設定。
in oklab是最好的預設值：亮度均勻，沒有色相驚喜。in oklch繞色相環移動，而不是穿過中間，保持鮮豔並橫掃兩個端點之間的所有色相。當一個雙色相漸層在中間變成灰色時，請使用它。- sRGB 預設值 會使中間點變暗並變鈍。這是大多數介面已有的情況，因為這是不指定任何值時得到的結果。
請參閱 color-usage.md。
完成前
| 錯誤 | 修正 |
|---|---|
| 在專案已有代號的地方使用了原始數值 | 使用或新增該角色的代號，並使用專案規定的表示法 |
在十六進位程式碼庫中隨意加入了孤立的 oklch() 值 | 除非遷移計畫已包含在內，否則保持既有的表示法 |
像 --blue-500 這樣的原始值直接在元件中使用 | 建立一個語意代號指向它 |
代號以其外觀命名（--color-blue-button）或首次使用（--color-sidebar-gray） | 以其角色命名：--color-accent-solid、--color-bg-surface |
--color-primary 同時代表品牌色，而 --color-text-primary 代表內文文字 | 保留 accent 給品牌色；讓 primary 表示「其群組中最突出的」 |
| 語意代號用於其角色之外（例如分隔線用作文字） | 為缺失的角色新增代號；永遠不要按數值借用 |
| 通過改變 HSL 亮度來建立的漸層 | 根據感知亮度重建，並保持色相恆定 |
| 漸層在整個範圍內均勻分佈 | 收緊淺色端，直到 50 和 100 看起來像兩個不同的表面 |
| 不同色相使用相同的飽和度數值 | 匹配每個色相自身最大值的比例，而不是原始數值 |
| 狀態色相與強調色相衝突 | 移動它，直到破壞性操作和主要操作並排時可以區分 |
| 深色模式是通過機械地反轉淺色調色板製作的 | 將反轉作為起點，然後降低鮮豔度，加寬深色端，並重新檢查每個配對 |
prefers-color-scheme 設定了一些代號，而 .dark 類別設定了其他一些 | 選擇一種切換機制並始終如一地使用它 |
| 通過改變色相來修正對比度 | 改變亮度，這才是對比度會回應的通道 |
| P3 色域顏色沒有 sRGB 備案 | 先宣告 sRGB 值，然後在 @media (color-gamut: p3) 內部進行覆蓋 |
回報
嚴重性。 HIGH 使內容無法閱讀或賦予了誤導性的語意顏色。MEDIUM 是明顯的主題、代號或色域失敗。LOW 是孤立的打磨問題。
驗證。 沒有瀏覽器：代號值、每個宣告顏色的色域、兩個主題區塊都存在，以及從宣告的代號配對計算出的對比度。有瀏覽器：文字實際渲染的背景，包括透明度及其下方的任何圖像，在淺色和深色模式下都進行測量。失敗的配對會被回報，而不會被重新繪製。回報每個你無法執行的檢查為 Not verified。
格式。 根據每個發現違反的原則進行分組，按嚴重性排序，每個根本原因一行，列出其出現的每個位置：
| 嚴重性 | 位置 | 之前 | 之後 | 原因 |
|---|
位置 是 path/to/file:line。原因 指出違反的原則和使用者影響。
當任何 HIGH 嚴重性問題仍然存在時，回報 Block，否則回報 Approve，並將剩下的問題留在表格中作為待辦事項。永遠不要在未檢查的範圍上 Approve。如果沒有發現任何問題，則陳述「No actionable color findings」並報告驗證結果。