易於訪問的色票生成器

開始於 一種認可的品牌或強調色,然後在最終 UI 審查之前為表面、文字、重音和按鈕文字建立基於角色的色票。

此頁面用於無障礙 UI 規劃。在對比度檢查器中進行最終的逐對檢查之前使用它。

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

如何使用

  1. 輸入一種核准的基色,然後選擇您計劃的是淺色還是深色 UI。
  2. 選擇 AA 或 AAA 目標來設定主要口音的對比底色。
  3. 將產生的 CSS 變數複製到原型或權杖註解中,然後完成 對比檢查器 關於確切的最終配對。

從單對檢查轉變為基於角色的可訪問色票規劃

此頁面位於色票、CSS 顏色混合和對比度檢查器之間。它回答了一個更狹隘的問題:如果一種基色已經獲得批准,哪些起始 UI 角色仍然看起來連貫且具有對比?

在你的基色獲得批准後,建立基於角色的色票。

CSS 變數
:root {
  --surface: #ffffff;
  --surface-alt: #f4f7fd;
  --text: #111827;
  --text-muted: #475569;
  --accent: #1d4ed8;
  --accent-text: #ffffff;
  --border-color: #b3c1dd;
}

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

使用 調色盤 當工作仍然是圍繞著一個樣本進行廣泛的視覺探索。使用 色彩和諧 當下一個問題是色調關係。使用 CSS 顏色混合 當兩種批准的顏色已經存在並且下一個工作是發送混合表達式。當一種基色獲得批准並且剩下的工作是分配連貫的 UI 角色並考慮到對比度時,請使用此頁面。移至 顏色權杖匯出 當這些角色已經可以接受時,下一步是將它們打包為程式碼。完成與 對比檢查器 一旦精確的文字/背景對被鎖定。

常見問題解答

這個頁面會產生什麼?

它從一種經批准的基色生成基於角色的入門色票,包括表面、文字、靜音文字、重音、重音文字以及用於淺色或深色 UI 規劃的邊框顏色。

我什麼時候應該使用它來代替對比檢查器?

當已選擇兩種確切的顏色並且您只需要最終通過或失敗判定時,請使用對比度檢查器。當一種基色獲得批准但周圍的 UI 角色仍然需要可訪問性優先的起始色票時,請儘早使用此頁面。

我什麼時候應該使用它而不是色票生成器?

使用色票生成器圍繞一個樣本進行更廣泛的視覺探索。當下一步是指派實際的 UI 角色(例如表面、文字、重音和按鈕文字)並考慮對比度時,請使用此頁面。

共用 URL 中儲存了什麼?

共用 URL 儲存基色、淺色或深色模式以及目標是 AA 還是 AAA。