Contexto
Em interfaces por toque, o limite visível de um ícone ou botão não precisa coincidir com sua área interativa. Um ícone pequeno pode funcionar bem quando recebe uma área de toque maior; por outro lado, controles visualmente grandes ainda podem causar erro se ficarem próximos demais.
As medidas mais citadas — 24, 44 e 48 — não são equivalentes. Elas vêm de níveis diferentes de exigência e recomendações de plataformas. Por isso, a decisão deve começar pelo contexto de uso, pela consequência do erro e pela densidade necessária, sem tratar um único número como regra universal.
Projete o alvo interativo, não apenas o elemento visual.
Atenda ao piso de conformidade. Para controles por ponteiro, garanta uma área de pelo menos 24 × 24 CSS pixels ou espaço equivalente previsto pela WCAG 2.2.
Use 44–48 unidades como referência prática. Para botões, ícones e ações usadas no toque, prefira uma área de 44 × 44 CSS pixels/pt ou 48 × 48 dp, conforme a plataforma e o sistema de design.
Amplie o hit area sem ampliar o ícone. Um ícone pode permanecer compacto quando seu botão, padding ou pseudo-elemento oferece uma área clicável maior.
Aumente tamanho e separação em ações críticas. Dê mais espaço a controles frequentes, irreversíveis, posicionados na borda da tela ou usados em movimento.
Cheque os vizinhos. Quando um alvo for menor que 24 × 24 CSS pixels, avalie o espaçamento em torno dele; não basta medir apenas o ícone.
Teste no dispositivo e no fluxo real. Verifique toque com uma mão, zoom, diferentes tamanhos de tela, teclado e tecnologias assistivas.
Regra prática
Use 24 × 24 CSS pixels como piso de acessibilidade AA. Para controles de toque comuns, projete 44–48 unidades de área interativa. Aumente além disso quando o erro for custoso, a ação for frequente ou o contexto reduzir a precisão.
Porque isso importa?
Alvos pequenos e muito próximos aumentam toques acidentais, tornam a interação mais lenta e excluem pessoas com tremores, mobilidade reduzida, baixa precisão motora ou uso temporariamente limitado de uma das mãos. Eles também dificultam a operação em deslocamento, com o dispositivo apoiado ou em telas grandes.
O critério WCAG 2.2 2.5.8 estabelece 24 × 24 CSS pixels como mínimo AA para alvos de ponteiro e permite exceções específicas, inclusive por espaçamento. Já o critério 2.5.5, no nível AAA, define 44 × 44 CSS pixels. Esses critérios tratam de conformidade; não garantem, sozinhos, conforto ou eficiência em todos os cenários.
As diretrizes de plataformas convergem para áreas mais generosas: Apple recomenda 44 × 44 pt e Android recomenda 48 × 48 dp. A pesquisa de Parhi, Karlson e Bederson sobre uso do polegar com uma mão também encontrou melhor desempenho e preferência com alvos físicos maiores em tarefas discretas. Essas referências sustentam uma recomendação de projeto mais segura do que simplesmente cumprir o mínimo AA.
Quando usar?
- Botões de ação em telas móveis.
- Botões apenas com ícone.
- Controles em barras e toolbars.
- Fechar modal e voltar.
- Ações frequentes ou irreversíveis.
- Checkboxes, radios e switches.
- Controles próximos à borda da tela.
Quando evitar?
- Medir apenas o ícone visível.
- Usar 24 px como tamanho ideal.
- Juntar ícones pequenos sem espaço.
- Reduzir o alvo para caber mais ações.
- Usar exceções sem avaliar o contexto.
- Depender de precisão motora.
- Esconder a área de toque sem feedback.
Recomendações
Faça
- Projete a área interativa.
- Prefira 44–48 no toque.
- Amplie o hit area de ícones.
- Separe ações vizinhas.
- Priorize ações críticas.
- Teste em aparelho real.
Evite
- Alvos pequenos e colados.
- Medir só o elemento visual.
- Tratar 24 px como ideal.
- Comprimir barras de ação.
- Exigir toque preciso.
- Ignorar contexto e consequência.
