無障礙色票產生器

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

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

其他語言 日本語 | English | 繁體中文 | 繁體中文(香港) | Italiano

如何使用

  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。