PortuguêsPT

Verificador de contraste de cores (WCAG)

Escolha uma cor de texto e uma cor de fundo para ver na hora a taxa de contraste e os resultados de acessibilidade.

Seus textos e arquivos não saem do navegador: nada é enviado para nenhum servidor.

Taxa de contraste-
  • Texto normal AA (4,5:1)-
  • Texto normal AAA (7:1)-
  • Texto grande AA (3:1)-
  • Texto grande AAA (4,5:1)-
  • Componentes de interface e gráficos AA (3:1)-

Texto grande é aquele com pelo menos 24 px, ou cerca de 18,7 px em negrito.

Prévia

Assim fica um título grande

O texto corrido precisa de pelo menos 4,5:1 para ser lido com conforto. Teste também em uma tela pequena ou sob luz forte.

Texto de ajuda pequeno · 13 px

BotãoCampo de texto
Cores sugeridas que passam
Mudar a cor do texto para -
Mudar o fundo para -

Como usar

  1. Escolha a cor do texto e a cor de fundo nas caixas de cor ou digite códigos como #fff ou rgb(…). Cores semitransparentes são misturadas primeiro com o fundo.
  2. Você vê a taxa de contraste e se passa ou não no nível AA para texto normal (4,5:1), texto grande (3:1) e componentes de interface (3:1), além dos níveis AAA, mais rígidos.
  3. Se algum teste não passar, “Cores sugeridas que passam” mostra a cor mais próxima com o mesmo matiz, mudando só a luminosidade. Clique em “Aplicar” para usá-la.
  4. As duas cores ficam salvas no endereço da página, então você pode copiar o link para compartilhar com a equipe.

Perguntas frequentes

O que significam AA e AAA?

São níveis de conformidade das Diretrizes de Acessibilidade para Conteúdo Web (WCAG). Texto normal precisa de 4,5:1 para AA e 7:1 para AAA. O AA é o nível que a maioria das leis e normas cita; no Brasil, o eMAG, modelo de acessibilidade do governo federal, também se baseia nas WCAG.

Como a taxa de contraste é calculada?

A ferramenta calcula a luminância relativa das duas cores e divide (a mais clara + 0,05) por (a mais escura + 0,05). Cores iguais dão 1:1 e preto no branco dá 21:1. O valor é truncado, não arredondado, para que um número logo abaixo do limite nunca pareça aprovado.

Quando vale a regra dos componentes de interface?

Elementos que não são texto, como bordas de botões, contornos de campos e ícones, precisam de pelo menos 3:1 em relação às cores ao lado (WCAG 1.4.11).

Ferramentas relacionadas

Seletor de coresHEX, RGB, HSL e CMYK em um só lugarPaleta para Tailwind CSSDe uma cor a uma escala de 50 a 950Conta-gotas de imagemPegue cores e uma paleta da fotoArte ASCIITexto e fotos feitos com caracteres

Todas as ferramentas