Sem upload, 100% local, sem conta

Verificador de contraste WCAG

Digite ou escolha duas cores e veja a relação de contraste WCAG na hora, com selos de aprovação AA/AAA para texto normal e grande.

Como o Verificador de contraste funciona

Esta ferramenta calcula a razão de contraste WCAG entre duas cores e mostra se o par atinge o nível AA ou AAA para texto normal, texto grande e componentes de interface não textuais. Tudo é calculado localmente no seu navegador; as cores digitadas nunca são enviadas.

Escrito por Bastien Sulyan

Como usar o Verificador de contraste, passo a passo

  1. Digite ou escolha a cor de primeiro plano (texto).
  2. Digite ou escolha a cor de fundo.
  3. Leia a razão de contraste e os selos AA/AAA para texto normal, texto grande e componentes de interface não textuais.
  4. Use Trocar cores para verificar o par no sentido inverso.

Casos de uso comuns

  • Verificar a cor primária de uma marca contra branco ou preto antes de lançar um componente de botão.
  • Verificar se um texto de corpo em cinza suave ainda passa no AA sobre um fundo claro de cartão.
  • Confirmar se a cor de um link dentro de um parágrafo atinge o limite de 4,5:1 para texto normal.
  • Testar se um título grande e de peso mais leve ainda passa no limite mais flexível de 3:1 para texto grande.

Perguntas frequentes

Esta ferramenta envia minhas cores para um servidor?

Não, o cálculo é feito inteiramente no seu navegador com JavaScript; nada do que você digita é enviado.

Qual razão de contraste eu preciso para AA ou AAA?

A WCAG 2.x exige 4,5:1 para AA em texto normal, 7:1 para AAA em texto normal, 3:1 para AA em texto grande e 4,5:1 para AAA em texto grande.

O que conta como texto grande?

Pelo menos 24px (18pt) em peso normal, ou cerca de 18,7px (14pt) em negrito; qualquer texto menor usa os limites de texto normal.

Por que trocar o primeiro plano e o fundo não muda a razão de contraste?

A fórmula da razão é simétrica: ela só compara a luminância mais clara e a mais escura, não qual cor é usada para o texto. Trocar ainda é útil porque mostra se o par também funciona com os papéis invertidos, por exemplo texto escuro sobre um chip claro versus texto claro sobre um chip escuro.

Passar no AA garante que meu design é acessível?

Não. Contraste é um critério de sucesso da WCAG entre muitos outros. A escolha de cores para pessoas com deficiência de visão de cores, a visibilidade do foco, o redimensionamento de texto e a navegação por teclado são verificações separadas; o simulador de daltonismo deste site cobre uma delas.

Esta é uma ferramenta oficial do W3C ou da WebAIM?

Não. Ela implementa de forma independente a fórmula pública de contraste da WCAG 2.x e não tem afiliação com o W3C ou qualquer outra organização de acessibilidade.

Ferramentas relacionadas

Mantenha tudo local, explore ferramentas complementares.

Todas as ferramentas de desenvolvedor