配色盤 + WCAG 檢查器
在本地檢查對比度、AA/AAA 合規、產生配色盤變體，並匯出 CSS 或 Tailwind v4 色彩 token。
前景色
背景色
主色轉換結果
#1A73E8rgb(26, 115, 232)hsl(214 82% 51%)oklch(0.574 0.195 257.9)產生的配色盤
CSS 變數
:root {
}Tailwind v4 主題
@theme {
}你剛測試了配色盤 + WCAG 檢查器 — 試試 色盲測試 →
什麼是 WCAG 色彩對比度檢查器？
色彩調色盤加 WCAG 檢查器計算兩個 sRGB 色彩之間的相對亮度對比度，並將其對標網頁內容無障礙指南（WCAG）。公式固定：將每個通道從 sRGB 線性化為線性光（L = R*0.2126 + G*0.7152 + B*0.0722，先解碼 gamma），然後計算 (L_lighter + 0.05) / (L_darker + 0.05)。結果是對比度，範圍從 1.0（完全相同的色彩）到 21.0（純黑配純白）。WCAG 2.1 設定了三個閾值：正文（AA）為 4.5:1、大文字 ≥18pt 或 14pt 粗體（AA）為 3:1，以及更嚴格的 AAA 等級為 7:1 / 4.5:1。WCAG 2.2（2023 年 10 月發佈）新增了一項 3:1 規則，用於 UI 元件和焦點可見輪廓，這在 2.1 中不存在。除了評級外，該工具還從單一色彩種子在 OKLCH 空間中產生協調的色板——互補色、類似色、陰影、淺色——並將結果匯出為 CSS 自訂屬性或 Tailwind v4 @theme 標記。PNG 色卡隨附以供設計交接。
如何使用 WCAG 色彩檢查器
輸入前景和背景色為 HEX 格式（#1A73E8 加上 #FFFFFF），對比度和通過/失敗徽章會立即出現，顯示 AA 正常（4.5:1）、AAA 正常（7:1）、AA 大型（3:1）和 AA UI（3:1，WCAG 2.2）。當色對失敗時，建議工具沿著 OKLCH 亮度軸向前景色進行調整，使其變深或變淺，同時保留色調和彩度，讓品牌色彩身分保持不變。按一下「使用建議色彩」以套用。典型的測試失敗：白色文字配純黃色 #ffff00（#ffffff 前景）——對比度僅為 1.07:1，遠低於 3:1，儘管在視覺上看起來「高對比」。黑色配黃色為 19.55:1，深度通過。檢查器下方，色板面板顯示從您的輸入產生的互補色和類似色變體。複製 CSS 變數、複製 Tailwind 4 主題標記，或下載 PNG 色卡。
為什麼 WCAG 色彩對比度合規很重要
WCAG 對比度合規性在美國是 ADA 項下的強制法律規定，歐盟內 2025 年 6 月起生效的歐洲無障礙法 (EAA) 涵蓋銷往歐盟的產品和服務，公共部門採購則受 EN 301 549 約束。EAA 罰款根據司法管轄區最高可達 €30 000 至 €500 000。除了法律風險外，4.5:1 閾值約當視力為 20/40 的人舒適閱讀正文所需的對比度——這不是邊界性障礙，這是年逾 40 歲經歷晶狀體自然黃變的大多數讀者。從一開始就設計符合規範的標記可避免透過每個元件執行品牌色彩熱修復的改造成本。常見的陷阱是用眼睛判斷對比度：品牌粉紅色和淺綠松石色對設計師來說「看起來易讀」（視力 20/20，在工作室照明下），但在日光燈辦公室照明下卻達不到標準的 2× 倍。儘早執行比率計算——在標記定義階段而不是元件構建階段——用算術而不是意見來確定答案。
常見問題
最接近通過的建議色是怎麼算出來的？
TeaFun 會盡量保留您原本前景色的 hue 與 saturation，再調整 lightness，直到正文至少達到 WCAG AA。
Tailwind 匯出是 v4 新格式嗎？
是。匯出內容會使用 `@theme` token 與 `oklch()` 值，你可以直接貼進 Tailwind v4 專案。
可以用於客戶專案嗎？
可以。工具完全在瀏覽器中運行，您可以檢查品牌色、匯出 token，並產生 PNG swatch，不必把資料交給第三方服務。
把這個工具放進更大的流程裡
這些集合會把常見的後續工具與指南整理成同一條工作路徑。
瀏覽相同標籤
前往其他擁有相同工作流程、格式或用途的工具。