Desenvolvedor 🔒 Roda no seu navegador — nenhum dado é enviado

Verificador de Contraste de Cores

Meça a relação de contraste WCAG de qualquer par de texto e fundo e encontre um tom aprovado quando ele não atingir o mínimo.

Cor de entrada

Seletor:

Digite uma cor para converter...

Como Usar

Informe a cor do texto no campo de cor principal, em HEX, RGB, HSL ou como nome de cor CSS.
Na aba “Contraste”, defina a cor de fundo com o seletor ou digitando um código.
Leia a relação de contraste e os veredictos AA e AAA para texto normal e texto grande.
Se uma verificação falhar, use o tom sugerido do mesmo matiz que chega a 4,5:1.

Perguntas Frequentes

Qual relação de contraste a WCAG exige?

O nível AA exige 4,5:1 para texto normal e 3:1 para texto grande e para ícones e outros gráficos de interface com significado. O nível AAA exige 7:1 para texto normal e 4,5:1 para texto grande.

O que conta como texto grande?

Texto com pelo menos 18 pontos (24 pixels CSS), ou pelo menos 14 pontos (cerca de 18,7 pixels CSS) quando está em negrito.

Como a relação de contraste é calculada?

A luminância relativa de cada cor é calculada a partir dos canais sRGB, e a relação é (mais clara + 0,05) dividido por (mais escura + 0,05). Ela vai de 1:1 para cores idênticas até 21:1 para preto sobre branco.

E as cores semitransparentes?

Uma cor de texto translúcida é primeiro combinada com o fundo, e então a cor sólida resultante é medida, porque é isso que o leitor realmente vê.

Verificar o contraste de cores segundo a WCAG

Atualizado em 24 de setembro de 2026 · Por Saman

Texto com pouco contraste é uma das falhas de acessibilidade mais comuns na web. Ele afeta pessoas com baixa visão e com diferenças na percepção de cores, mas também qualquer pessoa lendo o celular sob o sol. As Diretrizes de Acessibilidade para Conteúdo Web (WCAG) transformam “legível o suficiente” em um número: a relação de contraste.

Esta página abre o Conversor de Cores na aba Contraste.

Os limites da WCAG em resumo

O que você está verificando	AA	AAA
Texto corrido e rótulos	4,5:1	7:1
Texto grande (24px, ou 18,7px em negrito)	3:1	4,5:1
Ícones, bordas de campos, anéis de foco e elementos de gráficos	3:1	—

AA é o nível citado pela maioria das leis e regras de compras públicas. O AAA é mais rigoroso e vale como meta em textos longos, mas não se espera que todo elemento de um site chegue a ele.

Corrigindo uma cor que não passa

Quando um par não atinge o mínimo, o verificador propõe o tom mais próximo do mesmo matiz que chega a 4,5:1 contra o seu fundo, para você manter a cor da marca reconhecível e ainda deixar o texto legível. As correções típicas são escurecer a cor do texto em 10 a 20 pontos de luminosidade, ou manter a cor da marca em títulos grandes e botões e usar uma variante mais escura em textos pequenos.

Erros comuns

Texto de placeholder cinza que parece elegante, mas fica muito abaixo de 4,5:1.
Texto branco sobre cores de marca vibrantes, como laranja, amarelo ou verde-claro.
Verificar só o tema claro: o modo escuro precisa da sua própria verificação.
Texto sobre imagens: meça contra a área mais clara em que o texto pode ficar, ou adicione uma camada escura por trás dele.

A fórmula por trás da relação

Cada canal sRGB é escalado para 0–1 e linearizado, e depois combinado como 0,2126 R + 0,7152 G + 0,0722 B para obter a luminância relativa. A relação é (L1 + 0,05) / (L2 + 0,05), sendo L1 a cor mais clara. O verde domina porque o olho é mais sensível a ele, e é por isso que amarelo sobre branco se sai tão mal. Para preparar cores para o teste, converta-as com HEX para RGB ou ajuste a luminosidade com HEX para HSL.