🎨Verificador de contraste de cores
Escolha a cor do texto e a do fundo e veja na hora a razão de contraste e se ela atende aos níveis AA e AAA das diretrizes de acessibilidade WCAG 2.1. O cálculo acontece no seu navegador.
Cálculo pela fórmula do WCAG 2.1 (critérios 1.4.3 e 1.4.6). Texto grande: 18 pt ou mais, ou 14 pt ou mais em negrito.
🔒 Cálculo 100% local — os dados que você digita não saem do seu navegador, nada é enviado a servidores.
Fonte: WCAG 2.1, critérios de sucesso 1.4.3 (Contraste mínimo) e 1.4.6 (Contraste melhorado) — níveis AA: 4,5:1 (normal) e 3:1 (grande); AAA: 7:1 (normal) e 4,5:1 (grande) · Última verificação em 23/09/2026
O contraste entre texto e fundo é medido por uma razão que vai de 1:1 (sem contraste) a 21:1 (preto sobre branco). Pelo WCAG 2.1, o nível AA exige 4,5:1 para texto normal e 3:1 para texto grande; o nível AAA exige 7:1 e 4,5:1. Esta ferramenta faz o cálculo no seu navegador, sem enviar nada a servidores.
Como usar a ferramenta
- Defina as duas coresEscolha a cor do texto e a do fundo pelo seletor ou digitando o código hexadecimal, como #1D2E4A. Os dois campos ficam sincronizados.
- Leia a razão de contrasteO resultado aparece em destaque, por exemplo 4,52:1, e a prévia mostra um texto de exemplo com as cores escolhidas.
- Confira os quatro critériosOs selos indicam se a combinação passa ou reprova em AA e AAA, para texto normal e texto grande.
Como funciona o cálculo do WCAG
O WCAG 2.1 define o contraste em duas etapas. Primeiro, calcula-se a luminância relativa de cada cor: cada canal (vermelho, verde e azul) é dividido por 255 e passa por uma correção de gama (se o valor for até 0,03928, divide-se por 12,92; senão, aplica-se ((c + 0,055) ÷ 1,055) elevado a 2,4). A luminância é então 0,2126 × R + 0,7152 × G + 0,0722 × B, pesos que refletem a sensibilidade do olho ao verde, ao vermelho e ao azul.
Depois, calcula-se a razão: soma-se 0,05 à luminância da cor mais clara e à da mais escura, e divide-se a primeira pela segunda. O resultado varia de 1:1, quando as cores são iguais, até 21:1, no preto sobre branco. Esta ferramenta implementa exatamente essa fórmula, por isso os valores coincidem com os de outros verificadores baseados no WCAG 2.1.
razão = (L_claro + 0,05) ÷ (L_escuro + 0,05)
Os quatro limites: AA e AAA
O critério 1.4.3 (Contraste mínimo, nível AA) exige razão de pelo menos 4,5:1 para texto normal e 3:1 para texto grande. O critério 1.4.6 (Contraste melhorado, nível AAA) exige 7:1 para texto normal e 4,5:1 para texto grande. Por definição do WCAG, texto grande é aquele com pelo menos 18 pontos (cerca de 24 pixels) ou 14 pontos em negrito (cerca de 18,66 pixels).
Na prática, AA é o nível normalmente adotado como meta em sites e aplicativos, e é o que muitas legislações e políticas de acessibilidade mencionam. O AAA é mais rigoroso e nem sempre viável para toda a identidade visual, mas vale buscá-lo em textos longos. Um exemplo: cinza médio (#777777) sobre branco dá cerca de 4,48:1, quase, mas ainda reprovado em AA para texto normal, embora passe para texto grande. Esse tipo de caso limítrofe é exatamente onde um verificador ajuda.
Suposições e limitações
- Considera apenas duas cores sólidas; texto sobre imagens, gradientes ou fundos com transparência precisa de verificação em vários pontos
- Mede o contraste de texto; o WCAG também exige 3:1 para componentes de interface e gráficos (critério 1.4.11), que não é avaliado por selos aqui
- Aceita cores em hexadecimal de 3 ou 6 dígitos; outros formatos devem ser convertidos antes
- O contraste calculado é um indicador objetivo, mas não substitui testes com pessoas usuárias reais e leitores de tela
- Todo o cálculo é local; nenhuma informação é enviada a servidores
Dicas para tirar o melhor proveito
Ao definir a paleta de um site, verifique primeiro as combinações mais usadas: cor do texto do corpo sobre o fundo padrão, texto de botões sobre a cor do botão e links sobre o fundo. Se uma combinação reprovar por pouco, ajustar levemente o brilho de uma das cores (escurecendo o texto ou clareando o fundo) costuma resolver sem mudar a identidade visual.
Lembre-se de checar também os estados: link em foco, botão desabilitado e texto de placeholder em campos de formulário costumam usar cinzas claros que reprovam. Para textos longos, mire em AAA ou pelo menos em folga acima de 4,5:1, já que leitores com baixa visão, telas com brilho baixo ou uso ao ar livre reduzem o contraste efetivo. Registre as combinações aprovadas na documentação do seu design system para que toda a equipe as reutilize.
Erros comuns a evitar
O erro mais frequente é julgar o contraste a olho, no seu monitor: telas diferentes e condições de luz mudam a percepção, e a razão calculada é mais confiável. Outro erro é assumir que uma cor bonita e discreta, como cinza claro sobre branco, é acessível: esses tons costumam ficar abaixo de 3:1.
Também é comum aplicar o limite de texto grande (3:1) a textos que não se qualificam: só valem 18 pt ou mais, ou 14 pt ou mais em negrito. Um parágrafo em 16 px, mesmo em negrito, ainda é texto normal e exige 4,5:1. Por fim, não confunda passar no critério de contraste com ser totalmente acessível: acessibilidade também envolve tamanho de fonte, espaçamento, não depender apenas da cor para transmitir informação e compatibilidade com leitores de tela.
Veja também
Se esta ferramenta foi útil, você também pode precisar destas relacionadas: Gerador de gradiente CSS, Conversor de cores (HEX, RGB, HSL), Moldura para imagem, Gerador de favicon.
Ferramentas relacionadas
🎨Gerador de gradiente CSS
Escolha as cores e a direção, veja o preview ao vivo e copie o código CSS pronto.
Abrir ferramenta →🌈Conversor de cores (HEX, RGB, HSL)
Digite ou escolha uma cor e veja HEX, RGB e HSL sincronizados na hora.
Abrir ferramenta →🖼️Moldura para imagem
Adicione uma borda colorida, reta ou arredondada, ao redor da sua foto.
Abrir ferramenta →⭐Gerador de favicon
Gere favicon.ico e PNGs de 16 a 512 px a partir de uma imagem.
Abrir ferramenta →Perguntas frequentes
O que é razão de contraste?
É um número de 1:1 a 21:1 que compara a luminância de duas cores. Quanto maior, mais fácil de ler. Preto sobre branco dá 21:1, o máximo possível.
Qual contraste o WCAG AA exige?
Pelo critério 1.4.3, 4,5:1 para texto normal e 3:1 para texto grande (18 pt ou mais, ou 14 pt ou mais em negrito).
E o nível AAA?
Pelo critério 1.4.6, 7:1 para texto normal e 4,5:1 para texto grande. É mais rigoroso que o AA.
Meus dados são enviados para algum servidor?
Não. O cálculo acontece inteiramente no seu navegador, e as cores que você escolhe nunca saem do seu dispositivo.
O que conta como texto grande?
Segundo o WCAG, texto com pelo menos 18 pontos (cerca de 24 px) ou 14 pontos em negrito (cerca de 18,66 px). Abaixo disso, vale o limite de texto normal.
Explore mais ferramentas gratuitas
Dezenas de calculadoras, conversores e geradores — todos funcionam no navegador, sem cadastro e sem instalar nada.