Verificador de Contraste de Cores
Verificador de contraste de cores grátis: teste se texto e fundo atendem à WCAG 2.2 AA e AAA, veja a razão de contraste e a cor mais próxima que passa.
Este é um texto normal, do tamanho de um parágrafo.
Texto grande
Botão| AA | AAA | |
|---|---|---|
| Texto normal | ||
| Texto grande (24 px, ou 18,7 px em negrito) | ||
| Ícones e bordas da interface | — |
O que ela faz
Este verificador mede o contraste entre uma cor de texto e o seu fundo com a fórmula das diretrizes de acessibilidade WCAG 2.2, usada em muitas leis de acessibilidade. Ele mostra a razão de contraste, de 1:1 (sem contraste) a 21:1 (preto no branco), e se o par passa nos níveis AA e AAA para texto normal, texto grande e componentes de interface como ícones e bordas. Quando um par falha, ele sugere a cor mais próxima, com o mesmo matiz, que passa.
Como usar
- Digite ou escolha a cor do texto e a cor de fundo.
- Leia a razão de contraste e os resultados AA e AAA, e confira a prévia ao vivo.
- Se falhar, clique em Usar numa cor sugerida e depois copie o link para compartilhar o resultado.
Perguntas frequentes
De que razão de contraste eu preciso?
O nível AA, a meta legal habitual, exige 4,5:1 para texto normal e 3:1 para texto grande e para ícones e bordas da interface. O nível AAA exige 7:1 para texto normal e 4,5:1 para texto grande.
O que conta como texto grande?
Texto de pelo menos 24 pixels CSS (18 pontos), ou de pelo menos cerca de 18,7 pixels CSS (14 pontos) em negrito. Títulos costumam ser grandes; o texto corrido normalmente não é.
Por que #777777 sobre branco falha?
A razão dele é 4,47:1, logo abaixo dos 4,5:1 exigidos para texto normal. As razões não são arredondadas para cima, então um cinza um pouco mais escuro, como #767676 (4,54:1), é o cinza mais claro que passa sobre branco.
W3C — WCAG 2.2, 1.4.3 Contrast (Minimum)
W3C — WCAG 2.2, 1.4.11 Non-text Contrast