Verificador de contraste de cores

Confira as cores de texto e de fundo com as razões de contraste do WCAG 2.1 e use o APCA Lc como segunda opinião.

Como verificar o contraste de cores

  1. Informe a cor do texto e a cor do fundo. Use o seletor de cores ou digite um código hex com 3 ou 6 dígitos.
  2. Leia a razão de contraste e o resultado de aprovado ou reprovado para texto pequeno (AA e AAA), texto grande (AA) e componentes de interface, como ícones e bordas.
  3. Confira o valor Lc do APCA como segunda opinião. Ele descreve como o texto é lido e é uma orientação, não um aprovado ou reprovado.
  4. Se o par não atender, use Corrigir contraste para levar a cor do texto à luminosidade mais próxima que chega a 4.5:1, ou troque as cores para testar o inverso. A prévia ao vivo mostra o par em um título, em texto de corpo e em botões.

O que você pode fazer

  • Razão de contraste WCAG 2.1

    Veja a razão exata e os resultados AA e AAA para texto normal, texto grande e elementos de interface que não são texto.

  • APCA Lc

    Veja o contraste de luminosidade APCA com uma indicação de uso em linguagem simples, de "Ideal para texto de corpo" até "Não legível".

  • Correção automática

    Ajuste uma cor de texto que não atende até a luminosidade mais próxima que alcança AA com 4.5:1.

  • Prévia ao vivo

    Veja seu par em um título, em texto corrido e em botões antes de decidir.

  • Orientação em linguagem simples

    Uma nota curta explica o que o resultado significa para texto de corpo e para texto grande.

Perguntas frequentes

Como verificar o contraste de cores?

Informe a cor do texto e a cor do fundo no verificador. Ele calcula a razão de contraste WCAG e mostra se o par atende AA e AAA para texto pequeno, texto grande e componentes de interface. Você pode digitar códigos hex ou usar os seletores de cores.

Qual razão de contraste a WCAG exige?

O nível AA da WCAG 2.1 exige pelo menos 4.5:1 para texto normal e 3:1 para texto grande e para componentes de interface, como bordas de campos e ícones. O nível AAA exige 7:1 para texto normal e 4.5:1 para texto grande.

O que é considerado texto grande na WCAG?

Texto com 24 pixels CSS (18 pontos) ou mais, ou com 18.66 pixels (14 pontos) ou mais quando está em negrito. O texto grande exige uma razão menor porque letras maiores são mais fáceis de ler.

O que é APCA e devo usar?

O APCA é um método de contraste perceptual dos rascunhos da WCAG 3. Ele retorna um valor Lc, e o verificador considera Lc 75 ou mais adequado para texto de corpo e Lc 45 ou mais como o mínimo para texto grande ou em negrito. As razões da WCAG 2 ainda são o que a maioria dos padrões e auditorias pede, então verifique os dois.

A ordem das duas cores faz diferença no contraste?

Não para a razão WCAG, que é a mesma não importa qual cor seja o texto. Para o APCA faz, porque o resultado depende de qual cor é o texto e qual é o fundo. Use Trocar cores para comparar nos dois sentidos.

Qual é o contraste de preto sobre branco?

É 21:1, a maior razão possível. A menor é 1:1, que é a mesma cor sobre ela mesma.