Escolha um contexto de interface abaixo para ver o tamanho de ícone recomendado, a área de toque mínima e a norma de plataforma correspondente.
Ícone (à escala)
Área de toque (à escala)
Estes valores seguem as normas comuns Apple HIG, Material Design e WCAG. Cumprir um tamanho recomendado não assegura por si só a conformidade completa com a acessibilidade digital.
Por que o tamanho de ícones e áreas de toque é regulado
Um ícone demasiado pequeno é difícil de ler rapidamente, e uma área de toque demasiado pequena é difícil de acertar com precisão, sobretudo para quem tem motricidade fina reduzida, dedos maiores, ou usa o telemóvel com uma só mão em movimento. As Human Interface Guidelines da Apple, o Material Design da Google e as Diretrizes de Acessibilidade para Conteúdo Web (WCAG) definem cada uma tamanhos mínimos exatamente por este motivo: abaixo de um certo tamanho, a taxa de erro em ecrãs táteis sobe de forma acentuada, e os rótulos dos ícones deixam de ser legíveis a uma distância normal. Não são números arbitrários, vêm de estudos medidos de precisão tátil e legibilidade usados para definir os valores padrão de cada plataforma.
Tabela completa de referência: tamanho de ícone por contexto
| Contexto | Tamanho de ícone | Área de toque | Plataforma |
|---|---|---|---|
| Ícone da barra de navegação móvel | 24 x 24px | 44 x 44pt (iOS) / 48 x 48dp (Android) | iOS / Android |
| Ícone da barra de ferramentas de desktop | 16 a 24px (20px habitual) | Mínimo 32 x 32px | Desktop (Windows, macOS, web) |
| Favicon | 16, 32 e 48px (multi-resolução) | Não aplicável | Navegador |
| Botão de ação flutuante (FAB) | Ícone 24 x 24dp | Botão 56 x 56dp | Android / Material Design |
| Ícone numa lista ou menu | 24 x 24px | Altura de linha 48 x 48dp | iOS / Android / web |
| Ícone de sistema iOS | 1024 x 1024px (App Store) / 180 x 180px (ecrã inicial, 60pt a 3x) | Toda a área do ícone | iOS |
| Ícone de sistema Android / Material | 512 x 512px (Play Store) / 108 x 108dp ícone adaptativo (zona segura de 72dp) | Toda a área do ícone | Android |
| Área de toque mínima geral | Não aplicável | 44 x 44px CSS (WCAG 2.2 AA) / 24 x 24px (AAA) / 48 x 48dp (Material Design) | Multiplataforma, acessibilidade web |
Enquadramento regulatório português de acessibilidade digital
Em Portugal, o Decreto-Lei n.º 83/2018 transpõe a diretiva europeia 2016/2102 e exige que os sítios web e aplicações móveis do setor público sigam as normas EN 301 549, baseadas diretamente nas WCAG, sob fiscalização da AMA (Agência para a Modernização Administrativa). Este enquadramento está a ser alargado ao setor privado através da transposição do Ato Europeu de Acessibilidade, com obrigações previstas para bancos, comércio eletrónico e transportes a partir de 2025. O tamanho da área de toque está coberto pelo critério de sucesso WCAG 2.5.8, que fixa 24 x 24 pixels CSS como mínimo no nível AA, com 44 x 44 pixels CSS recomendados como melhor prática.
Limites desta referência
Cumprir um tamanho de ícone ou área de toque recomendado é apenas uma parte da acessibilidade digital, não a sua totalidade. O contraste de cor, a navegação por teclado, a rotulagem para leitores de ecrã e a ordem de foco são critérios distintos que um ícone bem dimensionado não cobre por si só. Use esta ferramenta como uma referência rápida de dimensionamento para design e desenvolvimento, não como prova de conformidade de acessibilidade. Para o espaçamento e a estrutura de grelha em torno destes ícones, veja o Construtor de Sistema de Grelha.