O que é Verificador de Contraste WCAG?

Um verificador de contraste de cores WCAG que calcula a proporção de contraste entre cores de primeiro plano e de fundo e indica se a combinação atende aos padrões de acessibilidade WCAG 2.1 Nível AA e AAA para texto normal e grande.

O verificador calcula a razão de luminância relativa do WCAG 2.1 entre duas cores — escritas como hex, rgb(), hsl() ou um nome CSS — e a classifica em AA (4,5:1 para texto comum, 3:1 para texto grande) e AAA (7:1 e 4,5:1). Também valida o piso de 3:1 para componentes de UI como bordas de formulário e ícones. Quando uma combinação reprova, o painel de sugestões aproxima o primeiro plano de um valor aprovado, oferecendo alvos AA e AAA.

Como usar

1. Insira ou escolha uma cor de primeiro plano (texto) e uma de fundo: cole hex, rgb(), hsl() ou um nome de cor CSS, ou use os seletores de cor.
2. Visualize a proporção de contraste e os resultados de aprovação/reprovação para conformidade com WCAG AA e AAA em texto normal, texto grande e componentes de interface.
3. Se o contraste reprovar, use os ajustes de cor sugeridos para encontrar a combinação de cores acessível mais próxima.

Quando usar

• Auditar cores de marca contra fundo branco ou escuro antes de publicar uma landing page.
• Definir estados acessíveis de botão (padrão, hover, desativado).
• Conferir placeholders e campos desabilitados, que costumam cair abaixo de 4,5:1.

Resultado

Um designer de UI verifica o azul da marca #3B82F6 sobre branco #FFFFFF — a proporção de 4,5:1 passa no AA para texto grande, mas reprova no AAA para texto normal. Ele escurece para #2563EB (5,3:1) para passar em ambos.

Perguntas frequentes

Qual razão preciso para texto comum passar no WCAG AA?

4,5:1 em relação ao fundo. Texto grande (18pt regular ou 14pt em negrito ou maior) cai para 3:1. O AAA sobe para 7:1 e 4,5:1, respectivamente. Componentes de UI, como bordas de input, precisam apenas de 3:1.

Por que meu cinza escuro sobre branco reprova se a mim parece bom?

Percepção pessoal e medição se separam depressa. 4:1 fica nítido em monitor calibrado e boa luz, mas falha com baixa visão, reflexo ou telas antigas. O WCAG define o piso pelo pior caso, não pelo melhor.

Ícones e bordas precisam do mesmo contraste do texto?

Não. O WCAG 2.1 incluiu a regra 3:1 para componentes não textuais — bordas, ícones, indicadores de foco, elementos de gráfico. Imagens decorativas estão isentas, mas tudo que comunica informação precisa de pelo menos 3:1 em relação às cores vizinhas.

Como conserto uma combinação que reprova sem mexer na marca?

Se a cor da marca é fixa, ajuste o fundo. Escureça-o ou clareie-o até bater a razão. O painel aqui move o primeiro plano em passos pequenos; aplique o mesmo raciocínio ao fundo quando necessário.

O WCAG tem regras para texto translúcido ou sobre fotos?

Ele pede que se avalie o pior pixel embaixo do texto. Sobre fotos, costuma significar colocar um véu tonal ou uma placa sólida atrás das palavras. Meça a cor realmente renderizada, não só o hex inicial.

Ferramentas relacionadas