# 配色盤 + WCAG 檢查器

> 免費配色盤產生器，內建 WCAG AA/AAA 對比檢查、最接近通過的建議色、CSS variables、Tailwind v4 匯出與 PNG swatch。

- **Category:** 開發者
- **URL:** https://www.teafun.cyou/tools/color-palette-wcag/
- **Privacy:** Runs entirely in your browser — no uploads, no account, no tracking.
- **Also known as:** wcag contrast, color contrast, palette checker, color picker, colour picker, color palette, contrast checker, accessibility contrast
- **Related tools:** [色盲測試](https://www.teafun.cyou/tools/colorblind/), [螢幕刷新率](https://www.teafun.cyou/tools/monitor/), [平面配置工具](https://www.teafun.cyou/tools/floor-plan/)
- **Tags:** Color, Design, Display

## About

在本地檢查對比度、AA/AAA 合規、產生配色盤變體，並匯出 CSS 或 Tailwind v4 色彩 token。

## 如何使用 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× 倍。儘早執行比率計算——在標記定義階段而不是元件構建階段——用算術而不是意見來確定答案。

_SEO title: 配色盤 + WCAG 檢查器 – 免費無障礙配色工具 | TeaFun_

## FAQ

### 最接近通過的建議色是怎麼算出來的？

TeaFun 會盡量保留您原本前景色的 hue 與 saturation，再調整 lightness，直到正文至少達到 WCAG AA。

### Tailwind 匯出是 v4 新格式嗎？

是。匯出內容會使用 `@theme` token 與 `oklch()` 值，你可以直接貼進 Tailwind v4 專案。

### 可以用於客戶專案嗎？

可以。工具完全在瀏覽器中運行，您可以檢查品牌色、匯出 token，並產生 PNG swatch，不必把資料交給第三方服務。