Htmly
Design & Assets

Verificador de Contraste WCAG

Verifique se suas cores atendem aos padrões WCAG AA e AAA de acessibilidade. Teste texto e fundo.

2 usos

Texto grande de exemplo (24px bold)

Texto normal de exemplo (16px). Verifique se este texto e legivel sobre o fundo escolhido. A acessibilidade e essencial para uma boa experiencia do usuario.

Ratio de contraste

21.00:1

Excelente contraste

Resultados WCAG 2.1

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

Como usar o Verificador de Contraste WCAG

  1. 1

    Escolha as cores

    Selecione a cor do texto e a cor do fundo usando os seletores de cor ou digitando o valor hexadecimal.

  2. 2

    Veja o contraste

    O ratio de contraste e os resultados WCAG AA/AAA são calculados automaticamente em tempo real.

  3. 3

    Ajuste até passar

    Se o contraste for insuficiente, use as sugestões de cores alternativas para atingir os padrões de acessibilidade.

O que é contraste WCAG?

O contraste de cores é a diferença de luminosidade entre o texto e o fundo de uma página. As WCAG (Web Content Accessibility Guidelines) definem ratios mínimos de contraste para garantir que pessoas com deficiências visuais, como daltonismo ou baixa visão, consigam ler o conteúdo.

O nível AA exige um ratio mínimo de 4.5:1 para texto normal e 3:1 para texto grande (18px bold ou 24px regular). O nível AAA, mais rigoroso, exige 7:1 para texto normal e 4.5:1 para texto grande. Esses padrões são obrigatórios em muitos países e essenciais para SEO, já que o Google considera acessibilidade como fator de ranqueamento.

Use esta ferramenta para verificar se as combinações de cores do seu site atendem aos padrões WCAG antes de publicar. Todo o processamento é feito no seu navegador — nenhum dado é enviado para servidores externos.

Perguntas frequentes

Qual o ratio mínimo de contraste para acessibilidade?
O WCAG AA exige 4.5:1 para texto normal e 3:1 para texto grande. O WCAG AAA exige 7:1 para texto normal e 4.5:1 para texto grande.
O que conta como texto grande no WCAG?
Texto grande é definido como 18pt (24px) regular ou 14pt (18.66px) em negrito. Texto grande tem requisitos de contraste menores porque é mais fácil de ler.
A ferramenta é gratuita?
Sim, o verificador de contraste é 100% gratuito, sem limites de uso e sem necessidade de cadastro.
Como funciona o cálculo de contraste?
O cálculo segue a fórmula WCAG 2.1: converte as cores sRGB para luminância relativa e calcula o ratio entre a cor mais clara e a mais escura, resultando em um valor entre 1:1 (sem contraste) e 21:1 (contraste máximo, preto sobre branco).

Publique seu site HTML em 30 segundos

Publicar agora