Ir para a ferramenta
JoeLucky

Clique em ★ para salvar uma ferramenta

Categorias de ferramentas

Código para imagemGerador de gradientes CSSGlassmorphism CSSGerador de box-shadowGerador de loaders CSSGerador de blobs SVGSVG para PNGVerificador de contraste de coresConversor PX / REM / EM
JoeLucky

Ferramentas online práticas, todas em um só lugar

Política de PrivacidadeTermos de Uso

© 2026 JoeLucky®. Todos os direitos reservados.

  1. JoeLucky
  2. /CSS e design
  3. /Verificador de contraste de cores

Verificador de contraste de cores

Verifique a razão de contraste WCAG entre duas cores e veja os resultados AA e AAA.

Texto de exemplo — Um pequeno jabuti xereta viu dez cegonhas felizes
18.88:1Razão de contraste (fórmula WCAG)
Texto normal AA (≥ 4,5:1)Aprovado
Texto normal AAA (≥ 7:1)Aprovado
Texto grande AA (≥ 3:1)Aprovado
Texto grande AAA (≥ 4,5:1)Aprovado

Esta ferramenta apenas informa o resultado bruto da fórmula de contraste WCAG e se os quatro limites foram atendidos; isso não significa que «esta página está em conformidade com as WCAG». A conformidade real também depende do tamanho e do peso da fonte e do restante do seu design.

CSS E DESIGN SEMELHANTES

Ver todas
Código para imagem

Transforme trechos de código em capturas de tela bonitas.

Abrir →
Gerador de gradientes CSS

Crie gradientes lineares, radiais e cônicos e copie o CSS na hora.

Abrir →
Glassmorphism CSS

💬 Comentários

?

Ainda não há comentários. Seja o primeiro!

O QUE É Verificador de contraste de cores?

O verificador de contraste de cores calcula a razão de contraste entre as cores de primeiro plano e de fundo com a fórmula WCAG, sinalizando a aprovação AA/AAA para texto normal e grande.

Importante

  1. Aprovado/reprovado é sempre mostrado com texto e um ícone — nunca apenas pela cor.
  2. Esta ferramenta verifica apenas um par de cores — passar não significa que uma página inteira esteja em conformidade com a WCAG.

Como usar?

  1. Escolha as cores de primeiro plano e de fundo (amostra ou entrada hexadecimal).
  2. Revise a prévia ao vivo e o resultado do contraste.

Perguntas frequentes

Passar no AA significa que minha página está em conformidade com a WCAG?

Não necessariamente. Esta ferramenta só informa o cálculo bruto da razão de contraste e a aprovação/reprovação nos quatro limites — a conformidade real com a WCAG também depende do tamanho e do peso da fonte e do seu design como um todo.

Por que aprovado/reprovado não é indicado só com cor?

Apenas cor (ex.: um ponto verde ou vermelho) não é acessível a pessoas daltônicas, então cada limite sempre mostra um ícone e um rótulo de texto (Aprovado/Reprovado).

Como um fundo semitransparente é tratado?

Um fundo transparente precisa de uma cor extra de “fundo da tela” opaca — a ferramenta usa a lógica de composição já existente no núcleo para calcular a cor opaca resultante antes de calcular o contraste.

Gere em tempo real o código de desfoque de fundo e borda translúcida.

Abrir →