Verificador de contraste de cores

Veja se a cor do seu texto fica legível sobre o fundo. Digite as duas cores e veja a taxa de contraste WCAG, se passa ou não e uma prévia ao vivo.

Grátis e privado. Tudo funciona no seu navegador e nada é enviado.

Como funciona

  1. Digite a corDigite ou cole o valor no campo de entrada.
  2. Copie o resultadoO valor convertido fica no topo da lista.
  3. Explore maisOutros formatos, contraste e tons ficam logo abaixo.

Legível para todo mundo

Cerca de um em cada doze homens tem algum tipo de deficiência na visão de cores, e muito mais gente lê telas sob sol forte ou com a vista cansada pela idade. Por isso as Diretrizes de Acessibilidade para Conteúdo Web definem taxas mínimas de contraste: 4,5:1 para texto normal e 3:1 para texto grande e elementos da interface no nível AA, 7:1 e 4,5:1 no nível AAA.

A taxa é calculada a partir da luminância relativa das duas cores, exatamente como o WCAG 2 define. Use Inverter para testar texto claro sobre fundo escuro e vice-versa, e escolha um tom mais escuro ou mais claro na paleta até o resultado passar.

Cores transparentes

Se a cor do texto tiver transparência, ela é misturada com o fundo antes, então a taxa corresponde ao que as pessoas realmente veem.

Perguntas frequentes

O que conta como texto grande?

No mínimo 24 px em peso normal ou cerca de 19 px em negrito. Texto grande precisa de uma taxa de 3:1 para o AA.

Quais formatos de cor posso digitar?

Qualquer valor válido em CSS: HEX com 3, 4, 6 ou 8 dígitos, rgb(), hsl(), hwb(), lab(), oklch() e nomes de cores.

O valor CMYK é exato para impressão?

É uma conversão simples, sem perfil de impressão. Para impressão profissional, use os valores CMYK do perfil da sua gráfica.

Qual taxa de contraste eu preciso?

O WCAG AA pede 4,5:1 para texto normal e 3:1 para texto grande e elementos da interface.

Por que o OKLCH importa?

Ele acompanha a forma como as pessoas enxergam a luminosidade, então paletas e degradês feitos em OKLCH ficam uniformes.