En UI mobile, la couleur ne sert pas seulement à “faire joli”.
Elle guide l’utilisateur, structure l’information et influence directement la lisibilité.
Une mauvaise palette peut réduire la compréhension, nuire à l’accessibilité et impacter les conversions.
Voici les erreurs de couleurs les plus fréquentes en design d’application mobile, et comment les éviter.
Manquer de contraste (et rendre l’interface illisible)
C’est l’erreur numéro un en UI mobile.
Texte gris clair sur fond blanc.
Bouton pastel sur fond pastel.
Labels secondaires trop pâles.
Résultat : fatigue visuelle + incompréhension.
Pourquoi c’est critique ?
Sur mobile :
L’écran est petit
L’environnement lumineux varie
L’utilisateur scrolle vite
Comment corriger ?
Respecter les ratios WCAG (4.5:1 minimum pour le texte standard)
Tester la palette sur fond clair ET foncé
Utiliser un outil comme Adobe Color pour vérifier le contraste
Utiliser trop de couleurs primaires
Rouge, bleu, vert, jaune… tout en même temps. Une interface mobile doit être hiérarchisée. Si tout attire l’œil, plus rien ne guide l’utilisateur.
Problème :
Pas de point focal
Manque de hiérarchie visuelle
Impression d’amateurisme
Solution :
1 couleur principale
1 à 2 secondaires
1 couleur d’accent
Des neutres pour respirer
Ignorer l’accessibilité (daltonisme et déficiences visuelles)
Environ 8 % des hommes sont daltoniens.
Si ton interface repose uniquement sur la couleur (rouge = erreur, vert = validé), certains utilisateurs ne verront pas la différence.
À éviter :
Signifier une erreur uniquement par la couleur
Associer rouge/vert sans icône ou texte
Bonne pratique :
Ajouter une icône + un label
Tester avec un simulateur daltonisme
Vérifier les contrastes
Des outils comme Coolors proposent des simulateurs intégrés.
Ne pas adapter les couleurs au mode sombre
Le dark mode n’est pas un simple “fond noir”. Une couleur qui fonctionne en mode clair peut devenir :
Trop saturée
Trop lumineuse
Illisible
À faire :
Créer une palette spécifique pour le dark mode
Diminuer légèrement la saturation
Tester les états (hover, disabled, pressed)
Choisir des couleurs uniquement “tendances”
Les tendances changent. L’ergonomie reste.
Une couleur ultra tendance peut :
Manquer de contraste
Vieillir rapidement
Ne pas correspondre à l’identité de marque
Avant de choisir :
Définir l’émotion voulue
Vérifier la lisibilité
Tester sur plusieurs écrans
Comment créer une palette efficace en UI mobile ?
Méthode simple en 4 étapes :
1️⃣ Définir la couleur primaire (branding)
2️⃣ Ajouter une couleur d’accent (CTA)
3️⃣ Construire une gamme de neutres
4️⃣ Tester en conditions réelles (luminosité, dark mode, accessibilité)
Checklist rapide avant validation
✔ Le texte est lisible en extérieur
✔ Les boutons ressortent clairement
✔ L’interface fonctionne en dark mode
✔ La couleur n’est pas la seule source d’information
✔ Les contrastes respectent les standards
Une bonne palette en UI mobile n’est pas une question de goût. C’est une question de clarté, hiérarchie et accessibilité.
En évitant ces erreurs courantes, vous améliorez :
L’expérience utilisateur
La compréhension
Les performances de votre application
