Verificador de contraste de cores gratuito ✅
Garanta que as suas cores sejam fáceis de ler e acessíveis! Verifique a relação de contraste entre a cor do texto e a do fundo segundo as WCAG.
Exemplo de texto primário
Relação de contraste:
3.28Texto normal:
ReprovadoTexto grande:
AAComponentes de interface:
AA
O verificador de contraste do ColorMagic segue as diretrizes de acessibilidade para conteúdo web (WCAG) para garantir a legibilidade:
O que AA e AAA exigem de verdade
A relação de contraste compara o brilho de duas cores. Vai de 1:1, onde o texto some no fundo, até 21:1 para preto sobre branco. As WCAG fixam os limites pelo tamanho do texto, porque letras maiores continuam legíveis com menos contraste.
AA é o nível esperado da maioria dos times e o que já está escrito nas leis de acessibilidade de cada vez mais países. AAA é uma meta mais rígida, que vale a pena para textos lidos por muito tempo.
| Usado para | AA | AAA |
|---|---|---|
| Texto normal (abaixo de 18.66px em negrito ou 24px normal) | 4.5:1 | 7:1 |
| Texto grande (18.66px em negrito ou 24px para cima) | 3:1 | 4.5:1 |
| Ícones, bordas, campos de formulário e outras partes da interface | 3:1 | sem nível próprio |
As relações são simétricas: trocar a cor do texto pela do fundo dá o mesmo número. Só o tamanho do texto muda o limite que vale.
Combinações que passam e combinações que não passam
Cada relação abaixo é medida pela mesma função que o verificador acima usa. Repare em quão pouco a cor precisa mudar para sair de reprovada para aprovada.
- Exemplo de texto primário#1f2937 / #ffffff14.68:1AAA
- Exemplo de texto primário#ffffff / #5576ff3.87:1Somente texto grande
- Exemplo de texto primário#6b7280 / #f3f4f64.39:1Somente texto grande
- Exemplo de texto primário#ffffff / #b91c1c6.47:1AA
- Exemplo de texto primário#111827 / #fde68a14.24:1AAA
- Exemplo de texto primário#ffffff / #facc151.53:1Reprovado
A segunda combinação é a cor de botão do próprio ColorMagic: o branco em cima passa para texto grande, mas não para texto de leitura. É uma reprovação por pouco, comum em cores de marca escolhidas antes de conferir o contraste.
Como consertar uma combinação reprovada
- Escureça o texto em vez de clarear o fundo; costuma mexer menos no projeto e mover mais a relação.
- Texto cinza sobre fundo cinza claro é a reprovação por pouco mais comum. Desça um ou dois degraus na escala de cinzas e passa.
- Amarelo, lima e ciano são tão luminosos que quase nunca aceitam texto branco em cima. Use um texto quase preto.
- Guarde as cores de marca para títulos grandes, botões e acentos, e use uma versão mais escura do mesmo matiz no texto de leitura.
Perguntas frequentes
De qual relação de contraste eu preciso?
4.5:1 para o texto normal e 3:1 para texto grande ou elementos de interface, para cumprir WCAG AA. Para AAA são 7:1 e 4.5:1. Se for lembrar de um número só, lembre de 4.5:1.
O contraste vale também para botões e ícones?
Sim. Qualquer parte da interface que precise ser vista para ser usada — a borda de um botão, o contorno de um campo, um ícone com significado — precisa de pelo menos 3:1 contra o que está atrás. Gráficos decorativos e controles desativados ficam de fora.
Contraste alto é sempre melhor?
Nem sempre. Preto puro sobre branco puro chega a 21:1 e pode cansar em leituras longas; para algumas pessoas com dislexia ou sensibilidade à luz é desconfortável. Um cinza bem escuro sobre um branco quebrado cumpre AAA e se lê melhor.
E o texto sobre uma foto ou um gradiente?
Meça no ponto mais claro e no mais escuro que o texto atravessa, e garanta que os dois passem. Na prática isso costuma significar colocar uma camada sólida ou semitransparente atrás do texto.