如何使用
- 輸入基色、token 前綴和 AA 或 AAA 目標。
- 在程式碼交接之前，使用卡片和對比檢查點作為快速視覺門。
- 如果預覽已經穩定，請移至下一步 顏色 token 審核 在匯出之前捕獲重複的角色、弱對比對或幾乎相同的 token。
- 使用 顏色 token 匯出 審核看起來可以接受後，您就可以複製 CSS 變數或 JSON token 了。
切換前預覽 token 化 UI
本頁回答了角色顏色大部分設定後的一個更狹窄的問題：一旦將這些 token 角色放入輕量級 UI 區塊中，它們看起來仍然平衡嗎？
燈光預覽
深色預覽
如何在附近的頁面之間進行選擇
使用 無障礙色票 當角色分配本身仍在變化時。在這些角色基本上可以接受之後使用此頁面，剩下的問題是卡片、按鈕和靜音文字是否仍然感覺平衡。使用 顏色 token 審核 預覽可接受後，下一個工作是在匯出之前檢查重複項、接近匹配項或對比度失敗。使用 顏色 token 差異 審核後，下一個問題是新 token 集與推出前的目前 token 集有何不同。使用 顏色 token 匯出 審核可接受後，下一個工作是複製 CSS 變數、JSON token 或實用程式映射切換。使用 OKLCH轉換器 或 色差 當真正的問題仍然是調整來源顏色而不是檢查 token 化的 UI 結果時。
常見問題解答
這個頁面有什麼作用？
它將一種基色轉換為淺色和深色 token 預覽，以便您可以在匯出 token 之前檢查卡片、按鈕和對比度檢查點。
我什麼時候應該使用它而不是無障礙色票？
當角色分配本身仍在變化時，請使用無障礙色票。在角色基本上可以接受後使用此頁面，剩下的問題是 token 集在 UI 區塊中看起來是否仍然平衡。
我什麼時候應該使用它而不是顏色 token 匯出？
如果您需要視覺確認，請在匯出步驟之前使用此頁面。在預覽可接受後使用顏色 token 匯出，下一個工作是複製 CSS 變數或 JSON token。
這會取代完整的設計審查嗎？
不。它只是一個快速瀏覽器端檢查點，不能取代完整的設計系統審查。