如何使用
- 輸入一種核准的基色,然後選擇您計劃的是淺色還是深色 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。