Verificador de Contraste (níveis WCAG AA / AAA)
Escolha uma cor de primeiro plano e uma cor de fundo para calcular a proporção de contraste WCAG. A prévia de texto ao vivo e os quatro selos de nível (AA normal, AA grande, AAA normal, AAA grande) são atualizados em tempo real.
Como funciona
Como funciona a proporção de contraste
O WCAG (Diretrizes de Acessibilidade para Conteúdo Web) define contraste como a proporção entre a luminância relativa de duas cores. A fórmula lineariza cada canal sRGB, pondera-os pela sensibilidade do olho humano (R 0,2126, G 0,7152, B 0,0722) e depois calcula (mais claro + 0,05) / (mais escuro + 0,05). O resultado varia de 1:1 (idêntico) a 21:1 (preto sobre branco).
Calculamos isso no seu navegador usando a fórmula oficial do WCAG 2.x. Os quatro selos de nível verificam em relação aos limites de AA de 4,5:1 (normal) e 3:1 (grande), e de AAA de 7:1 (normal) e 4,5:1 (grande). 'Texto grande' é 24px / 18pt, ou 18,66px / 14pt negrito.
Por que passar o AA no mínimo
O AA é o nível legalmente aplicável em muitas jurisdições (Lei Brasileira de Inclusão — Lei nº 13.146/2015, ADA dos EUA, EN 301 549 da UE). Reprovar o AA em texto de corpo é o problema de acessibilidade mais comum e o mais fácil de corrigir durante o design em vez de após o lançamento.
O AAA é recomendado para leitura longa, serviços governamentais e interfaces de alto risco. É rigoroso — o primeiro instinto de um designer de cinza pálido sobre branco geralmente reprovaria facilmente. Se seu site serve principalmente conteúdo visto rapidamente, almeje AA; se você publica livros, artigos ou informações críticas, almeje AAA.
Erros comuns
'Parece bom na minha tela.' Telas calibradas, luz fluorescente de escritório e uso de smartphone ao ar livre mudam o contraste percebido. Use a proporção, não seus olhos.
Projetar modo escuro invertendo códigos hex. A inversão muda o matiz e quebra o contraste. Reteste cada par de cores após trocar temas.
Confiar nas diretrizes de marca. Muitas paletas de marcas foram escolhidas antes da conscientização sobre o WCAG. Se o rosa da marca sobre branco reprovar, proponha um rosa levemente mais escuro para o texto do corpo e reserve o original para uso decorativo.
Perguntas frequentes
›Qual é a diferença entre AA e AAA?
AA exige 4,5:1 para texto normal e 3:1 para texto grande. AAA aumenta para 7:1 e 4,5:1. AAA é recomendado, mas nem sempre alcançável.
›O que é 'texto grande'?
O WCAG define como 18pt (24px) ou maior, ou 14pt (18,66px) e negrito.
›Esta ferramenta suporta transparência?
Ainda não. Escolha a cor real que o usuário vê (primeiro plano composto sobre o fundo). O suporte a transparência pode vir posteriormente.
›Por que minha marca não passa?
Muitas paletas de marca foram escolhidas por estética, não acessibilidade. Correções comuns: escurecer cores de destaque usadas como texto, reservar variantes claras para fundos ou elementos decorativos.
›A proporção é igual ao 'contraste percebido'?
Não — o WCAG 2.x usa uma fórmula simplificada baseada em luminância. O WCAG 3 (em desenvolvimento) usa APCA, que prevê melhor o contraste percebido, mas ainda não é padronizado.
›Qual proporção para ícones ou controles de UI?
O WCAG 2.1 adicionou um mínimo de 3:1 para contraste não textual (ícones, controles de formulário, indicadores de foco). Use o mesmo verificador — atinja ou supere 3:1.
›Funciona para gráficos?
O mesmo limite se aplica entre cores adjacentes que transmitem significado. Para visualização de dados, 3:1 entre cores adjacentes é o mínimo do WCAG 1.4.11.
›Os dados são enviados para algum lugar?
Não. O cálculo é feito localmente no seu navegador.
Ferramentas relacionadas
Última atualização: