Calcular contraste entre cor de texto e cor de fundo

O que é razão de contraste

Razão de contraste é uma medida numérica de quão diferente é a claridade entre duas cores — na prática, entre a cor de um texto e a cor do fundo atrás dele. O número varia de 1:1 (as duas cores têm exatamente a mesma claridade, contraste nenhum) a 21:1 (o contraste máximo possível, preto absoluto contra branco absoluto). Quanto maior o número, mais fácil distinguir o texto do fundo — informação especialmente relevante para quem tem baixa visão ou algum tipo de daltonismo, mas que afeta a legibilidade para qualquer pessoa, em qualquer condição de luz.

Como o número é calculado

O cálculo usa a fórmula pública de luminância relativa do WCAG 2: cada componente RGB da cor passa por uma correção não linear (aproximando como o olho humano percebe claridade, que não é uma função direta do valor do canal), os três resultados são combinados com pesos diferentes — o canal verde pesa mais que o vermelho, que pesa mais que o azul, refletindo a sensibilidade do olho a cada cor — e o resultado final é a razão entre a luminância da cor mais clara e da mais escura das duas.

Os quatro critérios WCAG mostrados

WCAG define dois níveis de exigência (AA e AAA) e dois tamanhos de texto (normal e grande), com um mínimo numérico diferente para cada combinação: AA exige 4,5:1 para texto normal e 3:1 para texto grande; AAA, mais rigoroso, exige 7:1 para texto normal e 4,5:1 para texto grande. Texto grande — definido como 18 pontos ou mais, ou 14 pontos em negrito — exige menos contraste porque letras maiores continuam legíveis com uma diferença de claridade menor entre texto e fundo.

Por que AA é o critério mais citado

AA é o nível mais frequentemente referenciado em política de acessibilidade e em legislação sobre acessibilidade digital ao redor do mundo — é considerado um piso razoável de legibilidade sem exigir contraste tão alto que limite demais as combinações de cor possíveis num projeto visual. AAA existe para quem quer ou precisa ir além desse piso, geralmente em contexto onde a leitura por pessoas com baixa visão é uma prioridade ainda maior.

O número e o critério, sem instrução do que fazer

Esta ferramenta mostra a razão de contraste calculada e se ela atende ou não cada um dos quatro critérios — não recomenda trocar a cor de texto ou de fundo, não aponta qual critério perseguir, e não afirma que uma combinação de cores está "aprovada" ou "reprovada" de forma genérica. Contraste adequado depende do contexto de uso (tamanho real do texto na tela, se é um título ou um corpo de texto longo, que nível de exigência o projeto persegue) — decisões que continuam sendo de quem está desenhando a interface.

Usando a prévia ao lado do resultado

A prévia mostrada nesta página aplica as duas cores escolhidas exatamente como um texto normal e um texto grande (em negrito) apareceriam lado a lado — útil para ver o efeito prático de um número de contraste antes de decidir se ele funciona bem para o seu caso. Um número tecnicamente acima do mínimo exigido às vezes ainda parece visualmente apertado dependendo da fonte e do tamanho reais usados no projeto; a prévia serve como checagem visual complementar ao número calculado, não como substituto dele.

Contraste também importa fora de texto

Embora os critérios WCAG mostrados aqui sejam especificamente sobre texto, a mesma lógica de razão de contraste se aplica a outros elementos visuais importantes — ícone contra fundo, borda de campo de formulário, indicador de estado (como um ponto de status "ativo" ou "erro"). O WCAG tem um critério separado para "contraste de componentes de interface e objetos gráficos", com limite mínimo de 3:1 — um número que pode ser conferido com a mesma razão de contraste calculada aqui, mesmo que o critério em si não seja um dos quatro mostrados nesta ferramenta (pensados especificamente para texto).

O que esta ferramenta não faz

Ela não verifica nenhum outro critério de acessibilidade web além de contraste de cor — navegação por teclado, texto alternativo de imagem, estrutura semântica de HTML e outros critérios do WCAG não são avaliados aqui. Não garante conformidade legal com nenhuma legislação de acessibilidade específica, e não sugere uma cor alternativa quando o contraste calculado não atende a um critério — apenas informa o número e o resultado frente a cada critério, lado a lado.