Ferramentas
Ferramenta gratuita
Verificador de contraste
Escolha a cor do texto e a do fundo, e eu te digo se a leitura fica boa segundo as diretrizes de acessibilidade WCAG 2.2.
Cores e resultado
Pré-visualização
Texto grande de exemplo
Assim ficaria um parágrafo de texto normal com estas cores. Dá para ler com conforto?
Contraste
5,47:1
Bom: cumpre o nível AA para qualquer texto.
- Texto normal AA mín. 4,5:1 Cumpre
- Texto grande AA mín. 3:1 Cumpre
- Texto normal AAA mín. 7:1 Não cumpre
- Texto grande AAA mín. 4,5:1 Cumpre
- Ícones e bordas AA mín. 3:1 Cumpre
O que significam os resultados
- O contraste mede a diferença de luz entre o texto e o fundo. Vai de 1:1 (a mesma cor) a 21:1 (preto sobre branco).
- AA é o nível exigido pela maioria das normas de acessibilidade. AAA é mais exigente e é recomendado para textos longos.
- Texto grande é o de 24 px ou mais, ou de 18,66 px ou mais em negrito. Como é mais fácil de ler, precisa de menos contraste.
- Ícones e bordas: botões, campos de formulário e ícones precisam de pelo menos 3:1 para se destacarem do fundo.
Uso a fórmula de luminância relativa das WCAG 2.2. A ferramenta não guarda nada: as cores ficam só no endereço da página, assim você pode compartilhar o resultado copiando o link.