♀

verificador contraste WCAG

Teste vários pares de cores de texto/fundo conforme os padrões WCAG 2.1 AA e AAA. A prévia ao vivo mostra exatamente como o texto ficará em diferentes tamanhos e pesos.

Ferramentas de design Executa localmente Nenhum dado enviado
WCAGacessibilidadetaxa de contrastea11y
Exportar pares de cores 

    

      
      
    

  


  


  


  

    💡
    

      WCAG AA exige 4.5:1 para texto normal e 3:1 para texto grande (18pt ou 14pt em negrito). WCAG AAA exige 7:1 para texto normal e 4,5:1 para texto grande. Buscar AA é o mínimo legal na maioria das regulamentações de acessibilidade.
    

  


  



  

    
O que é o verificador contraste WCAG AA?

    
Verifique as taxas de contraste de cor em relação aos padrões WCAG AA e AAA. Teste vários pares de cor de texto/fundo de uma vez. Grátis, baseado no navegador, sem envio de dados.

  


  

    
Como usar o verificador contraste WCAG

    
    
      
  1. Insira uma cor de primeiro plano (texto) e uma cor de fundo usando os seletores de cor ou digitando valores HEX.
    2. 
      
  2. A ferramenta calcula instantaneamente a taxa de contraste entre as duas cores.
    3. 
      
  3. Verifique os resultados de aprovação/reprovação AA e AAA para texto normal e texto grande.
    4. 
      
  4. Ajuste as cores até que sua combinação atenda ao nível WCAG necessário.
    5. 
      
  5. Copie os valores de cor aprovados para usar no seu CSS.
    6. 
    

  






  
Ferramentas relacionadas

  

    👁️
simulador daltonismo
Simule protanopia, deuteranopia e tritanopia em qualquer imagem

    🎨
seletor de cor
Converta cores entre HEX, RGB, HSL e CMYK

    🎨
gerador paleta cores
Gere paletas de cores complementares, análogas e triádicas

  






  
    Entenda o contraste WCAG AA
    ▾
  
  

    

      Exemplo
      

        

          

            Entrada
            Primeiro plano #1F2937 sobre fundo #FFFFFF
          

          

            Saída
            Passa no WCAG AA para texto normal e texto grande
          

        

      

    

    

      Casos de uso comuns
      

        
    
          
  • Verifique as cores do texto em relação ao WCAG AA antes do lançamento
    • 
          
  • Revise regressões de acessibilidade nos tokens do design system
    • 
          
  • Verifique separadamente o contraste de títulos e de texto corrido
    • 
          
  • Entregue pares de cores em conformidade às equipes de produto
    • 
        

      

    

    

      Perguntas frequentes
      

        
Qual é a diferença entre AA e AAA?
AA é o nível de conformidade padrão exigido pela maioria das regulamentações. AAA é aprimorado —não é exigido para todo o conteúdo, mas melhora a legibilidade.

        
Isto verifica o contraste de elementos não textuais?
A WCAG 1.4.11 exige contraste de 3:1 para componentes de UI e elementos gráficos —este verificador cobre esse requisito.

        
O que faz o verificador contraste WCAG - Batch AA/AAA Test?
O verificador contraste WCAG - Batch AA/AAA Test funciona inteiramente no seu navegador e ajuda você a concluir esta tarefa sem enviar dados para um servidor.

        
O verificador contraste WCAG - Batch AA/AAA Test é gratuito?
Sim. Esta ferramenta é gratuita e não exige cadastro.