Tiny Online Tools logoTiny Online ToolssearchBuscar ferramentas…grid_viewTodas as ferramentas
Iniciochevron_rightFerramentas de Designchevron_rightVerificador de Contraste de CorVerificador de Contraste de Cor

Verificador de Contraste de Cor

Verifique as proporções de contraste WCAG 2.1 para acessibilidade.

#f8fafc#111827

Sample Heading Text

The quick brown fox jumps over the lazy dog. This is body text at 16px to demonstrate readability at normal size.

16.96:1
Contrast Ratio
Resultados WCAG 2.1
check_circle
AA Normal Text
Min 4.5:1Body text, UI components
APROVADO
check_circle
AA Large Text
Min 3:118pt+ or 14pt+ bold
APROVADO
check_circle
AAA Normal Text
Min 7:1Enhanced: body text
APROVADO
check_circle
AAA Large Text
Min 4.5:1Enhanced: large text
APROVADO

Ferramentas semelhantes

Ferramenta de substituição de cor

Ferramenta de substituição de cor

Substitua uma cor numa imagem por outra. Tolerância ajustável para a distância de cor. Totalmente privado, funciona no seu navegador.

Calculadora de proporção de aspecto

Calculadora de proporção de aspecto

Calcule proporções e dimensões dimensionadas para imagens e vídeos.

Conversor de HEX para Tailwind

Conversor de HEX para Tailwind

Converta uma cor HEX em classes compatíveis com Tailwind e uma escala de referência.

Conversor de Códigos de Cor

Conversor de Códigos de Cor

Converta códigos de cor HEX, RGB e HSL.

Texto para Binário

Texto para Binário

Converte texto em código binário (0s e 1s) com detalhamento por caractere.

Limpador de Transparência PNG

Limpador de Transparência PNG

Limpe as bordas semitransparentes com ruído em arquivos PNG. Converta pixels quase transparentes em totalmente transparentes e os quase opacos em totalmente opacos.

unidade conversor

unidade conversor

converter between common measurement units.

apps

Mais ferramentas

Explore nossa colecao completa de ferramentas online gratuitas.

Verifique o contraste antes de levar cores para produção

Uma paleta pode parecer bonita e ainda assim falhar em requisitos de acessibilidade. Este verificador ajuda você a testar combinações de texto e fundo contra os limites de contraste do WCAG antes que elas entrem em um design system, biblioteca de componentes ou produto real.

O que os resultados mostram

A ferramenta exibe a taxa de contraste e se a combinação passa nos níveis WCAG mais comuns para:

  • texto normal em AA
  • texto grande em AA
  • texto normal em AAA
  • texto grande em AAA

Por que isso importa em projetos reais

Checar contraste é útil para:

  • validar cores de marca em componentes
  • testar texto sobre botões, cartões e banners
  • revisar acessibilidade na passagem de design para implementação
  • evitar combinações difíceis de ler para pessoas com baixa visão

Passar na regra não encerra a análise

Uma combinação pode passar tecnicamente e ainda assim ficar desconfortável em tamanhos pequenos ou pesos leves. Depois de validar a taxa, vale observar a prévia com tamanhos de texto mais realistas antes de considerar a escolha final.