顏色對比度檢查器
檢查顏色對比度是否符合 WCAG 2.1 標準。即時驗證文字和 UI 元素的 AA 和 AAA 級別。
什麼是 WCAG 對比度？
WCAG 對比度衡量前景色和背景色之間的亮度差異。範圍從 1:1 到 21:1。比率越高，視力障礙用戶的可讀性越好。
WCAG AA 和 AAA 的要求是什麼？
WCAG AA 要求普通文字最低對比度為 4.5:1，大文字為 3:1。WCAG AAA 要求普通文字 7:1，大文字 4.5:1。
什麼算作大文字？
大文字定義為 18pt（24px）或更大，或 14pt（18.66px）粗體或更大。大文字的對比度要求較低。
為什麼顏色對比度很重要？
適當的顏色對比度確保文字對視力障礙者可讀，也改善了各種光照條件和不同設備上的可讀性。
如何計算對比度比率？
對比度比率使用前景色和背景色的相對亮度值計算。公式為 (L1 + 0.05) / (L2 + 0.05)。
UI 元素的最低對比度要求是什麼？
WCAG 要求 UI 組件和圖形對象的最低對比度為 3:1。這確保按鈕、圖標和其他界面元素可見且可用。
我可以使用任何顏色組合嗎？
並非所有顏色組合都符合無障礙標準。使用此檢查器驗證您的顏色選擇是否符合 WCAG 要求。
什麼是相對亮度？
相對亮度是顏色的感知亮度，範圍從 0（黑色）到 1（白色）。它使用 sRGB 色彩空間計算。
我需要檢查圖片的對比度嗎？
圖片中的文字必須滿足與常規文字相同的對比度要求。對於裝飾性圖片，不適用對比度要求。
哪些工具有助於顏色對比？
使用瀏覽器開發者工具、設計軟件插件或在線檢查器。許多工具可以自動計算對比度比率。
如何使用顏色對比度檢查器
在瀏覽器本機即時核對文字與介面配色是否符合 WCAG 2.1 的 AA、AAA 對比門檻。填入兩個顏色即可算出比值，資料不離開裝置。
- 在 Foreground Color 輸入框中鍵入或貼上文字顏色，支援 HEX、RGB 等各種受支援格式。
- 在 Background Color 輸入框填入文字背後的底色，即可算出對比比值。
- 查看得出的比值，以及一般字級與大字級對應的 AA、AAA 達標徽章。
- 微調任一顏色，直到比值達到內文 4.5:1 或大字級與 UI 元件 3:1 以上。
- 交換 Foreground Color 與 Background Color 的值，測試相反搭配，例如深色主題上的淺色文字。
長篇閱讀建議衝 AAA（7:1），但 4.5:1（AA）才是大多數無障礙準則的底線。
相關工具
- 顏色選擇器 使用瀏覽器吸管從螢幕任意位置取色，即時複製HEX、RGB、HSL顏色代碼。免費線上取色工具。
- 配色方案產生器 使用免費線上產生器即時建立美麗和諧的配色方案。支援單色、類似色、互補色、三色、分裂互補和四色模式。透過HSL滑桿微調顏色，鎖定喜歡的顏色，匯出為CSS變數、Tailwind設定、JSON或SVG格式。100%瀏覽器運行，資料永不離開您的裝置。
- 色盲模擬器 免費線上色盲模擬器。檢測設計在紅色盲、綠色盲、藍色盲等色覺缺陷下的效果。100%隱私保護，瀏覽器本地運行。
- GIF拆幀工具 從GIF動畫中提取並下載單幀為PNG或精靈圖。免費線上工具，支援預覽和ZIP匯出。
- GIF倒放 線上免費將GIF動畫倒序播放。上傳、預覽並即時下載倒放的GIF檔案。
- GIF變速工具 線上變更GIF動畫速度。即時加速或減速GIF檔案。
- 影片轉GIF 線上將影片轉換為動畫GIF，直接在瀏覽器中調整品質、幀率和解析度，無需上傳檔案。
- 梗圖製作 免費線上梗圖製作工具。為任意圖片加上經典頂部/底部梗圖文字，直接拖曳排版，立即下載 PNG 或 JPEG 梗圖。