TeaFun Pressione / para buscar
Coleção
Verifique razões de contraste de cor para conformidade com a WCAG, simule daltonismo e calcule proporções de tela — auxiliares de design gratuitos que rodam inteiramente no seu navegador.
3 ferramentas nesta categoria
← Página inicialVisuais acessíveis e bem proporcionados começam com os números certos. Esta coleção reúne as ferramentas da TeaFun que designers, desenvolvedores e criadores de conteúdo usam para checar a acessibilidade das cores, simular condições de visão e travar as proporções corretas.
Três ferramentas para acertar os números por trás de um design: um verificador de contraste WCAG, um simulador de daltonismo e uma calculadora de proporção. O verificador recebe uma cor de frente e uma de fundo e informa a razão frente aos limites WCAG AA e AAA, para você saber se o texto será legível em vez de adivinhar. O simulador de daltonismo aproxima como uma paleta aparece para pessoas com tipos comuns de deficiência na visão de cores. A calculadora de proporção mantém as proporções corretas ao redimensionar ou cortar. São utilitários pequenos e focados — o tipo de checagem que você faz perto do fim de um design, não a tela em que você o cria.
Use o verificador de contraste sempre que houver texto sobre um fundo colorido ou de imagem: insira as duas cores e confirme que a razão alcança pelo menos 4,5:1 para texto normal ou 3:1 para texto grande ou em negrito. Rode o simulador de daltonismo em tudo onde a cor carrega significado — um gráfico, um conjunto de selos de status, um estado de erro de formulário — e garanta que a informação sobrevive sem a cor, já que uma parcela considerável dos usuários tem alguma forma de deficiência na visão de cores. Recorra à calculadora de proporção quando precisar redimensionar sem distorção: insira uma dimensão e a proporção desejada, e ela dá a outra.
Acessibilidade e proporção são fáceis de errar a olho. Uma combinação de cores que parece boa no seu monitor calibrado pode falhar no contraste num celular sob sol forte, e uma paleta que para você é nítida pode desmoronar para um usuário daltônico se a cor for a única pista. As razões da WCAG existem justamente porque o julgamento humano de contraste não é confiável. A proporção também conta: uma imagem mal cortada ou um vídeo esticado é aquele tipo de pequeno defeito que as pessoas notam sem saber nomear. Nenhuma dessas ferramentas projeta por você — elas pegam os erros mensuráveis que um bom olho ainda pode deixar passar, para que o trabalho se sustente além da sua própria tela.
Verifique proporções de contraste, conformidade AA/AAA, gere variantes de paleta e exporte tokens de cor CSS ou Tailwind v4 localmente.
Teste sua visão cromática com placas no estilo Ishihara otimizadas para gamers.
Calcule proporcoes de imagem instantaneamente. Converta dimensoes, resolva lados ausentes e consulte tamanhos de imagens para redes sociais 2025/2026.
Texto normal exige uma razão de 4,5:1; texto grande (18pt ou mais, ou 14pt em negrito) exige 3:1. O verificador de contraste WCAG mostra os dois limites e o seu status de aprovado ou reprovado na hora.
Ele aplica matrizes de daltonização padrão às cores de entrada para aproximar como elas aparecem com diferentes tipos de deficiência na visão de cores — tudo calculado localmente no seu navegador.
Não. Como alguns usuários não distinguem certas cores, combine cada indicação de cor com um segundo sinal — um rótulo, um ícone, um padrão ou texto. O simulador ajuda você a verificar se o seu significado sobrevive quando a cor não sobrevive.
Cortar ou redimensionar na proporção errada distorce o conteúdo ou força tarjas pretas. Travar uma proporção padrão como 16:9 ou 1:1 mantém tudo proporcional e previsível nos vários lugares onde será exibido.