Définir les rôles avant les combinaisons
Séparez couleur principale, fonds, textes, bordures, actions et états. Prévoyez les usages de survol, de focus, de sélection et d’erreur. Une palette sans ces variantes conduit souvent à des décisions improvisées pendant le développement.
Documentez les combinaisons autorisées plutôt qu’une simple liste de codes. Le même vert peut être utilisé sur un fond sombre et interdit sur un fond blanc pour du petit texte. Ces règles doivent être visibles dans les exemples de composants.
Mesurer les contrastes sur les cas pertinents
Les WCAG prévoient notamment un contraste minimal de 4,5:1 pour le texte courant et de 3:1 pour le grand texte répondant à leur définition, avec des exceptions. Vérifiez le critère et le contexte exacts plutôt que d’appliquer un seuil unique à toute l’interface.
Les boutons, les bordures utiles et les indicateurs de focus nécessitent aussi des vérifications adaptées. Un contrôle du texte seul ne démontre pas la conformité de la page. Les images de fond et les dégradés doivent être testés dans les zones où le texte apparaît réellement.
Ne pas utiliser la couleur comme seule information
Un champ en erreur doit comporter un message compréhensible. Un graphique doit offrir des libellés ou des motifs qui aident à distinguer les séries. Une sélection active peut associer couleur, bordure et texte afin de rester identifiable dans plusieurs conditions de perception.
Dans un exemple fictif, un formulaire indique les champs incorrects uniquement avec une bordure rouge. L’ajout d’une explication liée au champ aide à comprendre le problème et sa correction. La couleur complète alors l’information au lieu de la porter seule.
Adapter la marque sans la dénaturer
Conservez les teintes emblématiques pour les surfaces ou les accents où elles fonctionnent. Créez des variantes plus sombres pour les textes et plus claires pour les fonds si nécessaire. Faites valider ces rôles dans la charte pour éviter que chaque support réinvente sa propre palette.
Testez enfin les composants dans leur assemblage : une succession de blocs accessibles séparément peut rester visuellement confuse. La hiérarchie et la densité comptent aussi pour la compréhension.
Questions fréquentes
Une couleur vive est-elle forcément lisible ?
Non. La perception de vivacité ne remplace pas le calcul du contraste avec le fond.
Un outil automatique suffit-il ?
Il aide à repérer des défauts. Une vérification des usages, des états et de la lecture reste nécessaire.
Passer à l’action
Faites vérifier vos combinaisons avant de décliner toutes les pages. IIDI peut adapter votre identité aux usages numériques.
Référence utile
IIDI relie stratégie, design, technologie et acquisition.
Nous transformons ce sujet en feuille de route priorisée, puis en dispositif concret, mesurable et administrable par vos équipes.