Ferramenta gratuita: Acessibilidade
Verificador de contraste de cores
Compare aqui mesmo uma cor de texto com uma cor de fundo segundo a WCAG 2.2, ou digite o endereço de uma página para encontrar todos os textos abaixo do contraste mínimo, com as cores medidas e a cor mais próxima que é aprovada.
Calculadora de contraste
Digite uma cor de texto e uma cor de fundo. Tudo é calculado no seu navegador.
O texto normal em 16 pixels fica assim.
Texto grande em 24 pixels
O contorno de um botãoRazão de contraste4.54:1
| Texto normal, AAWCAG 1.4.3, exige 4.5:1 | Aprovado |
|---|---|
| Texto grande, AAWCAG 1.4.3, exige 3:1 | Aprovado |
| Texto normal, AAAWCAG 1.4.6, exige 7:1 | Reprovado |
| Texto grande, AAAWCAG 1.4.6, exige 4.5:1 | Aprovado |
| Ícones, bordas e campos de formulárioWCAG 1.4.11, exige 3:1 | Aprovado |
As cores de texto mais próximas aprovadas sobre este fundo
Texto grande é o que tem pelo menos 24 pixels, ou 18,66 pixels em negrito. As razões são arredondadas para baixo, então 4.499:1 aparece como 4.49:1 e é reprovado, como a WCAG pretende.
Ou analise uma página em busca de texto com baixo contraste
Grátis. Verifica o endereço que você digitar em cerca de 20 segundos.
O que esta ferramenta verifica
A razão WCAG de quaisquer duas cores
A calculadora usa a fórmula de luminância relativa das definições da WCAG 2.2 e mostra o resultado para texto normal, texto grande e componentes de interface, nos níveis AA e AAA. Ela roda no seu navegador.
Uma cor aprovada, já calculada
Quando um par é reprovado, ela encontra a cor de texto mais próxima, no mesmo matiz, que atinge 4.5:1 ou 7:1, para você mudar o mínimo possível do seu design.
Todo texto com baixo contraste em uma página
A análise da página executa a regra color-contrast do axe-core em um navegador Chrome real e lista cada elemento reprovado com a cor do texto, a cor de fundo, o tamanho da fonte e a razão.
Agrupado por par de cores
As falhas são agrupadas por cor de texto e de fundo, porque uma única mudança em uma cor do tema costuma corrigir todos os elementos que a usam.
O limite certo para texto grande
Texto com pelo menos 24 pixels, ou 18,66 pixels em negrito, precisa de 3:1 em vez de 4.5:1. A análise aplica a cada elemento o limite certo com base no tamanho e no peso calculados.
O que não foi possível medir, e por quê
Texto sobre imagens, degradês ou elementos sobrepostos aparece separado, com o motivo, para você saber exatamente o que verificar visualmente.
O que ela não consegue verificar
- Medir texto sobre fotos, degradês ou vídeo. Um software não tem como saber qual parte de uma imagem fica atrás de cada letra, então esses casos são listados para você verificar.
- Verificar os estados de hover, foco e outros. A análise vê a página como ela carrega; verifique essas cores com a calculadora.
- Analisar ícones, bordas e campos de formulário da página segundo o critério 1.4.11 da WCAG. A calculadora mostra o resultado de 3:1 para qualquer par que você digitar.
- Ler texto que faz parte de uma imagem, como um banner com as palavras embutidas na arte.
- Testar mais do que a página que você digitar. A análise gratuita completa testa até cinco páginas-chave.
Por que isso importa
Baixo contraste é a falha de acessibilidade mais comum da web. A análise da WebAIM de 2026 com o top 1 milhão de páginas iniciais encontrou texto com baixo contraste em 83,9% delas, com uma média de 34 ocorrências por página.
Texto apagado é difícil de ler para pessoas com baixa visão ou com alterações na percepção de cores, e para qualquer pessoa usando o celular sob sol forte. O critério de sucesso 1.4.3 da WCAG 2.2, de nível AA, define o mínimo em 4.5:1 para texto normal e 3:1 para texto grande.
Também é um dos problemas mais baratos de corrigir: na maioria dos sites, algumas poucas cores do tema causam quase todas as falhas, e mudá-las corrige todas as páginas de uma vez.
Como interpretar os resultados
- Razão de contraste
- De 1:1 (a mesma cor duas vezes) a 21:1 (preto sobre branco). As razões são arredondadas para baixo, então um par que mostra 4.49:1 não atinge o mínimo de 4.5:1.
- Texto normal, AA (4.5:1)
- O mínimo para texto do corpo, links, rótulos e texto de botões segundo o critério 1.4.3 da WCAG.
- Texto grande, AA (3:1)
- Para texto com pelo menos 24 pixels, ou 18,66 pixels em negrito. A WCAG define texto grande como 18 pontos, ou 14 pontos em negrito.
- AAA (7:1 e 4.5:1)
- O nível aprimorado do critério 1.4.6 da WCAG. Não é necessário para a conformidade AA, mas ajuda mais leitores.
- Ícones, bordas e campos de formulário (3:1)
- O critério 1.4.11 da WCAG pede 3:1 em relação às cores adjacentes para as partes de controles e gráficos que as pessoas precisam ver para usá-los.
- Texto reprovado
- Cada elemento que a análise mediu abaixo do limite, com seletor, cores, tamanho e razão. Abra um para ver o código e, quando houver, uma captura de tela.
- A verificar visualmente
- Texto que o axe-core não conseguiu medir, com o motivo, por exemplo uma imagem ou um degradê atrás dele.
Como corrigir os problemas mais comuns
Texto cinza sobre branco
#767676 é mais ou menos o cinza mais claro que atinge 4.5:1 sobre branco (4.54:1). Cinzas mais claros, como #999999 (2.84:1), são uma causa comum de falhas em rodapés, legendas, placeholders e preços.
Texto branco sobre um botão na cor da marca
Se o texto branco sobre a cor da sua marca é reprovado, escureça alguns tons o fundo do botão ou use texto escuro. Verifique também as cores de hover e de foco, que costumam ser mais claras.
Texto de placeholder em formulários
O texto de placeholder continua sendo texto e precisa de 4.5:1. Melhor ainda, use um rótulo visível acima do campo para que o placeholder não seja a única instrução.
Texto sobre imagens e carrosséis
Coloque o texto sobre um fundo sólido ou semitransparente, ou adicione uma camada escura à imagem, e depois verifique a parte mais clara da imagem que fica atrás do texto.
Selos de promoção e letras miúdas
Texto em controles desativados é isento do 1.4.3, mas selos de promoção, preços e letras miúdas legais não são. Muitas vezes são os textos mais apagados das páginas de uma loja.
Perguntas sobre esta ferramenta
Qual razão de contraste a WCAG exige?
No nível AA, 4.5:1 para texto normal e 3:1 para texto grande (critério de sucesso 1.4.3), e 3:1 para componentes de interface e gráficos com significado (1.4.11). O nível AAA pede 7:1 e 4.5:1 (1.4.6).
O que conta como texto grande?
A WCAG define texto em escala grande como pelo menos 18 pontos, ou 14 pontos em negrito. Em pixels CSS, isso equivale a cerca de 24px, ou 18,66px em negrito.
Logotipos precisam atender ao contraste mínimo?
Não. O critério 1.4.3 da WCAG isenta logotipos e textos que fazem parte de um logo ou nome de marca, assim como textos puramente decorativos e textos em controles inativos.
Por que a análise lista para revisão o texto sobre uma imagem?
O axe-core mede cores sólidas. Quando há uma imagem, um degradê ou outro elemento atrás do texto, ele não tem como saber quais cores se encontram, então indica o elemento para uma pessoa verificar em vez de adivinhar.
Preciso de contraste AAA?
O AAA não é obrigatório para a conformidade de nível AA, e o W3C não recomenda exigir AAA para sites inteiros. Mesmo assim, chegar a 7:1 no texto do corpo é uma boa prática quando o seu design permite.
O APCA faz parte da WCAG?
Não. O APCA é um método de contraste diferente que vem sendo discutido para a WCAG 3, que ainda é um rascunho. Hoje a conformidade é medida com a razão da WCAG 2 que esta ferramenta calcula.
Fontes
- W3C: Entendendo o critério de sucesso 1.4.3 Contraste (Mínimo) da WCAG 2.2(abre em uma nova aba)
- W3C: Entendendo o critério de sucesso 1.4.6 Contraste (Melhorado)(abre em uma nova aba)
- W3C: Entendendo o critério de sucesso 1.4.11 Contraste Não Textual(abre em uma nova aba)
- W3C: Definição de luminância relativa na WCAG 2.2(abre em uma nova aba)
- Deque: regra color-contrast do axe-core(abre em uma nova aba)
- WebAIM: The WebAIM Million (2026)(abre em uma nova aba)
Ferramentas relacionadas
- AcessibilidadeVerificador de acessibilidade de sitesTeste seu site com a WCAG 2.2 níveis A e AA em um navegador real e veja cada barreira com o elemento, a página e por que ela importa.Abrir a ferramenta
- AcessibilidadeVerificador de texto alternativoListe todas as imagens de uma página com o texto alternativo de cada uma e veja quais não têm, quais são decorativas e quais têm, mas não ajudam.Abrir a ferramenta
- AcessibilidadeVerificador WCAG 2.2Veja cada critério de sucesso da WCAG 2.2 níveis A e AA no seu site: com falha, requer revisão, sem falhas automatizadas ou verificação manual.Abrir a ferramenta
Precisa das correções, não só dos achados?
O Relatório de Acessibilidade ($174, pagamento único) parte da análise gratuita completa e acrescenta mais páginas, a mudança a fazer para cada achado, um PDF e novos testes para verificar suas correções.