Primeiro, identifique o objeto a ser medido.
Insira a cor do texto e a cor de fundo real, usando três ou seis bits HEX. Esta ferramenta calcula com base em cores sRGB opacas; para cores transparentes, imagens de fundo e gradientes, você precisa primeiro determinar o fundo composto real na localização do texto, e não pode simplesmente usar um dos valores de cor como substituto.
Os resultados da verificação do contraste do texto neste conjunto de cores não indicam que a página inteira atenda à classificação WCAG. O tamanho da fonte, a fonte, os estados interativos e outros requisitos de acessibilidade ainda precisam ser verificados na página real.
Como calcular a proporção
Divida cada canal de cor de 8 bits por 255 para obter c. Se c ≤ 0,04045, o valor linear é c ÷ 12,92; caso contrário, é ((c + 0,055) ÷ 1,055) elevado à potência de 2,4. O brilho relativo L = 0,2126R + 0,7152G + 0,0722B, onde R, G e B utilizam os valores lineares acima.
(L maior + 0.05) ÷ (L menor + 0.05). Preto e branco dão 21:1; cores idênticas dão 1:1. Trocar texto e fundo mantém a relação de contraste, mas altera a aparência.
Não confunda arredondamento com aprovação.
Texto normal exige pelo menos 4.5:1 para AA e 7:1 para AAA. Texto grande exige 3:1 e 4.5:1, respectivamente. Texto grande tem pelo menos 18pt, ou 14pt em negrito. Não aplique esses limites a texto menor.
A relação de contraste de #777777 em um fundo branco é de aproximadamente 4,478:1, o que não atende ao requisito de 4,5:1 para texto comum (AA). Mesmo que uma interface o exiba como 4,5, o valor exibido não pode ser usado para avaliação. Este site exibe três casas decimais; a avaliação condicional usa o valor calculado completo.
Reinsira os pares de cores na interface original.
A pré-visualização mostra apenas as cores de entrada, usando 16px para o corpo do texto e 24px para os títulos. Primeiro, verifique a cor real do texto, o fundo, o tamanho e a espessura da fonte na página de destino e, em seguida, verifique os estados normal, ao passar o mouse e com foco; não se limite a verificar o conjunto de cores mais adequado no rascunho do design.
Após escurecer gradualmente o texto ou clarear o fundo, o cálculo é repetido e, em seguida, a fonte e a experiência de leitura em um dispositivo real são verificadas. O teste de contraste de cores aqui não mede a identificação de daltonismo, a semântica dos ícones ou a conformidade da página inteira; os valores de cor e os locais de verificação são mantidos para análise posterior.