DevToolPal
PT

Verificador de contraste de cores (WCAG)

Verifique a razão de contraste WCAG 2.x entre a cor do texto e a do fundo, com aprovação AA e AAA para texto normal, texto grande e interface, pré-visualização ao vivo e a cor aprovada mais próxima.

Roda localmente, nada é enviado

Cores

Cor do texto
Cor de fundo

Cores transparentes são misturadas antes: o texto sobre o fundo e o fundo sobre branco.

Pré-visualização

Texto grande

O texto do corpo deve ser fácil de ler para todos, inclusive pessoas com baixa visão ou com a tela escura.

Botão

Razão de contraste

—

Cores aprovadas mais próximas

O que faz

O verificador de contraste informa se a cor de um texto é legível sobre uma cor de fundo segundo as Diretrizes de Acessibilidade para Conteúdo Web (WCAG 2.x). Digite qualquer cor CSS para o texto e o fundo — HEX, rgb(), hsl(), um nome de cor ou uma cor transparente — e veja a razão de contraste, a aprovação em cada critério AA e AAA e uma pré-visualização ao vivo. Quando o par é reprovado, ele sugere as cores de texto e de fundo aprovadas mais próximas, mantendo a mesma matiz. Tudo roda no seu navegador.

Como usar

  1. Digite ou escolha a Cor do texto e a Cor de fundo. Inverter troca as duas.
  2. Leia a Razão de contraste e a lista de aprovação para texto normal, texto grande e componentes de interface.
  3. Se algum nível for reprovado, veja Cores aprovadas mais próximas: cada sugestão mostra a nova cor, sua razão, um botão de copiar e Usar para aplicá-la.
  4. Ative o APCA para ver também o contraste de luminosidade (Lc) do rascunho da WCAG 3.

Cores semitransparentes são misturadas antes da verificação: o texto sobre o fundo e o fundo sobre branco.

Exemplo

#767676 on #ffffff  →  4.54:1  passes AA normal text
#777777 on #ffffff  →  4.47:1  fails AA normal text, passes AA large text
#000000 on #ffffff  →  21:1    the maximum

Como a razão é calculada

A luminância relativa de cada cor é calculada a partir dos canais sRGB (linearizados e ponderados em 21% vermelho, 72% verde e 7% azul). A razão é (mais clara + 0,05) / (mais escura + 0,05), indo de 1:1 para cores idênticas a 21:1 para preto sobre branco. Só a luminosidade importa, não a matiz: vermelho puro sobre verde puro parece vibrante, mas fica em cerca de 1,3:1.

As sugestões mudam apenas a luminosidade da cor (em HSL) e escolhem a direção, mais escura ou mais clara, que exige a menor mudança. Às vezes nenhum tom chega lá: num fundo cinza médio nenhuma cor de texto alcança 7:1.

Perguntas frequentes

› Qual razão de contraste eu preciso?

O nível AA da WCAG 2.x pede pelo menos 4,5:1 para texto normal e 3:1 para texto grande e para componentes de interface como bordas de campos, ícones e anéis de foco. O nível AAA pede 7:1 para texto normal e 4,5:1 para texto grande. A maioria das leis e políticas usa o nível AA como referência.

› O que conta como texto grande?

Texto com pelo menos 24px (18pt) em peso normal, ou pelo menos 18,66px (14pt) em negrito. Qualquer coisa menor é texto normal e precisa da razão mais alta.

› Por que 4,49:1 é reprovado?

Os limites da WCAG são exatos: uma razão de 4,499 não atinge 4,5. Por isso este verificador trunca a razão exibida em vez de arredondá-la para cima, e decide a aprovação pelo valor exato.

› O que é APCA?

APCA (Accessible Perceptual Contrast Algorithm) é o método de contraste proposto no rascunho da WCAG 3. Ele dá um valor de contraste de luminosidade Lc que depende de qual cor é o texto e funciona melhor no modo escuro. Ainda não é uma norma legal, então aparece aqui só como orientação extra.