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.

#1e1b4b#ffffff

Sample Heading Text

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

15.99: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

Converter PDF para tons de cinza

Converter PDF para tons de cinza

Converta um PDF colorido em tons de cinza renderizando cada pagina e reconstruindo o documento.

Seletor de Cores da Imagem

Seletor de Cores da Imagem

Selecione códigos de cor de qualquer imagem.

Conversor de Códigos de Cor

Conversor de Códigos de Cor

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

Gerador de Cores Aleatórias

Gerador de Cores Aleatórias

Gere paletas de cores aleatórias com regras de harmonia.

Alterador de velocidade do audio

Alterador de velocidade do audio

Altere a velocidade de reproducao do audio sem mudar o tom.

Extrator de paleta hex

Extrator de paleta hex

Extraia a paleta de cores dominante de qualquer imagem em valores hex, RGB e HSL.

Otimizador de SVG

Otimizador de SVG

Remova metadados, comentários e espaços em branco desnecessários de arquivos SVG para reduzir o tamanho.

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.