Conversor Gratuito

Contraste de Cor Verificador (WCAG)

Verifique a relação de contraste entre duas cores para conformidade com acessibilidade WCAG AA e AAA. Gratuito, instantâneo e totalmente no navegador.

Texto de Exemplo — Tamanho Normal

Texto pequeno de exemplo — 14px

Relação de Contraste:21.00:1
WCAG AATexto NormalAprovado
WCAG AATexto GrandeAprovado
WCAG AAATexto NormalAprovado
WCAG AAATexto GrandeAprovado

Sobre esta ferramenta

Verifique as taxas de contraste de cores entre o texto de primeiro plano e as cores de fundo de acordo com as diretrizes de acessibilidade WCAG 2.1. Insira cores como códigos hexadecimais, valores RGB ou valores HSL e veja instantaneamente a taxa de contraste junto com os resultados de aprovação/reprovação para conformidade com WCAG AA e AAA em tamanhos de texto normais e grandes.

Como usar

  1. Insira ou escolha a cor do primeiro plano (texto) usando o seletor de cores ou entrada hexadecimal.
  2. Insira ou escolha sua cor de fundo.
  3. Veja a taxa de contraste e os resultados de aprovação/reprovação WCAG 2.1 AA/AAA instantaneamente.
  4. Ajuste as cores até atingir o nível de conformidade desejado.

Perguntas frequentes

Qual taxa de contraste é necessária para conformidade com as WCAG?
WCAG AA requer 4,5:1 para texto normal e 3:1 para texto grande (18pt+ ou 14pt+ negrito). WCAG AAA requer 7:1 para texto normal e 4,5:1 para texto grande. A proporção máxima possível é 21:1 (preto sobre branco).
Por que o contraste das cores é importante?
O contraste suficiente garante que o texto seja legível para usuários com baixa visão, daltonismo ou que visualizam telas sob luz solar intensa. É também um requisito legal de acordo com os regulamentos de acessibilidade da ADA e da UE para muitos sites.
O que é considerado 'texto grande' nas WCAG?
Texto grande é definido como 18pt (24px) e superior para peso normal, ou 14pt (18,66px) e superior para texto em negrito. Texto grande exige menos contraste porque é inerentemente mais fácil de ler.
Esta ferramenta verifica o contraste de elementos não textuais?
WCAG 2.1 requer uma taxa de contraste de 3:1 para componentes de UI e objetos gráficos (botões, ícones, campos de formulário). Você também pode usar esta ferramenta para verificá-los – basta inserir o componente e as cores de fundo.