AbstractPrisma
Acessibilidade

Verificador de Contraste de Acessibilidade

Verifique se as cores do texto e do fundo atendem aos requisitos de contraste WCAG AA e AAA.

Cores

Razão de contraste

Razão21.0:1
Texto normal AA
Passa
Texto normal AAA
Passa
Texto grande AA
Passa
Texto grande AAA
Passa

Pré-visualização

Texto de exemplo sobre o fundo escolhido

Um pangrama mostra todas as letras com clareza.

Texto de corpo de exemplo em tamanho normal. 0123456789

Qual a razão de contraste mínima para acessibilidade?

A razão de contraste mede a diferença de luminância entre o texto e o fundo. As diretrizes WCAG definem mínimos para que pessoas com baixa visão consigam ler: 4.5:1 para texto normal e 3:1 para texto grande no nível AA. Bom contraste também ajuda na leitura ao sol e melhora a usabilidade para todos.

Mínimos do WCAG

  • Texto normal: 4.5:1 (AA), 7:1 (AAA)
  • Texto grande (18pt+ ou 14pt bold): 3:1 (AA)
  • Componentes de UI e ícones: 3:1
  • Evite cinza claro sobre branco em textos pequenos

AbstractOS

Quer um site acessível de verdade?

Crie no Prisma Studio com boas práticas de contraste e legibilidade desde o início.

Criar app com IA

Esta ferramenta foi útil?

Seja o primeiro a avaliar

Como verificar o contraste de cores

  1. 1

    Defina texto e fundo

    Escolha a cor do texto e a cor de fundo que deseja avaliar.

  2. 2

    Veja a razão de contraste

    A ferramenta mostra a razão e se passa nos níveis WCAG AA e AAA.

  3. 3

    Ajuste até aprovar

    Refine as cores até atingir o contraste mínimo para boa legibilidade.

Perguntas frequentes

O que é a razão de contraste WCAG?

É a relação entre a luminância do texto e do fundo. O WCAG recomenda no mínimo 4,5:1 para texto normal (AA).

Qual a diferença entre AA e AAA?

AA exige 4,5:1 (texto normal) e AAA exige 7:1, um padrão de acessibilidade mais rigoroso.

Por que o contraste importa para SEO?

Boa acessibilidade melhora a experiência do usuário, sinal indireto valorizado pelos buscadores.

O uso básico é gratuito?

Sim. A ferramenta oferece uso básico gratuito para testar o fluxo principal e obter o resultado essencial. Exportações avançadas, relatórios completos, lotes ou recursos conectados ao Studio podem exigir liberação. Assinantes pagos não passam por bloqueios de exportação quando o recurso faz parte do plano.

Preciso criar conta para ver o resultado?

O resultado principal fica disponível no fluxo público da ferramenta. Em alguns casos, como relatórios, downloads avançados, conversões extras ou kits completos, a liberação pode pedir um contato ou uma ação rápida. Essa regra evita prometer ausência de cadastro onde há lead gate.

Verificador de contraste para acessibilidade web e WCAG 2.1

Garanta design inclusivo e teste de legibilidade com o nosso verificador de contraste online. Verifique se as combinações de texto e fundo cumprem os critérios WCAG 2.1 (AA e AAA) para texto normal e grande. Essencial para designers e developers frontend que querem sites acessíveis a todos os usuários.

Por que usar esta ferramenta

  • Teste de contraste de cores em tempo real — resultado instantâneo
  • Conformidade WCAG 2.1 — AA e AAA para texto normal e grande
  • Design inclusivo — indicadores Pass/Fail por critério
  • Acessibilidade web sem ferramentas pagas — 100% gratuito
  • Pré-visualização do par de cores com texto de exemplo
  • Ideal para design systems e revisão de interfaces

Como usar

  1. Selecione a cor do texto (foreground) e a cor de fundo (background)
  2. Consulte o razão de contraste e os badges AA/AAA na lateral
  3. Ajuste as cores até obter Pass em todos os níveis desejados
  4. Use a área de pré-visualização para validar a legibilidade na prática

Perguntas frequentes

O que é WCAG 2.1 e por que o contraste importa?
WCAG 2.1 são as diretrizes de acessibilidade web. O contraste de cores garante que texto e fundo tenham diferença suficiente para leitura por pessoas com baixa visão ou em condições de luz variáveis. AA (4.5:1 texto normal) e AAA (7:1) são os níveis mais usados.
A ferramenta é adequada para design inclusivo?
Sim. O teste de legibilidade aqui disponível segue os métodos oficiais de cálculo de luminância relativa e razão de contraste. Use para validar paletas antes de implementar em produção e garantir que a sua interface seja acessível.
Preciso de cadastro ou instalação?
Não. O verificador funciona no navegador, sem envio de dados. Basta escolher as cores e ver os resultados — ideal para uso rápido em projetos de design e desenvolvimento frontend.