Verificar contraste
Mede o contraste WCAG entre as cores dos elementos seleccionados.
Sem conta
O separador Contraste mede se as cores do teu design se lêem bem, segundo as regras de acessibilidade WCAG, sem copiares códigos para outra ferramenta. O resultado muda à medida que mudas a selecção.
O que comparar
| Selecção | O que o plugin compara |
|---|---|
| Um elemento (um texto ou um ícone) | A cor do elemento com a cor por trás dele: a da primeira frame ou forma que o contém com uma cor sólida, ou o fundo da página |
| Dois elementos | A cor de um com a cor do outro |
Com outra selecção (nenhum elemento ou mais de dois), o plugin explica o que seleccionar.
Ler o resultado
- Uma amostra Aa com as duas cores e o rácio de contraste (por exemplo «7,63:1»).
- Os nomes dos elementos comparados e os códigos das cores. trocar inverte a cor do texto e a do fundo.
- Os níveis que a combinação passa (✓) ou falha (✕):
| Linha | Níveis |
|---|---|
| Texto normal | AA (4,5:1) e AAA (7:1) |
| Texto grande | AA (3:1) e AAA (4,5:1) |
| Ícones e interface | 3:1 |
O cálculo é o mesmo do verificador de contraste do site, onde também encontras sugestões de cores que passam.
Que cor é usada
- O plugin usa a primeira cor sólida visível de cada elemento.
- Num texto com várias cores, usa a do primeiro carácter.
- Gradientes e imagens não são considerados: se o elemento só tiver um gradiente ou uma imagem, selecciona outro ou compara dois elementos com cor sólida.