Como verificar o contraste entre texto e fundo (WCAG)
Nesta página
Resumo: abra a Paleta de cores da imagem do Imgovo, abra a aba Contraste, escolha uma cor de texto e uma cor de fundo e leia o resultado da WCAG 2.2. Uma taxa de 4,5:1 passa no AA para texto normal, 3:1 passa no AA para texto grande e 7:1 passa no AAA para texto normal. Você pode montar as cores a partir de uma foto ou digitar seus próprios códigos HEX. Nada é enviado.
O que a taxa de contraste significa
A taxa de contraste compara o quanto duas cores são claras. Ela vai de 1:1 (cores idênticas) a 21:1 (preto sobre branco). Texto com pouco contraste é difícil de ler, principalmente para pessoas com baixa visão, em um celular sob o sol ou em uma tela ruim.
Os números para lembrar
| Nível | Texto normal | Texto grande | Elementos de interface e ícones |
|---|---|---|---|
| AA | 4.5:1 | 3:1 | 3:1 |
| AAA | 7:1 | 4.5:1 | – |
Texto grande significa pelo menos 24 px, ou 18,66 px em negrito.
Passo a passo
- Abra a Paleta de cores da imagem. Adicione uma imagem para criar uma paleta ou use Criar uma paleta sem imagem.
- Abra a aba Contraste.
- Escolha a Cor do texto e a Cor do fundo na sua paleta ou digite as suas.
- Veja os exemplos (texto grande e normal) e os Resultados WCAG 2.2 para este par: a taxa e se passa ou não no AA e no AAA.
- Se o par não passar, clique em Sugerir uma cor de texto legível e depois em Usar a sugestão.
- Com Trocar, teste texto claro sobre fundo escuro e o contrário. Em Todos os pares você vê cada combinação da paleta.
Cores de uma foto
Se você extraiu uma paleta de uma foto, não presuma que ela serve para texto. Cores suaves ou parecidas costumam falhar. Escolha uma amostra escura para o texto e uma clara para o fundo, ou o contrário, e teste o par. Para saber como montar a paleta, leia Como obter uma paleta de cores de uma imagem.
Veja como outras pessoas podem enxergar a paleta
A ferramenta também mostra uma aproximação de diferenças comuns na visão de cores. Ela ajuda a perceber cores que parecem iguais para algumas pessoas. Não é um teste de contraste nem uma ferramenta médica.
Experimente as cores em uma interface
A aba Pré-visualização mostra suas cores em um pequeno layout com página, cartão, texto, destaque e borda, para você vê-las em contexto antes de copiar os códigos para o seu CSS.
Limites
O verificador mede um par de cores sólidas por vez. Ele não testa fotos atrás do texto, gradientes, estados de passar o mouse nem o resto da acessibilidade. Encare o resultado como uma conferência útil, não como um certificado.
Privacidade
As cores são verificadas no seu navegador. Nada é enviado.
Experimente agora
Abra a Paleta de cores da imagem, vá em Contraste e teste suas cores de texto e de fundo.
Perguntas frequentes
Que taxa de contraste eu preciso?
A WCAG 2.2 pede, no nível AA, pelo menos 4,5:1 para texto normal e 3:1 para texto grande. O nível AAA pede 7:1 para texto normal e 4,5:1 para texto grande. Elementos de interface e ícones precisam de 3:1.
O que conta como texto grande?
Pelo menos 24 px, ou 18,66 px em negrito.
Isso é um certificado de que meu design é acessível?
Não. O verificador mede um par de cores sólidas. Não é um certificado para um design inteiro e não testa imagens, gradientes, texto sobre fotos nem outros aspectos da acessibilidade.
O Imgovo pode sugerir uma cor de texto legível?
Sim. Escolha uma cor de fundo e use «Sugerir uma cor de texto legível». Depois você pode usar a sugestão ou manter a sua.
Posso verificar todas as cores de uma paleta de uma vez?
Sim. A visualização «Todos os pares» lista cada par de texto e fundo da sua paleta com o resultado.
Minha imagem é enviada para algum servidor?
Não. As cores são verificadas no seu navegador, e nada sai do seu dispositivo.