Verificador de Contraste de Cores
Verificador de contraste de cores grátis: teste se texto e fundo cumprem as WCAG 2.2 AA e AAA, veja o rácio 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 a negrito) | ||
| Ícones e contornos da interface | — |
O que faz
Este verificador mede o contraste entre uma cor de texto e o respetivo fundo com a fórmula das diretrizes de acessibilidade WCAG 2.2, usada em muitas leis de acessibilidade. Mostra o rácio de contraste, de 1:1 (sem contraste) a 21:1 (preto sobre branco), e se o par passa nos níveis AA e AAA para texto normal, texto grande e componentes da interface, como ícones e contornos. Quando um par falha, sugere a cor mais próxima, com o mesmo matiz, que passa.
Como utilizar
- Introduza ou escolha a cor do texto e a cor de fundo.
- Leia o rácio de contraste e os resultados AA e AAA, e veja a pré-visualização em direto.
- Se falhar, clique em Usar numa cor sugerida e depois copie a ligação para partilhar o resultado.
Perguntas frequentes
De que rácio de contraste preciso?
O nível AA, o objetivo legal habitual, exige 4,5:1 para texto normal e 3:1 para texto grande e para ícones e contornos 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 com pelo menos 24 píxeis CSS (18 pontos), ou com pelo menos cerca de 18,7 píxeis CSS (14 pontos) quando está a negrito. Os títulos costumam ser grandes; o texto corrido normalmente não é.
Porque é que #777777 sobre branco falha?
O rácio é de 4,47:1, logo abaixo dos 4,5:1 exigidos para texto normal. Os rácios não são arredondados para cima, por isso um cinzento um pouco mais escuro, como #767676 (4,54:1), é o cinzento 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