Coleção

Ferramentas de design e cor

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 inicial

Por que esta coleção existe

Visuais 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.

Casos de uso comuns

  • Confira se o texto do corpo e o fundo passam na razão de contraste WCAG AA antes de entregar um design.
  • Pré-visualize uma paleta com deuteranopia e protanopia para garantir que uma cor de status não seja a única coisa a carregar significado.
  • Trave uma imagem ou um quadro de vídeo numa proporção limpa de 16:9 ou 4:3 antes de cortar ou exportar.

O que esta coleção inclui

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.

Como usar esta coleção

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.

Por que essas verificações importam

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.

Ferramentas em destaque

Perguntas Frequentes

Qual razão de contraste preciso para passar no WCAG AA?

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.

Como funciona o simulador de daltonismo?

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.

A cor deve em algum momento ser a única forma de mostrar a informação?

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.

Por que a proporção de tela importa para imagens e vídeo?

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.