Ferramentas Ferramenta gratuita

Verificador de contraste

Escolha a cor do texto e a do fundo, e eu te digo se a leitura fica boa segundo as diretrizes de acessibilidade WCAG 2.2.

Cores e resultado

Pré-visualização

Texto grande de exemplo

Assim ficaria um parágrafo de texto normal com estas cores. Dá para ler com conforto?

Contraste

5,47:1

Bom: cumpre o nível AA para qualquer texto.

  • Texto normal AA mín. 4,5:1 Cumpre
  • Texto grande AA mín. 3:1 Cumpre
  • Texto normal AAA mín. 7:1 Não cumpre
  • Texto grande AAA mín. 4,5:1 Cumpre
  • Ícones e bordas AA mín. 3:1 Cumpre

O que significam os resultados

  • O contraste mede a diferença de luz entre o texto e o fundo. Vai de 1:1 (a mesma cor) a 21:1 (preto sobre branco).
  • AA é o nível exigido pela maioria das normas de acessibilidade. AAA é mais exigente e é recomendado para textos longos.
  • Texto grande é o de 24 px ou mais, ou de 18,66 px ou mais em negrito. Como é mais fácil de ler, precisa de menos contraste.
  • Ícones e bordas: botões, campos de formulário e ícones precisam de pelo menos 3:1 para se destacarem do fundo.

Uso a fórmula de luminância relativa das WCAG 2.2. A ferramenta não guarda nada: as cores ficam só no endereço da página, assim você pode compartilhar o resultado copiando o link.