Verificador de contraste de cores
Verifique cores de texto e de fundo pelas regras WCAG AA e AAA, com transparência e a cor mais próxima que passa.
Como usar
Informe a cor do texto e a cor de fundo, digitando um código ou com o seletor de cores. A razão de contraste e os resultados WCAG aparecem enquanto você digita. Trocar as cores inverte as duas, para texto claro sobre fundo escuro.
A razão segue o WCAG 2.2: a luminância relativa de cada cor é calculada a partir dos valores sRGB, e a razão é (mais clara + 0,05) ÷ (mais escura + 0,05), de 1:1 para duas cores iguais a 21:1 para preto sobre branco. Texto normal exige 4,5:1 no nível AA e 7:1 no AAA; texto grande, com pelo menos 24 px ou 18,5 px em negrito, exige 3:1 e 4,5:1. Ícones, bordas de campos e outras partes da interface exigem 3:1 em relação ao que está ao lado (critério de sucesso 1.4.11).
A razão nunca é arredondada para cima antes da comparação: o W3C diz que 4,499:1 não atinge 4,5:1. Por isso o número aparece truncado, e não arredondado, com duas casas decimais.
As cores podem ser escritas como #hex de 3, 4, 6 ou 8 dígitos, como rgb() ou hsl() nas duas sintaxes do CSS, ou com um dos 148 nomes de cor do CSS. Uma cor com transparência é verificada como é pintada, misturada com a cor de trás; um fundo transparente é verificado sobre branco, como o WCAG supõe quando o fundo é desconhecido. Se o texto não passa, a ferramenta sugere a cor de texto mais próxima, com o mesmo tom e saturação, que chega a 4,5:1 e a 7:1. Tudo é calculado no seu navegador.
Exemplo
O cinza #777777 sobre branco dá 4,47:1, logo abaixo dos 4,5:1 que o texto normal exige no AA. O cinza mais próximo que passa é #767676, com 4,54:1.
#777777 sobre #ffffff4,47:1: não passa no AA para texto normal por muito pouco; #767676 dá 4,54:1 e passa.#ffffff sobre #1a73e84,5:1: texto branco sobre este azul chega exatamente ao AA e fica longe do AAA.rgba(0, 0, 0, 0.5) sobre #ffffffÉ pintado como #808080, então 3,94:1: basta para texto grande e ícones, não para texto normal.#ff0000 sobre #ffffff3,99:1: texto vermelho puro sobre branco fica logo abaixo do AA para texto normal; #ee0000 passa com 4,53:1.
Perguntas frequentes
Qual a diferença entre AA e AAA?
São dois níveis de conformidade do WCAG. O AA é o que a maioria das leis e políticas exige: 4,5:1 para texto normal e 3:1 para texto grande. O AAA é mais rígido, 7:1 e 4,5:1, e o W3C não recomenda exigi-lo para sites inteiros, porque parte do conteúdo não consegue atingi-lo.
O que conta como texto grande?
Pelo menos 18 pontos, ou 14 pontos em negrito. O W3C dá como equivalentes em CSS cerca de 24 px e 18,5 px. Um texto não é grande só porque a fonte parece grande; o que conta é o tamanho.
A regra de contraste vale para logotipos e botões desativados?
Não. O WCAG excetua o texto de logotipos e nomes de marca, o texto puramente decorativo e as partes de uma interface inativa, como um botão desativado.
Por que minha ferramenta de design mostra outra razão?
Normalmente porque ela arredonda: 4,495 arredondado para duas casas vira 4,5, mas não atinge 4,5:1. Ferramentas antigas também usavam 0,03928 em vez de 0,04045 na fórmula de luminância; o W3C informa que isso não muda os resultados na prática.
Minhas cores são enviadas para algum lugar?
Não. O cálculo acontece no seu navegador.