Verificador de Contraste — Contraste WCAG
Verifique a taxa de contraste entre texto e fundo segundo WCAG AA/AAA e veja o resultado na hora.
Um pequeno jabuti xereta viu dez cegonhas felizes.
Um pequeno jabuti xereta viu dez cegonhas felizes.
Calculado localmente
Seguro para marcas não lançadas
Sem conta
Conexão segura
Como funciona
- 1
Defina a cor do texto
Cole o código HEX do primeiro plano ou escolha na amostra.
- 2
Defina a cor do fundo
Faça o mesmo para o que fica atrás do texto — o fundo real, não branco por padrão.
- 3
Leia o resultado
A razão e a aprovação em cada nível WCAG aparecem juntas, com texto de amostra ao vivo.
Por que usar esta ferramenta
Um número, não uma opinião
Contraste é uma razão medível entre 1:1 e 21:1. A ferramenta calcula, então “pra mim está bom” deixa de ser o argumento decisivo.
Todos os limites de uma vez
AA e AAA, para texto normal e grande, avaliados juntos — você vê na hora para quais usos o par é seguro.
Prévia ao vivo
Texto real renderizado no par que você está testando, para conferir número e aparência lado a lado.
Corrija dentro da ferramenta
Ajuste qualquer uma das cores e a razão se atualiza na hora, então você acha o tom aprovado mais próximo em vez de adivinhar.
Nada é enviado
O cálculo é aritmética no seu navegador — nenhum valor de cor vai para lugar nenhum.
Grátis e sem conta
Sem cadastro, sem limite e sem marca d’água em nada.
O que a razão de contraste realmente mede
A razão compara a luminância relativa de duas cores — quanta luz cada uma reflete ou emite, ponderada pela sensibilidade da visão humana ao vermelho, ao verde e ao azul. Ela vai de 1:1, em que as duas cores são idênticas e o texto fica invisível, até 21:1, que é preto puro sobre branco puro. O ponto decisivo: ela mede diferença de luminosidade, não diferença de matiz. Um vermelho saturado e um verde saturado de luminosidade parecida ficam perto de 1:1 e são quase ilegíveis juntos, ainda que pareçam o mais diferentes possível para quem tem visão de cores típica. É por isso que “essas duas cores contrastam bastante” é um julgamento pouco confiável, e é por isso que a fórmula existe.
Os limites e qual deles se aplica a você
A WCAG define dois níveis de conformidade. O nível AA, que a maioria das organizações e das exigências legais mira, pede 4,5:1 para texto de corpo normal e 3:1 para texto grande — grande significando 18 pontos, ou 14 em negrito. O nível AAA sobe esses valores para 7:1 e 4,5:1 e é realista para o corpo de um site de documentação, mas geralmente não para uma página de marketing guiada pela marca. Duas coisas derrubam as equipes. Primeira, a folga do texto grande é generosa a ponto de um título passar enquanto o parágrafo abaixo dele, na mesma cor, reprova. Segunda, componentes de interface e gráficos com significado — a borda de um campo, um ícone que carrega informação — têm exigência própria de 3:1, e uma checagem só de texto perde todos eles.
Por que cores de marca reprovam tanto neste teste
Paletas de marca são escolhidas pelo caráter em superfícies grandes, não pela legibilidade a 16 pixels. As cores de tom médio costumam ser a vítima: um laranja, um turquesa ou um verde-limão de marca que parece firme como preenchimento de botão frequentemente cai entre 2:1 e 3:1 contra o branco, o que não passa em nada. O instinto é discutir com o número, e o número não se move. A resposta produtiva é manter a cor da marca onde ela funciona — preenchimentos, bordas, tipografia grande de destaque — e derivar uma variante mais escura para o texto de corpo baixando a luminosidade em HSL até a razão passar, o que o conversor de cor transforma num trabalho de dois passos. Assim a identidade do matiz fica intacta e o texto vira legível.
Texto cinza é a falha mais comum da web
Texto de corpo em cinza-claro sobre branco virou convenção de design porque parece sereno e caro num bom monitor em uma sala clara. Medido, `#999999` sobre branco dá cerca de 2,8:1 e reprova em AA sem discussão; `#767676` fica em torno de 4,5:1 e é o cinza mais claro que passa para texto normal. A diferença entre esses dois códigos hex é invisível numa revisão de design e decisiva para quem lê no celular sob luz do dia ou com a visão um pouco reduzida. Se um layout usa cinza para criar hierarquia, a solução costuma estar no tamanho e no peso, não na luminosidade — um cinza escuro menor e de traço mais leve se lê como secundário sem cair abaixo do limite.
O que a razão não te diz
Passar de 4,5:1 é um piso, não uma garantia de boa tipografia. A fórmula ignora o tamanho da fonte além da faixa de texto grande, ignora o peso do traço — uma fonte finíssima a 4,6:1 se lê pior que um peso médio na mesma razão — e ignora o próprio par de cores. Texto vermelho sobre verde passa com folga se a luminosidade diferir o bastante, e continua sendo uma escolha ruim para cerca de um em cada doze homens com deficiência de visão para vermelho e verde, porque eles perdem a distinção de matiz em que o resto do design se apoia. Contraste é necessário e não suficiente: passe primeiro, depois julgue a tipografia.
Conferir texto sobre imagens e degradês
A fórmula recebe duas cores sólidas, e texto posto sobre uma fotografia ou um degradê não tem um fundo — tem um diferente atrás de cada letra. A abordagem prática é testar contra o ponto mais claro e o mais escuro que o texto de fato atravessa; se algum reprovar, quem precisa de ajuda é o layout, e não outra cor de texto. Os remédios usuais são uma camada semitransparente entre imagem e texto, um painel sólido atrás do bloco, ou uma sombra no texto — todos criando na prática um fundo controlável que aí sim dá para medir. Testar só contra o brilho médio da imagem é o que produz títulos que somem sobre um trecho claro de céu.
Erros comuns que vale evitar
- Julgar contraste a olho num bom monitor em sala clara. Essa é a condição mais generosa que seu design vai encontrar; o limite existe para quem lê no celular sob sol forte ou com visão reduzida.
- Conferir o título e supor que o corpo está bem. Texto grande passa em 3:1 enquanto o normal precisa de 4,5:1 — a mesma cor pode aprovar num e reprovar no outro na mesma página.
- Conferir só as cores de texto. Bordas de campo, anéis de foco e ícones que carregam significado têm exigência própria de 3:1, e uma auditoria só de texto perde todos eles.
- Medir texto sobre foto contra o brilho médio da imagem. Teste contra os pontos mais claro e mais escuro que o texto atravessa, ou adicione uma camada para haver um único fundo mensurável.
- Tratar a aprovação como o fim da questão. 4,5:1 é um piso — uma fonte finíssima, uma entrelinha apertada ou um par vermelho-verde ainda podem ser difíceis de ler numa razão que tecnicamente cumpre.
Comparação
| KeroTools | Ferramentas de desenvolvedor do navegador | Plugins de design | |
|---|---|---|---|
| AA e AAA juntos | Sim | Geralmente só AA | Varia |
| Texto normal e grande | Ambos mostrados | Às vezes | Geralmente |
| Funciona antes de construir | Sim | Não — precisa de página renderizada | Sim |
| Valores enviados a um servidor | Nunca | Não | Depende do plugin |
| Conta ou licença | Nenhuma | Nenhuma | Frequentemente exigida |
| Custo | Grátis | Grátis | Grátis / pago |
Recursos
Cálculo da razão WCAG
A fórmula oficial de luminância relativa, não uma aproximação a olho.
Níveis AA e AAA
Os dois níveis de conformidade são avaliados, então você sabe quanta folga o par tem.
Texto normal e grande
Texto grande tem limite menor; os dois são mostrados em vez de deixar você lembrar qual se aplica.
Texto de amostra ao vivo
Caracteres reais no par testado, o que pega problemas que um número sozinho não revela.
Ajustar e reconferir na hora
Mexa em qualquer uma das cores e veja a razão se mover, para achar a menor mudança que passa.
Entrada em HEX
Cole os códigos direto de um manual de marca ou de uma folha de estilo.
Sem instalação
Nada para baixar ou instalar — funciona na própria página web.
Compatível com árabe e RTL
Interface completa em oito idiomas, incluindo árabe da direita para a esquerda.
Seguro por padrão
Servido por HTTPS, sem rastreio de arquivos e sem envio a terceiros.
Quem usa
Desenvolvedores front-end
Encerrar uma questão de cor com uma razão medida em vez de um debate na revisão de design.
Designers
Achar o tom aprovado mais próximo de uma cor de marca antes que ela chegue a uma biblioteca de componentes.
Times de acessibilidade e conformidade
Documentar quais pares atendem AA e quais precisam de correção, com as razões exatas.
Setor público e educação
Cumprir exigências de acessibilidade que são obrigação legal e não preferência.
Perguntas Frequentes
WCAG AA exige pelo menos 4,5:1 para texto normal e 3:1 para texto grande; AAA exige 7:1 e 4,5:1 respectivamente.
Não. Tudo roda localmente no seu navegador — nada é enviado, armazenado ou compartilhado.
Sim — totalmente grátis, sem conta e sem limites.