Confira a proporção de contraste entre duas cores com veredito WCAG AA e AAA para texto normal e grande, mais pré-visualização ao vivo.
Todos os cálculos acontecem localmente no seu navegador. Nada sai do seu dispositivo.
A proporção de contraste é a diferença entre a luminosidade de uma cor e a luminosidade do seu fundo, expressa como um número do tipo 7,2:1. É a métrica mais importante para a legibilidade do texto: se os valores estão muito próximos, o texto se confunde com o fundo; se estão bem separados, ele se destaca. O WCAG (diretrizes de acessibilidade de conteúdo web) transforma esse número em regras concretas de aprovação ou reprovação para dois tamanhos de texto e dois níveis de conformidade, exatamente o que a tabela acima verifica em tempo real.
A proporção de contraste mede o quão diferentes duas cores são em luminosidade percebida, expressa como um número de 1:1 (idênticas) a 21:1 (preto sobre branco). Se o texto e o fundo são muito parecidos, fica difícil de ler — especialmente para pessoas com baixa visão ou daltonismo, ou em telas muito iluminadas. O WCAG define as proporções mínimas que o texto deve atender para ser considerado acessível.
Cada cor é convertida em um valor de luminância relativa pela fórmula do WCAG: os canais R, G e B são linearizados a partir do sRGB e depois ponderados (0,2126R + 0,7152G + 0,0722B). A proporção é (Lclara + 0,05) / (Lescura + 0,05). Esta ferramenta executa exatamente esse cálculo no seu navegador.
O WCAG define texto grande como pelo menos 18 pt (24 px) em peso normal, ou pelo menos 14 pt (aproximadamente 18,7 px) em negrito. O texto grande precisa de uma proporção mínima menor (3:1 para AA, 4,5:1 para AAA) porque os glifos grandes são mais fáceis de distinguir do que os pequenos.
AA (4,5:1 para texto normal) é a base legal em muitas regiões e atende à esmagadora maioria dos usuários. AAA (7:1) é o padrão de ouro para produtos novos, documentação e tudo em que a legibilidade for crítica — deixa a leitura confortável para usuários mais velhos e pessoas com deficiência visual. Na dúvida, mire no AAA.
Não. Os seletores de cor só produzem cores totalmente opacas, então a proporção é sempre entre duas cores sólidas. Se o seu design usa canal alfa, achate-o sobre o fundo real primeiro e depois verifique aqui o par de cores resultante.
Se você acabou de usar Verificador de contraste de cor, os próximos passos naturais são Gerador de paletas de cores, Conversor de cores, Gerador de gradientes CSS, ou explore todas as ferramentas de Ferramentas de arquivos.