Verificador de contraste de cores

Verifique o contraste de cores WCAG no seu navegador

Este verificador de contraste de cores mede a relação de contraste WCAG entre uma cor de texto e de fundo, indicando imediatamente se o par passa nos níveis AA e AAA para texto normal, texto grande e componentes de interface. Digite um valor hexadecimal, edite os campos RGB ou HSL, arraste o controle deslizante de luminosidade ou use o conta-gotas para capturar qualquer cor da sua tela — a relação, a matriz de resultados e a pré-visualização ao vivo se atualizam enquanto você digita.

Funciona como as ferramentas em que designers já confiam — a mesma fórmula WCAG do WebAIM e do Adobe Color — mas adiciona uma pré-visualização legível em tempo real, uma pontuação APCA (WCAG 3) e uma correção automática para pares que não passam. Tudo funciona localmente em JavaScript: suas cores nunca saem do seu dispositivo e nenhuma conta é necessária.

Limites WCAG AA e AAA explicados

A relação de contraste WCAG vai de 1:1 (duas cores idênticas) a 21:1 (preto sobre branco). O nível AA — o padrão exigido pela maioria das leis como a ADA e a Seção 508 — requer 4,5:1 para texto normal e 3:1 para texto grande. O nível AAA eleva esses valores para 7:1 e 4,5:1. Texto grande significa 18pt (24px) ou mais, ou 14pt (cerca de 18,66px) ou mais em negrito.

A matriz de resultados apresenta cada limite separadamente, para que você veja de relance que um cinza como #767676 sobre branco passa no AA para texto do corpo com 4,54:1 mas fica abaixo dos 7:1 necessários para AAA. Se sua equipe precisar cumprir conformidade legal (ADA, EN 301 549, Seção 508), o AA é o limite a atingir. O AAA vale a pena buscar em interfaces de leitura intensa onde usuários com baixa visão são prioritários.

Pré-visualize, corrija e lance pares de cores acessíveis

Os números contam apenas metade da história, por isso a pré-visualização ao vivo renderiza títulos reais, texto do corpo, texto pequeno e um botão e chip de amostra nas suas cores exatas — veja a legibilidade, não apenas leia a relação. Quando um par falha, o sugestor 'Fazer passar' mantém seu matiz e saturação e ajusta a luminosidade para a cor mais próxima que ultrapassa o nível escolhido (AA, AA texto grande ou AAA), aplicando-a com um único clique. Você pode ajustar o texto ou o fundo, o que preferir.

A grade de pares aceita uma paleta completa e mostra quais combinações de cores passam de relance — útil ao construir um sistema de design onde cada combinação de primeiro plano e fundo precisa ser segura. Em vez de testar dezenas de pares um por um, você cola sua paleta uma vez e vê a matriz completa instantaneamente.

APCA: uma prévia do contraste do WCAG 3

Além da relação clássica, este verificador mostra uma pontuação APCA Lc — a métrica de contraste perceptual proposta para o WCAG 3. O APCA modela como o olho lê texto claro sobre escuro versus escuro sobre claro e leva em conta o peso tipográfico, detectando problemas de legibilidade que a relação do WCAG 2 às vezes perde. Valores de referência: Lc 75+ para texto do corpo, Lc 60+ para texto grande, Lc 45+ para títulos grandes.

O WCAG 3 ainda está em rascunho e não substituiu o WCAG 2.2, então a conformidade hoje significa atingir os limites de 4,5:1 e 3:1. Mostrar o APCA ao lado das relações atuais permite preparar sua paleta para o futuro sem esperar pela finalização da especificação.

Contraste não textual para ícones e componentes de interface

O contraste não é só para texto. WCAG 2.1 SC 1.4.11 requer 3:1 de contraste para os limites de componentes interativos — bordas de inputs, indicadores de foco, estados de toggle — e para ícones e gráficos significativos. A matriz inclui uma verificação dedicada de interface e gráficos a 3:1 para que você confirme que o contorno de um botão ou ícone é visível, não apenas o rótulo interno.

Essa é uma área onde muitas equipes falham em auditorias sem perceber. Uma borda de input cinza claro (#D1D1D1 sobre branco é 1,4:1) é uma violação comum do WCAG 2.1 mesmo quando todo o texto da página passa. Verificar seus componentes de interface aqui leva segundos e evita surpresas em uma auditoria formal.

Como se compara ao WebAIM, Adobe Color e Chrome DevTools

O verificador de contraste do WebAIM em webaim.org é a ferramenta de acessibilidade gratuita mais citada e usa a mesma fórmula WCAG 2 que esta. Não mostra APCA, não tem pré-visualização de texto ao vivo, não pode corrigir automaticamente pares que falham e não tem grade de paleta por pares para testar múltiplas combinações de cores ao mesmo tempo.

As Ferramentas de Acessibilidade do Adobe Color mostram os resultados AA/AAA e incluem um simulador de daltonismo, mas requerem uma conta gratuita da Adobe para salvar o trabalho e não podem sugerir automaticamente uma cor que passe.

O Chrome DevTools tem um emblema de relação de contraste no seletor de cores do painel Elementos que funciona para verificações no navegador — mas apenas dentro do DevTools.

Este verificador funciona sem login, mostra tanto as relações WCAG 2 quanto a pontuação APCA Lc, renderiza uma pré-visualização ao vivo nas suas cores e permite testar uma grade de paleta completa em uma única visualização. Todos os cálculos são executados localmente em JavaScript.