Verificador de contraste de cor

Verifique o contraste de cor WCAG no seu navegador

Este verificador de contraste de cor mede o rácio 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. Escreva um valor hexadecimal, edite os campos RGB ou HSL, arraste o controlo deslizante de luminosidade ou utilize o conta-gotas para recolher qualquer cor do seu ecrã — o rácio, a matriz de resultados e a pré-visualização em direto atualizam-se ao longo da escrita.

Funciona como as ferramentas em que os 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 falham. Tudo funciona localmente em JavaScript: as suas cores nunca saem do seu dispositivo e não é necessária qualquer conta.

Limiares WCAG AA e AAA explicados

O rácio 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 Secçã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 a negrito.

A matriz de resultados apresenta cada limiar separadamente, para que veja de imediato que um cinzento como #767676 sobre branco passa no AA para texto do corpo com 4,54:1 mas fica aquém dos 7:1 necessários para AAA. Se a sua equipa precisar de cumprir a conformidade legal (ADA, EN 301 549, Secção 508), o AA é o nível a atingir. O AAA vale a pena perseguir em interfaces de leitura intensa onde utilizadores com baixa visão são prioritários.

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

Os números só contam metade da história, por isso a pré-visualização em direto apresenta 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 se limite a ler o rácio. Quando um par falha, o sugestor 'Fazer passar' mantém o 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 num único clique. Pode ajustar o texto ou o fundo, conforme preferir.

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

APCA: uma pré-visualização do contraste do WCAG 3

Além do rácio clássico, este verificador mostra uma pontuação APCA Lc — a métrica de contraste percetual proposta para o WCAG 3. O APCA modela como o olho lê de facto texto claro sobre escuro versus escuro sobre claro e tem em conta o peso tipográfico, pelo que deteta problemas de legibilidade que o rácio do WCAG 2 por vezes falha. 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, pelo que a conformidade hoje significa cumprir os limiares de 4,5:1 e 3:1. Mostrar o APCA ao lado dos rácios atuais permite preparar a 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 é apenas 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 confirme que o contorno de um botão ou ícone é visível.

Esta é uma área onde muitas equipas falham em auditorias sem se aperceberem. Uma borda de input cinzento claro (#D1D1D1 sobre branco é 1,4:1) é uma infração comum do WCAG 2.1 mesmo quando todo o texto da página passa. Verificar os seus componentes de interface aqui demora segundos e evita surpresas numa 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 em direto, não pode corrigir automaticamente pares que falham e não tem grelha de paleta por pares.

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 guardar o trabalho e não podem sugerir automaticamente uma cor que passe.

O Chrome DevTools tem um distintivo de rácio de contraste no seletor de cor do painel Elementos que funciona para verificações no navegador — mas apenas dentro do DevTools.

Este verificador funciona sem início de sessão, mostra tanto os rácios WCAG 2 como a pontuação APCA Lc, apresenta uma pré-visualização em direto nas suas cores e permite testar uma grelha de paleta completa numa única vista. Todos os cálculos são executados localmente em JavaScript.