設定背景色
輸入 3 或 6 位十六進位色碼，# 可省略，例如 #FFF 或 #1E3A8A。僅支援 sRGB 純色。
大型文字指一般字重至少 24 CSS px，或粗體至少 18⅔ CSS px。大型文字預覽使用 24 px。
建議文字顏色
產生配色後，即可查看適合這個背景的文字顏色。
從黑、白、灰階及彩色的固定色盤篩選，只顯示符合門檻的顏色，並未涵蓋所有 RGB 顏色。提高門檻可能減少結果。修改背景或門檻會清除先前結果。
顯示的對比度四捨五入至小數點後兩位。使用 WCAG 2 的 sRGB 公式，判定門檻時不四捨五入。結果僅評估這組純色的文字對比度；字型、透明度、圖片、漸層及頁面其他部分仍需另外檢查。
如何找出易讀的文字配色
- 輸入純色背景的 HEX 色碼，或使用選色器。
- 選擇一般文字 AA（4.5:1）、一般文字 AAA（7:1）或大型文字 AA（3:1），再產生配色。
- 輸入想預覽的文字，比較建議顏色與對比度，然後複製 HEX 色碼或文字與背景的 CSS 宣告。
網站設計配色範例
- 以 #FFFFFF 為背景，挑選適合企業網站或結帳表單的深色文字。
- 以 #1E3A8A 為背景，尋找導覽列或儀表板標題區的淺色文字。
- 以 #777777 搭配 7:1 門檻，了解為何部分中間色調背景無法達到一般文字 AAA 對比度。
常見問題
與顏色對比度檢查器有什麼不同？
這個產生器只需要一個背景色，就會建議符合所選門檻的文字顏色。對比度檢查器則是檢查你已選好的文字與背景色組合。
為什麼 AAA 可能沒有結果？
部分中間色調背景搭配任何文字顏色，都無法達到 7:1。黑色與白色是最暗和最亮的端點，若兩者都不符合，就沒有不透明 sRGB 文字顏色能達到該門檻。可嘗試更換背景。
一般內文可以使用 3:1 嗎？
不行。一般文字的 AA 門檻是 4.5:1。3:1 適用於大型文字，也就是一般字重至少 18 pt（24 CSS px），或粗體至少 14 pt（18⅔ CSS px）。
配色通過是否代表整個網站符合無障礙規範？
不是。此計算只涵蓋不透明 sRGB 純色組合的文字對比度。仍須另外檢查實際字型、焦點狀態、內容、鍵盤操作、圖片及其他無障礙要求。
顏色或預覽文字會被上傳嗎？
計算與預覽都在瀏覽器分頁內執行。此工具不會儲存你的顏色或預覽文字，也不會將其放入分析事件。複製功能只會將你要求的 HEX 或 CSS 寫入剪貼簿。
背景色、預覽文字與結果都保留在此瀏覽器分頁內。工具不會儲存這些資料，也不會將其放入分析事件。需要保留時，請複製 HEX 色碼或 CSS。
覺得這個工具好用嗎？分享給你的團隊一起加快流程。
如果覺得不錯，按 支持；需要改進也可以按 ，我們會優先調整。