在選擇顏色前，先檢查文字對比度

在調色盤中看起來不錯的綠色，作為小標籤文字時可能難以閱讀。在設計中使用前，請先檢查文字顏色與其背景的搭配。

以下有四種組合，你可以在 色彩工作室 中重現。第三種使用的綠色與第二種完全相同，只有背景不同。

背景改變可能讓原本通過的組合變成不合格

樣本 2 和 4 通過 WCAG AA 一般文字的對比度門檻。樣本 1 和 3 則未通過。此處顯示的數字為四捨五入後的結果，檢查時使用完整的計算值。

將白色改為米色，導致樣本 2 不合格。樣本 4 中加深綠色，使其回到門檻以上。這組配色只是範例，你可以換成自己專案中的顏色。下載它們的 CSS，在自己的版面中試試。

也要檢查文字大小

WCAG 的文字對比指引 規定，AA 等級的一般文字最小對比度為 4.5:1。大型文字的門檻較低，為 3:1。「大型」指的是一般文字至少 24 CSS 像素，或粗體文字約 18.67 CSS 像素。

這個區別對標題下方的小標籤很重要。一個顏色組合可能通過標題的檢查，但對標籤卻不合格。請以實際顯示的大小來判斷每一項，包括社群圖片在動態中縮小時的情況。

不要將不合格的數值四捨五入成通過。4.499:1 的結果仍然低於 4.5:1。

在工具中試試這四種組合

1. 開啟色彩工作室，選擇 對比。
2. 在 文字顏色 和 背景顏色 中輸入第一組顏色。
3. 查看 一般文字 AA，然後比較 大型文字 AA。
4. 對其他組合重複操作。對於樣本 2 和 3，只更改背景，看看為什麼兩個數值都很重要。
5. 將你選擇的組合放入實際設計中，以最終大小閱讀。檢查較小的標籤和連結，而不只是大型的範例標題。

在手機上，預覽和設定會依序顯示。檢查使用的數值與桌面版相同。

純色只是起點

檢查器比較兩種不透明、純色的顏色。它不會檢查照片或漸層上文字背後的每個像素，也不會考慮半透明覆蓋層的影響。請檢查文字下方最亮和最暗的區域，或為文字加上一個顏色可測試的實色面板。

如果你提供淺色和深色主題，請在兩種主題下都試試設計。在白色卡片上通過，並不代表在深色選單上同樣通過。細字體可能比對比度數值顯示的更難閱讀，因此請在最低門檻之上保留一些餘裕，而不是追求最接近的通過值。

我們檢查了什麼

在 2026 年 10 月 5 日，我們使用與色彩工作室相同的對比函數，檢查了所有四種組合。結果檔案 記錄了確切的對比度和 AA 判定。可下載的 CSS 和插圖使用相同的顏色數值。

這檢查的是文字對比度，而非整個頁面的無障礙性。它不評估鍵盤操作、標籤、閱讀順序，或使用者是否能理解你的內容。