確保所有人都能閱讀您的文字
白底淺灰字、柔和色按鈕上的白字，或是深色背景上的藍色連結，在設計檔中或許看起來很優雅，但對實際使用者來說卻可能難以閱讀。這款色彩對比度檢查工具能測量任何文字與背景顏色之間的對比度，並立即告訴您是否符合網頁內容無障礙指南 (WCAG) 的 AA 與 AAA 等級標準——若不符合，還會為您建議最接近且符合標準的顏色。
功能特色
- 對比度範圍從 1:1 到 21:1。
- WCAG 2 AA 與 AAA 針對一般文字、大型文字及 UI 元件的測試結果。
- 任何色彩格式：HEX、RGB、HSL 或 CSS 顏色名稱。
- 即時預覽標題、內文與小型文字的顯示效果。
- 無障礙色彩建議，並保留您原本的色相。
- 對調按鈕，方便檢查深底淺字的顯示版本。
WCAG 規範一覽
| 內容 | AA | AAA |
|---|---|---|
| 一般文字 | 4.5:1 | 7:1 |
| 大型文字 (≥ 24 px，或 ≥ 19 px 粗體) | 3:1 | 4.5:1 |
| UI 元件與圖形 | 3:1 | — |
| 標誌與裝飾性文字 | 無規範 | 無規範 |
常見色彩組合
| 文字 | 背景 | 對比度 | AA 一般文字 |
|---|---|---|---|
| #000000 | #FFFFFF | 21:1 | 通過 |
| #767676 | #FFFFFF | 4.54:1 | 通過 (能通過的最淺灰色) |
| #999999 | #FFFFFF | 2.85:1 | 未通過 |
| #FFFFFF | #0EA5E9 | 2.77:1 | 未通過 |
| #FFFFFF | #0369A1 | 5.93:1 | 通過 |
相關工具
使用 色碼轉換器 轉換不同的顏色格式，透過 調色盤產生器 建立完整的配色組合，或是使用 圖片選色器 從截圖中擷取精準的顏色。