如何使用
- 輸入一種已核准的基色,然後選擇您計畫的是淺色還是深色 UI。
- 選擇 AA 或 AAA 目標來設定主要強調色的對比底色。
- 將產生的 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。