Couleurs
Une palette pensée pour donner du sens.
En pratique
Actions principales, liens et éléments sélectionnés.
--guide-accentTitres et contenu principal.
--guide-textDescriptions et informations secondaires.
--guide-mutedFond principal des interfaces.
--guide-backgroundSurfaces secondaires et regroupements.
--guide-surfaceLimites des champs et contrôles interactifs.
--guide-borderConfirmation et réussite, accompagnées d’un libellé.
--guide-successAttention et informations nécessitant une vérification.
--guide-warningErreurs et actions destructives.
--guide-dangerAssociations et contrastes
Ratios calculés à partir des couleurs du guide. Seuil du guide pour le texte courant : 4.5:1.
Bonnes pratiques
Utilisez les couleurs selon leur rôle, plutôt que selon leur apparence. Une couleur d’action doit rester associée aux éléments interactifs dans l’ensemble du produit.
- Vérifiez les contrastes pour chaque combinaison réellement utilisée.
- Accompagnez les états d’un texte ou d’une icône compréhensible.
- Préservez la hiérarchie en mode clair comme en mode sombre.
- Réservez les couleurs d’alerte aux situations qui le nécessitent.
À retenir
Une palette accessible ne garantit pas, à elle seule, une interface accessible. Le contraste dépend toujours de l’association entre un premier plan et son arrière-plan.