Verificador de Contraste de Cores (WCAG)

Verifique se um par de cores de primeiro plano e fundo atende aos padrões de acessibilidade WCAG AA e AAA. Essencial para criar interfaces acessíveis.

Estúdio · ambiente neutro

Razão de contraste

— : 1

AA · texto normal ≥ 4.5

AA · texto grande ≥ 3.0

AAA · texto normal ≥ 7.0

AAA · texto grande ≥ 4.5

Correção em um clique · mantém o matiz

Cor do texto

Fundo

Amostra

Funcionalidades

Mostra a relação de contraste

Estado WCAG AA e AAA

Pré-visualização do texto em direto

Texto normal e texto grande

Como Usar

1. Defina as cores do texto e do fundo — a amostra e o veredito WCAG atualizam em tempo real.

2. Alterne as amostras (tipografia / artigo / interface) para julgar o par em uso realista; pressione S para trocar as duas cores.

3. Se algum nível falhar, use a correção em um clique — ela ajusta só a luminosidade, mantendo o matiz — ou copie o relatório WCAG.

Sobre esta ferramenta

Um texto com brilho muito parecido com o do fundo é difícil de ler para todo mundo e impossível para algumas pessoas. As Diretrizes de Acessibilidade para Conteúdo Web (WCAG) medem isso com uma razão de contraste de 1:1 a 21:1, baseada na luminância relativa das duas cores. O nível AA exige pelo menos 4,5:1 para texto comum e 3:1 para texto grande (24px, ou cerca de 18,66px em negrito); o nível AAA eleva isso para 7:1 e 4,5:1. Este verificador calcula a razão ao vivo, mostra se passa ou falha nos quatro limites e exibe um espécime tipográfico, um artigo e uma interface reais para você avaliar a combinação em contexto. Se algum nível falhar, ele sugere a cor de texto mais próxima que passa, mudando apenas a luminosidade.

Perguntas Frequentes

Como a razão de contraste é calculada?

Cada cor é convertida em luminância relativa com a fórmula sRGB da WCAG 2, e a razão é (L1 + 0,05) ÷ (L2 + 0,05), onde L1 é a cor mais clara. Preto sobre branco dá o máximo de 21:1; cores idênticas dão 1:1.

O que conta como texto grande?

A WCAG define texto grande como pelo menos 18 pontos (24 pixels CSS) em peso normal, ou 14 pontos (cerca de 18,66 pixels CSS) em negrito. Texto grande precisa só de 3:1 para AA e 4,5:1 para AAA, porque letras maiores são mais fáceis de ler.

Passar no AA significa que meu design é acessível?

Contraste é um requisito entre muitos. Fontes finas, texto sobre fotos, tamanhos pequenos e cor usada como único sinal ainda podem causar problemas, então teste telas reais e combine o contraste com outras verificações de acessibilidade.

Como funciona a correção sugerida?

Ela mantém o matiz da cor do texto e procura versões mais claras ou mais escuras até atingir a razão desejada. Se nenhum valor de luminosidade chegar lá com o seu fundo, a ferramenta avisa e você precisa mudar o fundo.

As regras de contraste valem para ícones e botões?

Sim. A WCAG 2.1 pede pelo menos 3:1 para elementos não textuais com significado, como ícones, bordas de campos e indicadores de foco. Gráficos puramente decorativos e controles desativados estão isentos.