Choisissez un contexte d'interface ci-dessous pour voir la taille d'icône recommandée, la zone tactile minimale et la règle de plateforme correspondante.
Icône (à l'échelle)
Zone tactile (à l'échelle)
Ces valeurs suivent les référentiels courants Apple HIG, Material Design et RGAA/WCAG. Respecter une taille recommandée ne suffit pas à lui seul à garantir une conformité complète à l'accessibilité numérique.
Pourquoi la taille des icônes et des zones tactiles est encadrée
Une icône trop petite se lit mal d'un coup d'œil, et une zone tactile trop petite est difficile à toucher avec précision, en particulier pour une personne ayant une motricité fine réduite, des doigts plus larges, ou un usage à une main en mobilité. Les Human Interface Guidelines d'Apple, le Material Design de Google et le Référentiel Général d'Amélioration de l'Accessibilité (RGAA) fixent chacun des tailles minimales pour cette raison précise : en dessous d'un certain seuil, le taux d'erreur sur écran tactile augmente fortement, et les libellés d'icônes deviennent illisibles à une distance de lecture normale. Ce ne sont pas des chiffres arbitraires : ils viennent de mesures de précision tactile et de lisibilité utilisées pour fixer les valeurs par défaut de chaque plateforme.
Tableau complet de référence : taille d'icône par contexte
| Contexte | Taille d'icône | Zone tactile | Plateforme |
|---|---|---|---|
| Icône de barre de navigation mobile | 24 x 24px | 44 x 44pt (iOS) / 48 x 48dp (Android) | iOS / Android |
| Icône de barre d'outils de bureau | 16 à 24px (20px courant) | 32 x 32px minimum | Bureau (Windows, macOS, web) |
| Favicon | 16, 32 et 48px (multi-résolution) | Non applicable | Navigateur |
| Bouton d'action flottant (FAB) | Icône 24 x 24dp | Bouton 56 x 56dp | Android / Material Design |
| Icône dans une liste ou un menu | 24 x 24px | Hauteur de ligne 48 x 48dp | iOS / Android / web |
| Icône système iOS | 1024 x 1024px (App Store) / 180 x 180px (écran d'accueil, 60pt en x3) | Toute la surface de l'icône | iOS |
| Icône système Android / Material | 512 x 512px (Play Store) / 108 x 108dp icône adaptative (zone de sécurité 72dp) | Toute la surface de l'icône | Android |
| Zone tactile minimale générale | Non applicable | 44 x 44px CSS (RGAA/WCAG 2.2 AA) / 24 x 24px (AAA) / 48 x 48dp (Material Design) | Multi-plateforme, accessibilité web |
Cadre réglementaire français de l'accessibilité numérique
En France, le RGAA (Référentiel Général d'Amélioration de l'Accessibilité) impose des règles d'accessibilité aux sites publics, aux collectivités et, depuis l'élargissement porté par la loi pour une République numérique, à un nombre croissant d'organismes privés selon leur chiffre d'affaires. Le RGAA s'appuie directement sur les critères de succès du WCAG, dont le 2.5.8 sur la taille des cibles tactiles, qui fixe 24 x 24 pixels CSS comme seuil minimal au niveau AA, avec 44 x 44 pixels CSS recommandés comme meilleure pratique par de nombreux systèmes de design publics français. Un site non conforme au RGAA s'expose à une déclaration d'accessibilité obligatoire pointant les manquements et, pour le secteur public, à des sanctions administratives.
Limites de cette référence
Respecter une taille d'icône ou de zone tactile recommandée n'est qu'une partie de l'accessibilité numérique, pas son ensemble. Le contraste des couleurs, la navigation au clavier, l'étiquetage pour les lecteurs d'écran et l'ordre de focus sont des critères distincts qu'une icône correctement dimensionnée ne couvre pas. Utilisez cet outil comme une référence rapide de dimensionnement pour la conception et le développement, pas comme une preuve de conformité à l'accessibilité. Pour l'espacement et la structure de grille autour de ces icônes, voir le Générateur de Système de Grille.