Orbitautil
Design

Verificador de contraste de cores

Verifique o contraste entre texto e fundo seguindo as diretrizes WCAG. Veja se sua combinação atende aos níveis AA e AAA.

Processamento local no navegador

Como usar

  • Escolha a cor do texto.
  • Escolha a cor do fundo.
  • Veja o resultado e sugestões.

Escolha as cores

Preview

Título de exemplo

Este é um texto de exemplo para verificar a legibilidade da combinação de cores selecionada. Quanto maior o contraste, melhor a acessibilidade.

Link de exemplo

Resultado da análise

12.63 Relação de contraste
AA Texto normal (4.5:1) Passa
AA Texto grande (3:1) Passa
AAA Texto normal (7:1) Passa
AAA Texto grande (4.5:1) Passa

Sugestões de ajuste

A combinação atual passa na maioria dos níveis de acessibilidade.

O que é contraste WCAG?

A WCAG (Web Content Accessibility Guidelines) define níveis mínimos de contraste entre texto e fundo para garantir que o conteúdo seja legível por pessoas com baixa visão ou daltonismo.

  • AA Normal: mínimo 4.5:1 para texto menor que 18px ou 14px bold
  • AA Grande: mínimo 3:1 para texto maior ou 18px+ (ou 14px bold)
  • AAA Normal: mínimo 7:1 para o nível mais alto de acessibilidade
  • AAA Grande: mínimo 4.5:1 para texto grande
Ferramentas relacionadas

Ferramentas relacionadas

Continue com ferramentas e guias que ajudam a concluir a próxima etapa.

Ferramenta

QR Code colorido

Crie QR Code colorido com estilos de pontos, cantos, margem e fundo transparente. Baixe em PNG ou SVG.

Ferramenta

Gerador de Paleta de Cores Online

Crie paletas de cores com combinações complementares, análogas, triádicas e monocromáticas. Copie HEX, RGB, HSL e variáveis CSS.

Ferramenta

Gerador de Gradiente CSS Online

Crie gradientes CSS lineares e radiais, ajuste cores, posições e ângulo. Copie o código CSS pronto.

O que ela faz

Ferramenta para designers e desenvolvedores que querem garantir acessibilidade em suas interfaces.

Exemplo: texto #1f2937 em fundo #ffffff tem contraste de 12.63:1, passando em AAA.

Como funciona

  • Calcula luminância relativa de cada cor.
  • Deriva a relação de contraste segundo WCAG 2.1.
  • Indica nível AA e AAA para texto normal e grande.

Limitações

  • Não considera outros fatores de acessibilidade.
  • Testes em dispositivos reais podem variar.
  • Não substitui avaliação de usuário.

Quando usar

  • Verificar acessibilidade de sites.
  • Validar paletas de design.
  • Revisar combinações de cores.

Perguntas frequentes

O que é WCAG?

Web Content Accessibility Guidelines. São diretrizes internacionais para acessibilidade em conteúdo web.

Qual a diferença entre AA e AAA?

AA é o nível mínimo recomendado (4.5:1 para texto normal). AAA é o nível mais alto (7:1).

Texto grande tem requisitos diferentes?

Sim. Para texto 18px+ (ou 14px bold), o mínimo é 3:1 para AA.

Posso testar uma imagem?

Não diretamente. Escolha cores manualmente ou use o conta-gotas de um screenshot.