Dans cet article
Sur mobile, les couleurs ont une mission essentielle : rendre l’interface compréhensible, lisible et agréable dans toutes les situations d’usage.
Et c’est loin d’être simple : soleil direct, petits écrans, défilement constant, luminosité variable…
Une palette qui semblait parfaite sur un écran d’ordinateur peut devenir illisible dès que l’app est utilisée dans la rue.
L’objectif de cet article est simple : comment rendre les couleurs d’une application mobile accessibles sans dénaturer le design ?
Comprendre ce que signifie “accessibilité des couleurs” dans une app
Le contraste, pilier de la lisibilité
Le contraste permet d’assurer une lecture confortable entre un élément (texte, icône, bouton) et son fond.
Les WCAG (Web Content Accessibility Guidelines) recommandent :
- 4.5:1 pour les textes standards,
- 3:1 pour les éléments UI essentiels et textes larges.
Quelques outils comme Contrast permettent, sur Figma, d’auditer facilement vos couleurs.
Les enjeux spécifiques au mobile
Sur mobile :
- l’utilisateur est souvent en mouvement,
- l’écran peut être exposé à une forte luminosité,
- l’espace est réduit : les éléments sont plus petits.
Une couleur accessible protège ton interface dans les pires conditions.
Auditer les couleurs d’une application existante
Tester les contrastes
Passe chaque élément au crible :
- textes (labels, descriptions, placeholders),
- boutons,
- badges,
- icônes,
- fond sur image.
Vérifie également les deux modes : clair et sombre.
Identifier les zones critiques
Les problèmes reviennent souvent aux mêmes endroits :
- boutons primaires trop pâles,
- textes blancs sur couleurs vives,
- badges très saturés mais peu lisibles,
- gris trop clairs utilisés pour du texte.
Outils pratiques
Avec quelques outils, tu pourras déjà savoir si ton contraste et tes couleurs sont lisibles pour ton utilisateur :
- Stark (Figma, Sketch, XD)
- Contrast
- Leonardo
- Simulateurs de daltonisme
Ajuster une palette sans perdre l’identité visuelle
Modifier la luminosité, pas la teinte
Le secret : conserver la même teinte mais jouer sur la luminance.
Cette micro-modification suffit souvent à atteindre un contraste conforme.
Créer plusieurs niveaux d’une même couleur
Pour chaque couleur principale, crée :
- Primary 500 (couleur brand),
- Primary 600 (version accessible pour boutons),
- Primary 700 (version sombre pour le mode clair),
- On Primary (la couleur du texte sur cette couleur).
Tu gardes ton ADN visuel tout en renforçant la lisibilité.
Tu peux tout à fait renommer les variables de couleur comme bon te semble. Pour ma part, j’utilise des couleurs de 0000 a 1400 pour les teintes neutres – du noir au blanc en passant par le gris – et ensuite une couleur primaire avec ses déclinaisons, pareil pour une couleur secondaire et les couleurs d’état (vert, orange, rouge).
Penser au mode sombre
En dark mode, les contrastes s’inversent :
- une couleur trop saturée devient agressive,
- les gris trop clairs deviennent illisibles,
- les ombres ne fonctionnent plus pareil.
Chaque couleur doit exister dans une version light et une version dark.
Bonnes pratiques UI pour garantir l’accessibilité dans une app
Ne jamais transmettre une info uniquement via la couleur
Une erreur doit toujours combiner :
- couleur,
- texte,
- et parfois icône – c’est mieux avec – pour les daltoniens.
Différencier clairement les boutons
Le bouton primaire doit être reconnaissable immédiatement.
Astuce : jouer sur la saturation, la luminosité ou les bordures.
Ajouter des états interactifs clairs
Les interfaces mobiles ont des états importants :
- Pressed
- Focused (notamment sur Android)
- Selected
Chacun doit rester lisible.
Attention aux textes sur images
C’est l’un des cas les plus à risque.
Solutions :
- overlay sombre ou clair,
- zone unie,
- masque en dégradé.
Exemples concrets
Exemple 1 : Le bouton bleu trop pâle
Problème : contraste texte/fond insuffisant.
Correction : même teinte, luminance ajustée (30-50% de différence au minimum).
Exemple 2 : Le badge d’erreur illisible
Problème : trop saturé, trop clair.
Correction : rouge plus sombre + icône + texte clair
Exemple 3 : Texte blanc sur fond très clair
Problème : contraste limite.
Correction : éclaircir le texte, assombrir légèrement le fond ou ajouter une ombre légère.
Intégrer ces couleurs dans un design system mobile
Pour éviter de corriger l’accessibilité à chaque écran, crée des tokens, par exemple :
- Primary
- On Primary
- Surface
- Background
- Error
- Success
- Disabled
Documente :
- où utiliser quelle variante,
- quelles couleurs sont autorisées en texte sur quel fond,
- les variantes clair/sombre,
- les ratios de contraste attendus.
Ainsi, ton app reste accessible même quand plusieurs designers interviennent. Ils n’ont plus qu’à suivre les lignes directrices. Top, non ?
Checklist finale
Checklist :
- Le contraste est conforme dans les deux modes (dark/light) ?
- Les boutons ont des états clairs ?
- Une information n’est jamais transmise uniquement par la couleur ?
- La palette marketing a ses variantes UI accessibles ?
- Les couleurs sont testées en conditions réelles (soleil, nuit, fatigue) ?
Conclusion
Rendre les couleurs d’une application mobile accessibles, ce n’est pas “assombrir toutes les couleurs”.
C’est anticiper les conditions d’usage, comprendre les limites de perception humaine et adapter les nuances pour une lecture vraiment confortable.
Une identité visuelle forte peut parfaitement coexister avec des couleurs accessibles.
En réalité, les apps les plus agréables sont justement celles qui montrent que design et inclusion vont ensemble.
Bonus : répertorie tout ça sur un logiciel pro comme Figma ou Penpot. Ce sont mes outils favoris pour délivrer un design facile à comprendre pour les directeurs, les équipes et les développeurs.
Corentin Gouloumy, Fondateur de Traqpad
