♀

WCAG 對比檢查

測試多組文字/背景顏色配對是否符合 WCAG 2.1 AA 與 AAA 標準。即時預覽可精確顯示文字在不同大小與字重下的外觀。

設計工具 本機執行 不會傳送任何資料
WCAG無障礙對比度a11y
匯出顏色配對 

    

      
      
    

  


  


  


  

    💡
    

      WCAG AA 一般文字需達 4.5:1，大型文字（18pt 或 14pt 粗體）需達 3:1。 WCAG AAA 一般文字需達 7:1，大型文字需達 4.5:1。以 AA 為目標是多數無障礙法規的法定最低要求。
    

  


  



  

    
什麼是 WCAG AA 對比檢測？

    
檢查色彩對比比率是否符合 WCAG AA 與 AAA 標準。一次測試多組文字/背景顏色配對。免費、瀏覽器端執行，不會傳送資料。

  


  

    
如何使用 WCAG 對比檢測

    
    
      
  1. 使用色彩選擇器或輸入 HEX 值來設定前景（文字）色彩與背景色彩。
    2. 
      
  2. 此工具會立即計算兩色之間的對比度。
    3. 
      
  3. 查看一般文字與大型文字的 AA 和 AAA 通過/未通過結果。
    4. 
      
  4. 調整色彩，直到您的組合符合所需的 WCAG 等級。
    5. 
      
  5. 複製通過的色彩值，供您的 CSS 使用。
    6. 
    

  






  
相關工具

  

    👁️
色盲模擬器
在任何圖片上模擬紅色盲、綠色盲、藍色盲

    🎨
顏色選擇器
在 HEX、RGB、HSL 與 CMYK 之間轉換顏色

    🎨
配色盤產生器
產生互補色、類似色與三色配色調色盤

  






  
    了解 WCAG AA 對比
    ▾
  
  

    

      範例
      

        

          

            輸入
            前景 #1F2937 搭配背景 #FFFFFF
          

          

            輸出
            符合一般文字與大型文字的 WCAG AA 標準
          

        

      

    

    

      常見使用情境
      

        
    
          
  • 上線前檢查文字色彩是否符合 WCAG AA
    • 
          
  • 檢視設計系統 token 的無障礙回歸問題
    • 
          
  • 分別驗證標題與內文文字的對比
    • 
          
  • 將符合規範的色彩配對交付給產品團隊
    • 
        

      

    

    

      常見問題
      

        
AA 與 AAA 有什麼差異？
AA 是大多數法規要求的標準合規等級。AAA 是增強等級——並非所有內容都必須符合，但可提升可讀性。

        
這會檢查非文字對比嗎？
WCAG 1.4.11 要求 UI 元件與圖形元素達到 3:1 對比——此檢查工具涵蓋該要求。

        
WCAG 對比檢查 - 批次 AA/AAA 測試是做什麼的？
WCAG 對比檢查 - 批次 AA/AAA 測試完全在瀏覽器中執行，協助您完成此任務，且無需將資料上傳至伺服器。

        
WCAG 對比檢查 - 批次 AA/AAA 測試可免費使用嗎？
可以。此工具可免費使用，且無需註冊。