顏色權杖預覽

轉一 權杖就緒基底色 在將 CSS 變數或 JSON 匯出到程式碼之前,先進行淺色和深色元件預覽。

此頁面位於「可存取的色票」和「顏色權杖匯出」之間。它用於視覺簽核,而不是用於選擇第一個候選色票。

其他語言 日本語 | English | 繁體中文

如何使用

  1. 輸入基色、權杖前綴和 AA 或 AAA 目標。
  2. 在程式碼交接之前,使用卡片和對比檢查點作為快速視覺門。
  3. 如果預覽已經穩定,請移至下一步 顏色權杖審核 在匯出之前捕獲重複的角色、弱對比對或幾乎相同的權杖。
  4. 使用 顏色權杖匯出 審核看起來可以接受後,您就可以複製 CSS 變數或 JSON 權杖了。

切換前預覽權杖化 UI

本頁回答了角色顏色大部分設定後的一個更狹窄的問題:一旦將這些權杖角色放入輕量級 UI 區塊中,它們看起來仍然平衡嗎?

在權杖角色基本上可以接受後建立預覽。

燈光預覽
    深色預覽

      如何在附近的頁面之間進行選擇

      使用 無障礙色票 當角色分配本身仍在變化時。在這些角色基本上可以接受之後使用此頁面,剩下的問題是卡片、按鈕和靜音文字是否仍然感覺平衡。使用 顏色權杖審核 預覽可接受後,下一個工作是在匯出之前檢查重複項、接近匹配項或對比度失敗。使用 顏色權杖差異 審核後,下一個問題是新權杖集與推出前的當前權杖集有何不同。使用 顏色權杖匯出 審核可接受後,下一個工作是複製 CSS 變數、JSON 權杖或實用程式映射切換。使用 OKLCH轉換器色差 當真正的問題仍然是調整來源顏色而不是檢查權杖化的 UI 結果時。

      常見問題解答

      這個頁面有什麼作用?

      它將一種基色轉換為淺色和深色權杖預覽,以便您可以在匯出權杖之前檢查卡片、按鈕和對比度檢查點。

      我什麼時候應該使用它而不是無障礙色票?

      當角色分配本身仍在變化時,請使用可訪問的色票。在角色基本上可以接受後使用此頁面,剩下的問題是權杖集在 UI 區塊中看起來是否仍然平衡。

      我什麼時候應該使用它而不是顏色權杖匯出?

      如果您需要視覺簽核,請在匯出步驟之前使用此頁面。在預覽可接受後使用顏色權杖匯出,下一個工作是複製 CSS 變數或 JSON 權杖。

      這會取代完整的設計審查嗎?

      不。它只是一個快速瀏覽器端檢查點,不能取代完整的設計系統審查。