Les cinq rôles de couleur
Sous « Design » et « Couleurs », vous trouvez « Votre palette de couleurs ». Chaque couleur a une fonction : « Arrière-plan » est le fond de toute la page, « Surface » tout ce qui repose dessus — cartes, encadrés, champs. « Couleur du texte » s’applique au texte courant, « Couleur d’accent » aux boutons, aux liens et à tout ce qui déclenche une action. « Texte sur les boutons » est le libellé posé sur l’accent ; si vous le laissez vide, nous le calculons pour qu’il soit lisible.
Vous définissez une couleur en cliquant sur sa pastille ou en saisissant sa valeur hexadécimale en dessous, par exemple #8A4B2E, puis vous validez avec Entrée. Une pastille en pointillés signifie : pas encore définie, le modèle décide. Le × à côté d’une couleur définie la libère à nouveau, et le petit i à côté de chaque rôle l’explique en une phrase.
- Ouvrez « Design » et choisissez « Couleurs ».
- Cliquez sur la pastille d’un rôle ou saisissez sa valeur hexadécimale.
- Vérifiez dans l’aperçu — l’enregistrement se fait tout seul.
Combinaisons sur la roue chromatique
« Explorer les combinaisons de couleurs » déplie la roue chromatique. Son grand point est la « Couleur de base », et c’est votre couleur d’accent : ce que vous choisissez sur la roue est aussitôt enregistré comme couleur d’accent. Vous faites glisser le point avec la souris ou le doigt ; quand il a le focus, les touches fléchées fonctionnent aussi, avec Maj pour avancer par pas plus grands. Le curseur « Luminosité » en dessous rend la couleur plus claire ou plus foncée.
À côté, vous choisissez une « Harmonie » : « Analogue », « Monochrome », « Complémentaire », « Complémentaire divisé », « Triadique », « Carré », « Nuances » ou « Les miennes ». La « Palette » en dessous affiche les couleurs assorties avec leur valeur hexadécimale ; « Utiliser comme… » sous une couleur l’applique à un seul rôle.
« Appliquer à la marque » répartit la palette d’un coup : la base comme accent, plus un arrière-plan clair, une surface claire, une couleur de texte foncée et un texte de bouton en noir ou en blanc — calculés pour être lisibles. Ensuite, vous pouvez modifier chaque rôle individuellement.
- Sous « Couleurs », dépliez « Explorer les combinaisons de couleurs ».
- Faites glisser le grand point sur votre couleur principale et choisissez une harmonie.
- Cliquez sur « Appliquer à la marque ».
Lisibilité
Sous la palette, l’encadré « Lisibilité » mesure quatre paires de couleurs : « Texte sur fond », « Texte sur surface », « Texte sur les boutons » et « Accent sur arrière-plan » — selon les WCAG, au moins 4,5:1. Chaque paire affiche son contraste et un verdict en toutes lettres : « Très bien lisible », « Bien lisible », « Limite — difficile à lire » ou « Illisible ». Une paire dont l’une des couleurs n’est pas encore définie n’est pas mesurée.
Si une paire n’est pas lisible, l’avertissement apparaît sur les deux couleurs (« Contraste insuffisant avec : … ») et l’encadré indique la conséquence pour chaque outil. « Remplacée dans : … » signifie que cet outil y affiche une couleur lisible à la place de la vôtre — le site web, le formulaire et WordPress du noir ou du blanc, la boutique d’abord sa propre couleur. « Conservée telle quelle dans : … » signifie que l’outil affiche exactement vos couleurs, même si elles sont difficiles à lire.
En dessous apparaît alors « Pour le rendre lisible » : jusqu’à trois palettes prêtes à l’emploi dans lesquelles chaque paire réussit. Nous calculons toutes les paires ensemble, pour qu’aucune correction n’en casse une autre — chaque couleur devient seulement plus claire ou plus foncée et garde sa teinte ; le texte sur les boutons reste votre couleur ou devient noir ou blanc. Pour chaque suggestion, un petit aperçu montre les quatre paires et, à côté, comment chaque couleur évolue. « Appliquer » applique la palette à votre marque, « Annuler » rétablit vos couleurs.
Des couleurs lisibles aident tout le monde : les personnes malvoyantes comme tous ceux qui regardent leur téléphone en plein soleil.
Vérifier le contraste en détail
« Vérifier le contraste en détail » examine une paire de près. En haut, vous choisissez la paire ; son rapport s’affiche en grand, par exemple 5,20 : 1. En dessous figurent le premier plan et l’arrière-plan, chacun avec une pastille et un curseur « Luminosité » — ce que vous modifiez ici modifie la couleur de votre marque.
Le tableau montre les niveaux atteints par la paire : « Grand texte », « Petit texte » ainsi que « Graphiques et interface », chacun pour AA et AAA, avec « Réussi » ou « Échec ». Le texte courant exige 4,5:1, les grands titres 3:1 ; pour un accent à côté du fond, 3:1 suffit. À côté, vous voyez la paire sous forme de petite page avec un titre et un paragraphe.
Si le contraste est insuffisant, « Suggestions — la même teinte, juste plus claire ou plus foncée » apparaissent : un clic applique la couleur proposée au rôle. Si la teinte ne permet vraiment pas d’y arriver, l’encadré vous indique que vous devez choisir à nouveau l’une des deux couleurs.
- Sous « Couleurs », dépliez « Vérifier le contraste en détail ».
- Choisissez en haut la paire qui n’est pas lisible.
- Cliquez sur une suggestion ou faites glisser le curseur « Luminosité » jusqu’à ce que « Réussi » apparaisse.