Verificador de contraste
Verifique as taxas de contraste WCAG de pares de cores, com veredictos AA e AAA e sugestões de correção.
Verificador de contraste
Cole pares de primeiro e segundo plano, um por linha — #7a1f2b em #ffffff, #333, #eee ou rgb(0, 0, 0) #fff — e a taxa de contraste WCAG 2 de cada par retorna instantaneamente, com um veredicto de aprovação ou reprovação para cada nível de conformidade. A proporção varia de 1: 1 (sem contraste algum) a 21: 1 (preto no branco) e é calculada a partir da luminância relativa exatamente como as diretrizes a definem, portanto, os números concordam com os inspetores do navegador e as ferramentas de auditoria.
WCAG nomeia dois níveis. AA, a maior referência em leis e contratos, exige 4,5: 1 para texto normal e 3: 1 para texto grande. AAA, a meta mais rigorosa, pede 7: 1 e 4,5: 1. O texto conta como grande a partir de 18 pt (cerca de 24 px) em peso normal, ou de 14 pt (cerca de 18,7 px) em negrito - é por isso que um título pode passar na proporção em que um parágrafo falha. O relatório descreve todas as quatro verificações por par; mude a saída para Compact para uma linha por par, que é a leitura mais rápida quando você está varrendo uma paleta inteira.
Quando um par perde AA para texto normal, ative "Sugerir correção" e a ferramenta escurece ou clareia o primeiro plano em pequenos passos de luminosidade, mantendo seu matiz, até atingir 4,5: 1 - em seguida, imprime o hexadecimal de passagem mais próximo, pronto para colar de volta em sua folha de estilo.
Tudo roda no seu navegador; paletas de marcas inéditas nunca saem do seu dispositivo. As cores podem ser hexadecimais de 3 ou 6 dígitos com ou sem hash, rgb() ou rgba(), ou um nome CSS comum – os 16 básicos mais os populares estendidos. A lista CSS completa de 148 nomes não é transportada deliberadamente, então escreva nomes exóticos como hexadecimais. Uma linha que não seja um par de cores é notada com calma e o restante continua sendo processado.