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

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.

Extrator de paleta de gradiente

Extrator de paleta de gradiente

Extraia paradas de cores prontas para gradiente de uma imagem carregada.

Binário para Texto

Binário para Texto

Converta binário (0s e 1s) de volta para texto legível.

Color Replace Tool

Color Replace Tool

Replace one color in an image with another. Adjustable tolerance for color distance. Fully private, runs in your browser.

carimbo de data/hora conversor

carimbo de data/hora conversor

converter Unix timestamps into human-readable dates.

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.