O contraste de cores decide se pessoas reais podem realmente ler seu texto. O Color Contrast Checker mede a taxa de contraste WCAG entre quaisquer duas cores e informa se o par é seguro para texto normal, texto grande e elementos de interface. Este guia explica de onde vêm os números, o que significam os limites e como corrigir uma combinação com falha.

Como a taxa de contraste é calculada

O contraste não é uma simples diferença de valores de cores — ele é baseado na luminância relativa, um modelo de brilho percebido. Os canais vermelho, verde e azul de cada cor são normalizados para 0–1, convertidos de sRGB codificado gama em luz linear, depois ponderados (0,2126 vermelho, 0,7152 verde, 0,0722 azul) e somados. O verde tem maior peso porque o olho humano é mais sensível a ele.

Os dois valores de luminância alimentam a proporção (L_lighter + 0,05) / (L_darker + 0,05). A constante 0,05 representa a luz ambiente refletida na tela. O resultado varia de 1:1 (mesma cor) a 21:1 (preto puro sobre branco puro). Quando uma cor de primeiro plano é semitransparente, essa ferramenta a compõe primeiro no plano de fundo, porque é isso que o visualizador realmente vê.

O que significam os limites

WCAG define níveis. Para corpo de texto normal, AA requer 4,5:1 e AAA requer 7:1. Para texto grande — pelo menos 24px regular ou 18,66px em negrito — as barras relaxam para 3:1 (AA) e 4,5:1 (AAA), porque glifos maiores são inerentemente mais fáceis de ler. Uma regra separada, WCAG 1.4.11, estabelece um mínimo de 3:1 para elementos não textuais: ícones, bordas de entrada, indicadores de foco e partes significativas de tabelas e gráficos.

AA é a linha de base prática. A maioria das leis de acessibilidade – a ADA nos EUA, a Lei Europeia de Acessibilidade, Secção 508 – apontam para WCAG AA. Alcançar AAA em todos os lugares é admirável, mas nem sempre é possível para as cores da marca; AA para corpo de texto mais 3:1 para IU é a meta realista para a maioria dos produtos.

Consertando um par com falha

Quando uma combinação falha, o culpado usual é uma cor de primeiro plano com luminosidade muito próxima do fundo. A solução mais simples é ajustar a luminosidade da cor do texto enquanto preserva seu matiz, para que o design ainda pareça de marca. A guia Sugestões de correção desta ferramenta faz exatamente isso: ela torna a cor do texto mais escura e mais clara até ultrapassar 4,5:1 e relata a menor alteração que ocorre.

Duas advertências. Primeiro, o contraste é necessário, mas não suficiente: a cor nunca deve ser a única forma de sinalizar o significado, uma vez que usuários daltônicos podem não perceber a diferença. Em segundo lugar, imagens de fundo grandes e gradientes anulam a verificação de proporção única. Teste o pior caso, onde o texto se sobrepõe à parte mais clara ou mais escura da imagem.