O Verificador de Contraste de Cor WCAG é uma ferramenta de duas caixas. A página tem um campo de cor de primeiro plano e um campo de cor de fundo, cada um com um seletor de cor e uma caixa de texto, e abaixo os resultados: uma pré-visualização ao vivo, a razão de contraste e uma grade de quatro cartões de aprovado ou reprovado. Não há botão de executar e nada para configurar; mude qualquer uma das duas cores e todos os números se atualizam na mesma tecla. Nada é enviado para qualquer lugar: a matemática de luminância roda no navegador do dispositivo.
As duas cores de entrada e a pré-visualização ao vivo
O primeiro plano é a cor do texto e o fundo é o que fica atrás, e os padrões são preto sobre branco, #000000 sobre #FFFFFF. Cada campo aceita um hexadecimal de três dígitos como #F00 ou de seis como #767676, e o # inicial é opcional, então 000000 é interpretado igual a #000000. Ao lado de cada caixa há um seletor de cor que a preenche por você. Assim que as duas cores são válidas, a área de resultados aparece: uma pré-visualização que pinta texto de exemplo no par escolhido em três tamanhos, a razão e os quatro cartões WCAG. Se um campo contiver algo que não é um hexadecimal de três ou seis dígitos, a área de resultados inteira desaparece em vez de mostrar um palpite.
Como a razão de contraste é calculada
A ferramenta segue a fórmula padrão da WCAG. Cada cor hexadecimal é convertida em valores de vermelho, verde e azul de 0 a 255, cada canal é linearizado da curva sRGB e os três canais são ponderados em uma luminância relativa com os coeficientes 0.2126 para o vermelho, 0.7152 para o verde e 0.0722 para o azul. A razão é a luminância mais clara mais 0.05 dividida pela luminância mais escura mais 0.05, por isso ela sempre é pelo menos 1 e nunca passa de 21, a distância entre o preto puro e o branco puro. O número é mostrado com dois decimais, seguido de dois pontos e um um, então o preto sobre branco se lê 21.00:1 e uma cor sobre si mesma 1.00:1. A razão não depende de qual cor é chamada de primeiro plano: trocar as duas caixas dá o mesmo número.
Os quatro limites fixos e seus valores de fronteira
Quatro cartões julgam a razão contra quatro mínimos fixos: AA para texto normal em 4.5:1, AA para texto grande em 3:1, AAA para texto normal em 7:1 e AAA para texto grande em 4.5:1, e cada cartão mostra seu mínimo sob o veredito. As fronteiras são inclusivas: uma razão que cai exatamente no mínimo passa. Os valores que você encontrará na prática: #767676 sobre branco é 4.54:1 e passa no AA normal, enquanto #777777 sobre branco é 4.48:1 e não passa, a um passo hexadecimal da linha. #808080 sobre branco é 3.95:1, só texto grande, e #595959 sobre branco é 7.00:1, que passa nos quatro cartões, incluindo AAA normal.
O que texto grande significa para os cartões de 3:1 e 4.5:1
O texto grande no sentido da WCAG é no mínimo 18 pontos em regular ou 14 pontos em negrito, o que equivale a uns 24px em regular ou 19px em negrito. A ferramenta não mede tamanhos de letra nem tem um campo para eles; ela sempre calcula os quatro vereditos, então ler o resultado é uma ação de duas etapas. Primeiro olhe os quatro cartões e depois decida qual dos dois tamanhos reais do seu design é usado: se o texto é grande, valem os cartões grandes de 3:1 e 4.5:1; se é de tamanho normal, valem os cartões normais de 4.5:1 e 7:1. Uma razão de 4:1, por exemplo, passa no cartão AA de texto grande, não passa no AA de texto normal e não passa nos dois cartões AAA.
Casos extremos: hexadecimal inválido e cores iguais
O analisador só aceita um hexadecimal de três ou seis dígitos após remover um # inicial, então qualquer outra coisa oculta os resultados: cinco dígitos, oito dígitos com canal alfa e letras que não são hexadecimais deixam a página com apenas as duas caixas de entrada. Um primeiro plano e um fundo idênticos dão 1.00:1 e não passam nos quatro cartões, que é o veredito honesto para um texto da mesma cor que o fundo. Maiúsculas e minúsculas hexadecimais são tratadas igual e a abreviatura de três dígitos se expande dígito a dígito, então #F00 é #FF0000. Não há mensagem de validação na área de resultados; o ocultamento é o único sinal, e vale saber quando você se perguntar para onde foram os cartões.
Só no cliente, nada é guardado
Os dois valores hexadecimais nunca saem do navegador. Não há envio, nem histórico, nem pares guardados nem botão de copiar; o cálculo é uma função pura das duas entradas atuais e recarregar a página devolve os padrões de preto sobre branco. Também não há um controle de troca entre os dois campos, então para inverter um par é preciso digitar os dois valores de novo, e não existe nenhum mecanismo de sugestões que te diga a cor mais próxima que passa: a ferramenta informa a razão e os quatro vereditos, e o ajuste fica por sua conta.
O que a ferramenta guarda e para onde ir em seguida
Ela não guarda nada: nenhuma requisição de rede é feita, nada é armazenado e recarregar a página devolve os campos para #000000 e #FFFFFF. Para o resto do fluxo de trabalho de cor e CSS, o Conversor de Cores move um valor hexadecimal entre HEX, RGB e HSL, o Conversor de Unidades CSS converte entre px, rem, em e pt para você conferir seus tamanhos de letra contra a linha de texto grande, e o Formatador CSS organiza a folha de estilos que carrega essas cores. Para uma visão mais ampla do lado de marcação da mesma página, consulte o guia de formatação de HTML.