Une palette peut être reconnaissable et produire malgré tout des textes difficiles à lire. Un vert vif sur fond blanc, une légende grise ou un bouton dont l’état change seulement de couleur peuvent poser problème. Le contraste doit être vérifié sur les combinaisons réellement utilisées, avec les tailles et les contextes du site.
L’objectif n’est pas d’abandonner une couleur de marque. Il s’agit de lui attribuer les bons rôles : surface, accent, texte ou interaction. Une couleur très expressive peut rester présente sans porter les petits caractères.
L’essentiel en 30 secondes
- Testez des paires texte-fond, pas les couleurs séparément.
- Le W3C prévoit des seuils différents selon la taille du texte.
- Ajoutez des mots ou des formes aux informations portées par la couleur.
- Une palette conforme ne suffit pas à rendre tout un site accessible.
Les repères à connaître
Le critère WCAG 2.2 sur le contraste minimum fixe généralement un rapport de 4,5:1 pour le texte courant et de 3:1 pour le grand texte, avec des exceptions définies. Le grand texte correspond notamment à au moins 18 points en normal ou 14 points en gras, soit environ 24 et 18,7 pixels CSS.
Ces seuils concernent le contenu numérique dans les conditions du critère. Ils ne constituent pas une certification universelle d’un imprimé ni un audit complet d’accessibilité. Le contraste des composants et informations visuelles nécessaires relève également de règles spécifiques.
Organiser la palette par rôle
| Rôle | Choix à documenter | Vérification |
|---|---|---|
| Texte principal | Couleur sur le fond courant | Lecture de paragraphes et liens |
| Texte secondaire | Nuance distincte mais lisible | Légendes et métadonnées |
| Bouton principal | Fond, texte, contour et états | Repos, survol et focus clavier |
| Accent de marque | Zone d’expression | Ne pas dépendre de petits textes peu contrastés |
| Erreur ou confirmation | Couleur et indication supplémentaire | Message compréhensible sans la couleur |
Cette répartition produit des règles applicables. Une charte qui fournit seulement cinq codes hexadécimaux laisse chaque designer ou développeur improviser leurs associations.
Exemple calculé : un vert vif et deux usages
Avec le vert #52FF00, le contraste avec du blanc est d’environ 1,34:1, alors qu’avec le noir #171A16 il est d’environ 13,1:1. Ces valeurs proviennent du calcul de luminance relative de ces couleurs précises, sans transparence ni image de fond.
La première combinaison ne convient pas à du texte courant selon le seuil cité. La seconde permet d’envisager un bouton vert avec un libellé très sombre. Le vert peut aussi servir de repère décoratif, tandis que les textes restent noirs sur un fond clair.
Il faut encore tester les états, la taille, le contour et la navigation. Un calcul réussi pour un bouton au repos ne dit rien de son état désactivé ou du focus clavier.
Vérifier les vrais écrans
Prenez les pages clés : accueil, service, produit, formulaire et confirmation. Relevez les paires utilisées, y compris sur les images et dans les encarts. Pour un fond variable, examinez les zones les moins favorables ; une moyenne visuelle ne suffit pas.
Testez le zoom et la navigation au clavier. Demandez aussi à une personne qui ne connaît pas la maquette d’identifier les liens, les erreurs et l’action principale. Ces observations complètent les mesures sans remplacer les contrôles techniques nécessaires.
La charte graphique devrait conserver les associations approuvées et les associations interdites. Le kit réseaux sociaux peut reprendre ces principes, en vérifiant la lecture à la taille d’affichage réelle.
Ne pas utiliser la couleur seule
Un champ invalide doit contenir une explication, pas seulement une bordure rouge. Un graphique doit différencier ses séries avec des libellés ou des formes lorsque nécessaire. Un état sélectionné peut associer couleur, repère et texte.
Le W3C traite explicitement l’usage de la couleur. Cette précaution aide aussi dans des conditions ordinaires : écran peu lumineux, impression monochrome ou lecture rapide.
Questions fréquentes
Faut-il modifier le logo pour respecter le contraste du texte ?
Les logotypes bénéficient d’une exception dans le critère cité. Cela ne dispense pas de vérifier leur lisibilité et celle des textes qui les entourent.
Un outil automatique suffit-il ?
Il peut calculer une paire et repérer certains problèmes. Les états, les fonds complexes et la compréhension du parcours demandent aussi une revue humaine.
Peut-on garder une couleur peu contrastée ?
Oui, selon son rôle. Utilisez-la dans des situations adaptées et prévoyez des combinaisons lisibles pour les textes et interactions.
Faire évoluer la palette avec méthode
Travaillez votre système visuel avec Foldline à partir de vos pages et supports réels. La couleur gardera sa personnalité avec des règles de lecture explicites.
Outil gratuit · Impression · sans compte
Fichier prêt à imprimer ? Format, résolution, fond perdu, transparence, couleurs et polices du PDF : un verdict par règle, dans votre navigateur, sans compte.
Service Foldline · Design graphique
Un projet de design graphique ? Du brief à la livraison, Foldline accompagne les entreprises à Alger : la page du service détaille ses étapes et ses livrables.
