nicetool.dev logo

Verificador de contraste

Escolha ou digite duas cores (HEX, RGB, HSL ou nomes). Os resultados mudam enquanto você digita.

Razão de contraste

4.83:1

Título em texto grande

Texto normal de 16px fica assim.

Letra miúda e legendas em 14px.

Botão
  • AA texto normal ≥ 4.5:1 Aprovado
  • AA texto grande (24px, ou 18,66px em negrito) ≥ 3:1 Aprovado
  • AAA texto normal ≥ 7:1 Reprovado
  • AAA texto grande ≥ 4.5:1 Aprovado
  • Componentes de interface e gráficos ≥ 3:1 Aprovado

O que é contraste de cores e por que importa?

A razão de contraste mede a diferença de brilho percebido entre duas cores, de 1:1 (iguais) a 21:1 (preto no branco). As diretrizes WCAG 2.2 exigem no mínimo 4,5:1 para texto normal e 3:1 para texto grande e elementos de interface no nível AA, e 7:1 e 4,5:1 no nível AAA. Cerca de um em cada doze homens tem alguma deficiência na visão de cores e muita gente lê no celular sob sol forte, então texto de baixo contraste exclui usuários reais. Leis como a Lei Europeia de Acessibilidade, a ADA e a LBI no Brasil remetem à WCAG, o que torna o contraste uma exigência legal para muitos sites.

Recursos

  • • Razão de contraste com resultados WCAG 2.2 AA e AAA para texto e interface
  • • Aceita HEX, RGB, HSL, OKLCH e nomes de cor CSS, além de seletores
  • • Mistura cores transparentes como o navegador faz
  • • Prévia ao vivo com título, texto, letra miúda e um botão
  • • Sugere a cor mais próxima que passa, alterando só o brilho

Instantâneo e privado

Todos os cálculos rodam no navegador. As cores de designs ainda não lançados não são enviadas a lugar nenhum.

Fórmula WCAG 2.2, 100% no cliente.

Como usar: Verificador de contraste

  1. 1

    Informe a cor do texto e a do fundo digitando qualquer cor CSS (#1e293b, rgb(), hsl(), oklch() ou um nome) ou usando os seletores de cor.

  2. 2

    Leia a razão de contraste. O resultado é truncado, não arredondado para cima, então 4,49:1 nunca aparece como aprovado.

  3. 3

    Confira os cinco resultados WCAG: AA e AAA para texto normal e grande, mais 3:1 para componentes como bordas de campos, ícones e anéis de foco.

  4. 4

    Se algum reprovar, veja a cor sugerida com o mesmo tom e brilho ajustado e clique em Usar, ou inverta as cores para testar a combinação contrária.

Exemplos práticos

Texto placeholder cinza

O gray-400 do Tailwind (#9ca3af) sobre branco chega só a 2,5:1 e reprova no AA. O gray-500 (#6b7280) alcança 4,8:1 e serve para texto corrido.

Cor da marca em botões

Um azul de marca claro pode passar em rótulos grandes de botão (3:1) mas reprovar em texto pequeno. Verifique os dois ou escureça o fundo até o texto branco chegar a 4,5:1.

Paletas de modo escuro

Branco puro sobre preto puro (21:1) pode cansar a vista. Teste pares mais suaves como #e2e8f0 sobre #0f172a, que ainda superam o AAA com cerca de 14:1.

Bordas de formulário e ícones

O critério WCAG 1.4.11 pede 3:1 para a borda de campos e ícones com significado. Uma borda #e5e7eb sobre branco fica muito abaixo e os campos ficam difíceis de achar.

Perguntas frequentes

O que conta como texto grande?+

Na WCAG, texto com pelo menos 18 pt (24px) normal ou 14 pt (cerca de 18,66px) em negrito. Texto grande só precisa de 3:1 no AA porque traços grossos são mais legíveis.

Preciso de AA ou AAA?+

O AA é a meta legal padrão para a maioria dos sites e apps. O AAA é mais rígido e recomendado para leitura longa, serviços públicos e pessoas com baixa visão.

O contraste vale para logotipos e botões desativados?+

Não. A WCAG isenta logotipos, imagens decorativas e controles inativos (disabled). Texto placeholder, links e indicadores de foco estão incluídos.

E o APCA e a WCAG 3?+

O APCA é um modelo de contraste mais novo proposto para a futura WCAG 3. Ainda é rascunho, então as razões da WCAG 2.2 continuam sendo a exigência de leis e auditorias.