Conversor PX para REM, verificador de contraste WCAG e gerador de botões acessíveis. Ferramentas gratuitas para programadores.
Reúne numa só página as verificações de acessibilidade que mais se repetem ao maquetizar: um verificador de contraste que calcula a razão entre a cor do texto e a do fundo e diz-te se cumpre AA ou AAA, um conversor de píxeis para rem para tipografias escaláveis, e exemplos de botões acessíveis com estados de foco visíveis e etiquetas ARIA corretas. Tudo é calculado no teu navegador enquanto escreves, sem recarregar nem enviar nada para um servidor.
Evitas instalar extensões ou abrir três ferramentas diferentes para validar o mesmo componente. Os resultados seguem os critérios das WCAG 2.1, por isso podes justificar decisões de design ao cliente ou à equipa. Funciona igual em modo claro e escuro, o que te permite confirmar que a tua paleta cumpre o contraste nos dois temas antes de publicares.
Validar a paleta de uma marca antes de a transformar em tokens de design, rever um formulário que falhou uma auditoria, ajustar tamanhos de letra em rem para respeitar o zoom do navegador, ou mostrar a uma equipa júnior porque é que um cinzento claro sobre branco não é legível. Serve também como checklist rápida antes de entregares uma landing page.
Aponta sempre a AA como mínimo (4.5:1 em texto normal, 3:1 em texto grande) e reserva AAA para conteúdo crítico. Não uses só a cor para comunicar erros: acompanha-a com ícone e texto. Define tamanhos em rem em vez de px para que o utilizador possa ampliar a letra. E confirma que cada elemento interativo é alcançável com o tabulador.
Sim, é gratuito e não exige registo. Podes usar todas as utilidades as vezes que quiseres.
As WCAG pedem 4.5:1 para texto normal e 3:1 para texto grande no nível AA. O nível AAA sobe para 7:1 e 4.5:1.
Não. Todos os cálculos são feitos no teu navegador, por isso nenhuma paleta ou valor sai do teu equipamento.
Porque o rem escala com a preferência de tamanho de letra do utilizador. Com px fixos, quem precisa de texto maior não o consegue ampliar corretamente.
Não. Cobre contraste, tipografia e padrões de botão, mas uma auditoria completa inclui navegação por teclado, leitores de ecrã e a estrutura semântica de todo o site.