配色盤 + WCAG 檢查器
在本地檢查對比度、AA/AAA 合規、產生配色盤變體，並匯出 CSS 或 Tailwind v4 色彩 token。
前景色
背景色
主色轉換結果
#1A73E8rgb(26, 115, 232)hsl(214 82% 51%)oklch(0.574 0.195 257.9)產生的配色盤
CSS 變數
:root {
--color-primary: #1A73E8;
--color-background: #FFFFFF;
--color-accessible: #1A73E8;
--color-complementary: #E88F1A;
--color-analogous-left: #1ADAE8;
--color-analogous-right: #281AE8;
--color-shade: #0F4A97;
--color-tint: #6DA6F0;
}Tailwind v4 主題
@theme {
--color-primary: oklch(0.574 0.195 257.9);
--color-background: oklch(1.000 0.000 89.9);
--color-accessible: oklch(0.574 0.195 257.9);
--color-complementary: oklch(0.727 0.156 65.4);
--color-analogous-left: oklch(0.811 0.135 203.2);
--color-analogous-right: oklch(0.443 0.276 269.2);
--color-shade: oklch(0.421 0.139 257.6);
--color-tint: oklch(0.717 0.124 255.4);
}什麼是 WCAG 色彩對比度檢查器？
色彩調色盤 + WCAG 檢查器根據 Web 內容無障礙指南（WCAG 2.1）的對比度要求評估前景-背景色彩組合。它報告確切的對比度比率、AA 和 AAA 合規在內文和大型文字大小下的通過/不通過狀態，並在你的色彩組合不合格時建議最接近的通過顏色。除了對比度檢查，工具還從你的主色生成完整的色彩調色盤——互補色、類似色、明度和色調變體——並以 CSS 自訂屬性或 Tailwind v4 @theme Token（使用 oklch() 值）匯出。你也可以下載 PNG 色票表用於設計交接。所有計算在本地執行，不涉及第三方服務。
如何使用 WCAG 色彩檢查器
輸入前景和背景顏色的 HEX 值（例如 #1A73E8 配 #FFFFFF）。檢查器立即顯示對比度比率和 WCAG AA 內文（4.5:1）、AAA 內文（7:1）和 AA 大型文字（3:1）的通過/不通過徽章。如果組合不合格，工具建議保留原始色相和飽和度的最接近通過前景色。點擊「使用建議顏色」套用。在檢查器下方，瀏覽生成的調色盤變體、複製 CSS 變數或 Tailwind v4 主題 Token，並下載 PNG 色票以便與設計師分享。
為什麼 WCAG 色彩對比度合規很重要
WCAG 2.1 對比度要求不是可選的指導方針——在許多司法管轄區，它們是 ADA（美國）、EAA（歐盟）和 EN 301 549（歐洲）下的法律要求。未能達到 AA 對比度比率意味著部分使用者在物理上無法閱讀你的文字，且使你的組織面臨無障礙訴訟風險。從一開始就在設計系統中納入 WCAG 合規能避免昂貴的事後修改。在設計 Token 階段——組件建構之前——檢查對比度，比稽核已上線產品便宜得多。直接以 CSS 變數或 Tailwind v4 @theme 值匯出合規 Token 能彌合設計意圖和正式程式碼之間的差距。
常見問題
最接近通過的建議色是怎麼算出來的？
TeaFun 會盡量保留您原本前景色的 hue 與 saturation，再調整 lightness，直到正文至少達到 WCAG AA。
Tailwind 匯出是 v4 新格式嗎？
是。匯出內容會使用 `@theme` token 與 `oklch()` 值，你可以直接貼進 Tailwind v4 專案。
可以用於客戶專案嗎？
可以。工具完全在瀏覽器中運行，您可以檢查品牌色、匯出 token，並產生 PNG swatch，不必把資料交給第三方服務。
瀏覽相同標籤
前往其他擁有相同工作流程、格式或用途的工具。