♀

WCAG对比度检测

对照 WCAG 2.1 AA 和 AAA 标准测试多组文本/背景颜色对。实时预览可准确展示文本在不同字号和字重下的显示效果。

设计工具 本地运行 不发送数据
WCAG无障碍对比度无障碍
导出颜色对 

    

      
      
    

  


  


  


  

    💡
    

      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 检查文本颜色
    • 
          
  • 审查设计系统令牌中的无障碍回归问题
    • 
          
  • 分别验证标题和正文文本的对比度
    • 
          
  • 将符合规范的颜色对交付给产品团队
    • 
        

      

    

    

      常见问题
      

        
AA 和 AAA 有什么区别？
AA 是大多数法规要求的标准合规级别。AAA 是增强级别——并非所有内容都要求，但可提升可读性。

        
这会检查非文本对比度吗？
WCAG 1.4.11 要求 UI 组件和图形元素的对比度达到 3:1——此检查器涵盖该要求。

        
WCAG对比度检测 - 批量 AA/AAA 测试是做什么的？
WCAG对比度检测 - 批量 AA/AAA 测试完全在浏览器中运行，帮助您完成此任务，无需将数据上传到服务器。

        
WCAG对比度检测 - 批量 AA/AAA 测试可以免费使用吗？
是的。此工具可免费使用，无需注册。