Verificador de Contraste WCAG
Acessibilidade deixou de ser opcional. Em vários países, há obrigações legais claras em relação ao contraste de cores na web, e ignorar isso pode resultar em processos. Esta ferramenta te diz na hora se sua combinação passa ou falha — e o quanto você está longe do limite.
Escolha a cor do texto e a cor de fundo, e em segundos você tem os resultados para os níveis AA e AAA.
Taxa de Contraste
21:1
Texto Grande (18pt+)
O texto normal aparece assim. A rápida raposa marrom salta sobre o cachorro preguiçoso.
Conformidade WCAG 2.1
AA - Texto Normal
Taxa mínima de 4.5:1 necessária
AA - Texto Grande
Taxa mínima de 3:1 necessária
AAA - Texto Normal
Taxa mínima de 7:1 necessária
AAA - Texto Grande
Taxa mínima de 4.5:1 necessária
O que são os padrões de contraste WCAG
As Diretrizes de Acessibilidade para Conteúdo Web (WCAG) definem razões de contraste mínimas para que o texto seja legível por pessoas com deficiência visual. Não é burocracia à toa: cerca de 1 em cada 12 homens e 1 em cada 200 mulheres têm algum tipo de daltonismo. Além disso, muita gente tem baixa visão e simplesmente não consegue ler texto com pouco contraste.
Como funcionam as razões de contraste
A razão de contraste compara o brilho relativo de duas cores. A escala vai de 1:1 (sem contraste nenhum, mesma cor) até 21:1 (contraste máximo, preto puro sobre branco puro). Quanto maior o número, mais fácil de ler.
Os níveis WCAG na prática
Nível AA (o padrão mais comum)
É o que a maioria dos sites precisa atingir. Requisitos:
- Texto normal: razão mínima de 4,5:1
- Texto grande (18pt ou mais, ou 14pt em negrito): razão mínima de 3:1
Nível AAA (o nível reforçado)
Exigências mais rígidas para acessibilidade máxima:
- Texto normal: razão mínima de 7:1
- Texto grande: razão mínima de 4,5:1
Erros comuns que essa ferramenta detecta
Texto cinza claro sobre fundo branco
Designers adoram cinza suave pelo visual clean, mas #999999 sobre branco reprova no nível AA. Você precisa de pelo menos #767676 sobre branco para passar. Para o corpo do texto, quanto mais escuro, melhor.
Cores da marca que não funcionam como texto
O amarelo vibrante ou o verde limão do seu branding podem ficar incríveis no logo, mas como texto sobre fundo branco ficam ilegíveis. É um dos erros mais frequentes — e geralmente o último a ser apontado.
Texto sobre imagens
Texto branco em cima de foto perde contraste nas áreas mais claras da imagem. Esta ferramenta ajuda você a escolher uma cor de sobreposição que mantém a leitura fácil em qualquer parte da foto.
Texto de placeholder em formulários
Os placeholders costumam ser de um cinza bem pálido. Ainda existe debate sobre se o WCAG se aplica explicitamente a eles, mas deixá-los legíveis é uma boa prática de UX.
Como corrigir cores que reprovam
Se sua combinação não passou, você tem algumas saídas simples:
- Escureça o texto claro — às vezes poucos pontos de luminosidade já resolvem
- Clareia o fundo escuro — mesmo lógica, direção contrária
- Aumente o tamanho da fonte — texto grande tem exigências menores
- Adicione uma camada de contraste — para texto sobre foto, um fundo semitransparente resolve sem mexer no design
Obrigações legais
Vários países exigem conformidade com o WCAG:
- EUA — a ADA e a Seção 508 fazem referência direta ao WCAG
- UE — a EN 301 549 exige WCAG 2.1 AA
- Reino Unido — sites do setor público precisam atender ao WCAG 2.1 AA
Mesmo sem lei que obrigue, seguir o WCAG reduz seu risco legal e torna o site acessível para muito mais gente. Vale a pena por todos os ângulos.
Perguntas sobre o verificador de contraste
Ferramentas similares para explorar
Extrator de Paleta de Cores
Achou uma imagem com aquela combinação de cores perfeita? Suba ela aqui e pegue os códigos HEX e RGB exatos para usar no seu projeto.
Extrair CoresConversor CSV para TSV
Converta seus arquivos CSV para TSV em poucos segundos. Envie o arquivo, baixe o resultado com tabulacoes e pronto.
Converter para TSVGerador de Ideias para Desenhar
Sem saber o que desenhar hoje? Gere uma ideia aleatória, filtre por dificuldade e estilo, e saia do branco rapidinho.
Gerar ideia para desenharCalculadora ABV para Cerveja Artesanal
Coloca a densidade original e a densidade final para calcular o teor alcoólico, a atenuação aparente, as calorias estimadas e o amargor IBU do seu hopping.
Calcular brassagemCalculadora de Juros Simples
Descubra em segundos quanto você vai ganhar de juros na poupança ou quanto vai pagar num empréstimo. Sem complicação, sem enrolação.
Calcular JurosGerador de Email de Negociação Salarial
Escreva um email de negociacao salarial que funciona de verdade, com ajuda da IA. Peca o aumento que voce merece, sem enrolacao.
Gerar Email