Verificador de contraste
Confirma se o texto se lê bem sobre o fundo, segundo as regras WCAG (AA e AAA).
Confirma se um texto se lê bem sobre um fundo, segundo as regras de acessibilidade WCAG, e encontra a cor mais próxima que passa quando a combinação falha. Está em logaco.com/ferramentas/contraste.
Passos
Escolhe as duas cores
Em Cor do texto e Cor do fundo, escreve o código hex ou usa o selector. Trocar texto e fundo inverte as duas.
Lê o resultado
Vês o Rácio de contraste e uma tabela com os níveis que a combinação cumpre (Passa ou Falha):
| Utilização | AA | AAA |
|---|---|---|
| Texto normal (abaixo de 24px, ou de 18,66px em negrito) | 4,5:1 | 7:1 |
| Texto grande (24px ou mais, ou 18,66px em negrito) | 3:1 | 4,5:1 |
| Elementos de interface (ícones, bordas de campos e botões) | 3:1 | — |
A Pré-visualização mostra texto, um botão e um ícone com as tuas cores.
Corrige se for preciso
Em Sugestões, escolhe o objectivo (AA · 4,5:1 ou AAA · 7:1). Quando a combinação não chega lá, vês duas propostas, Ajustar o texto e Ajustar o fundo: as cores mais próximas que passam. Mudam só a luminosidade, por isso mantêm o mesmo tom. Clica em Aplicar para usar uma.
Que rácio usar?
Para texto normal, pelo menos 4,5:1 (nível AA) ou 7:1 (nível AAA). Para texto grande e elementos de interface, pelo menos 3:1.
Partilhar e guardar
- Copiar ligação: o endereço guarda as duas cores
(
logaco.com/ferramentas/contraste?fg=…&bg=…). - Guardar guarda a combinação como uma paleta de duas cores.
Nota
No Figma, o separador Contraste do plugin do Logaco faz a mesma verificação com as cores dos elementos seleccionados.
Sem conta e com conta
Tudo funciona sem conta. Guardar sem sessão iniciada guarda neste dispositivo; com sessão, guarda na tua conta.