InícioFerramentas de DesignVerificador de Contraste

Verificador de Contraste

O verificador de contraste calcula a razão de contraste WCAG 2.1 entre uma cor de texto e uma cor de fundo e mostra se a combinação passa nos níveis AA e AAA para texto normal e grande.

The quick brown fox
Small text sample — 14px regular weight

Sobre esta ferramenta

O verificador de contraste calcula a razão de contraste WCAG 2.1 entre uma cor de texto e uma cor de fundo e mostra se a combinação passa nos níveis AA e AAA para texto normal e grande.

Como usar

  1. Digite ou escolha a cor do texto.
  2. Digite ou escolha a cor de fundo (valores hex funcionam, inclusive a forma abreviada de 3 dígitos).
  3. Veja a razão de contraste e os resultados AA/AAA para texto normal e grande.
  4. Ajuste qualquer uma das cores até passar no nível de que você precisa.

Bom saber

  • O WCAG 2.1 AA exige uma razão de contraste de pelo menos 4.5:1 para texto normal e 3:1 para texto grande.
  • O WCAG 2.1 AAA exige pelo menos 7:1 para texto normal e 4.5:1 para texto grande.
  • Texto grande significa pelo menos 18 pt (24 px) em peso normal ou 14 pt (cerca de 18.66 px) em negrito.
  • As razões de contraste vão de 1:1 (cores idênticas) a 21:1 (preto sobre branco).
  • A razão é calculada a partir da luminância relativa de cada cor, conforme a fórmula do WCAG.

Funciona inteiramente no seu navegador — nada do que você digita é enviado ou armazenado.

Perguntas frequentes

Qual razão de contraste é exigida para acessibilidade?

Para o WCAG 2.1 nível AA, texto normal precisa de pelo menos 4.5:1 e texto grande de pelo menos 3:1. O nível AAA eleva isso para 7:1 e 4.5:1.

Texto branco sobre verde é acessível?

Depende do tom. Muitos verdes vibrantes falham no AA com texto branco; verdes mais escuros costumam passar. Digite seus valores hex exatos para conferir.

O que conta como texto grande no WCAG?

Texto com pelo menos 18 pontos (24 px) em peso normal, ou pelo menos 14 pontos (cerca de 18.66 px) em negrito.

O contraste do WCAG se aplica a botões e ícones?

O critério de sucesso 1.4.11 do WCAG 2.1 pede contraste de pelo menos 3:1 para componentes de interface e gráficos significativos em relação ao que está ao redor.