Texte sur boutons colorés : choisir la couleur sur fond

Une équipe déploie une refonte de marque, et le nouveau bouton principal — un bleu plus avenant et plus clair que l’ancien — sort avec le libellé blanc que portait chaque bouton avant lui. L’audit d’accessibilité revient quelques semaines plus tard : le libellé échoue au contraste. Personne n’a touché au texte ; c’est le fond qui a bougé dessous. L’association qui passait depuis des années a cessé de passer le jour où la marque s’est éclaircie.

Le texte d’un bouton coloré se vérifie contre le fond sur lequel il repose, pas contre la page — et les fonds de luminosité moyenne sont le piège : il existe une bande de couleurs de marque où ni le texte blanc pur ni le texte quasi noir ne franchit le seuil de 4,5:1 pour des libellés à taille de corps. Les systèmes résolvent cela par une couleur sur fond dérivée — un rôle de texte calculé pour chaque fond avec un seuil de contraste strict, qui se rabat sur un point d’ancrage quasi blanc ou quasi noir lorsqu’aucune marche de la rampe ne passe. Comment cette bande fonctionne, et comment la contourner par le design, c’est le sujet de cette page de notre guide des échelles de couleur.

Quelle paire de contraste est réellement mesurée ?

Le libellé contre le fond — rien d’autre. Un bouton bleu sur une page blanche met en jeu trois couleurs, et la paire qui détermine si le libellé est lisible, c’est libellé-sur-bleu. Les seuils viennent du minimum de contraste de WCAG : 4,5:1 pour le texte de taille ordinaire, assoupli à 3:1 pour le « grand » texte — 24px et plus, ou 18,66px et plus si gras. La plupart des libellés de boutons ne sont ni l’un ni l’autre, donc 4,5:1 est le seuil de travail.

Passons aux chiffres sur le bleu utilisé partout dans ce hub, #2563eb (oklch(0.546 0.215 262.9)) : le texte blanc dessus mesure ≈5,2:1 — passe avec de la marge. Mais le texte quasi noir (classe #111) sur le même fond mesure ≈3,6:1 — échoue. Ce fond n’a qu’une seule direction viable, et il se trouve que c’est celle que privilégie la convention. Toutes les marques n’ont pas cette chance.

Où se trouve la zone de danger ?

Éclaircissez la marque et regardez le résultat basculer. Un bleu plus clair de la classe #4A8CF7 — autour de L 0,65 en OKLCH — donne au texte blanc ≈3,3:1 (échec pour du texte à taille de corps) tandis que le texte foncé franchit désormais ≈5,7:1 confortablement. Quelque part entre ces deux bleus, les deux options échangent leur place, et dans la bande de croisement — des fonds autour de L ≈0,58–0,62 — ni le blanc pur ni le quasi noir n’atteint 4,5:1. Cette bande est la zone de danger, et elle n’a rien d’exotique : les tons moyens avenants et saturés sont précisément là où beaucoup de marques contemporaines aiment se situer.

La façon intuitive de le retenir : le texte blanc a besoin d’une scène sombre et le texte foncé d’une scène claire, et un fond de luminosité moyenne n’est ni l’un ni l’autre. Il se tient au milieu de la bascule, là où personne n’a assez de bras de levier.

Qu’est-ce qu’une couleur sur fond, et comment est-elle dérivée ?

La réponse système consiste à faire du libellé un rôle dérivé plutôt qu’un choix bouton par bouton. Parmi les ~17 rôles sémantiques que Scale Composer dérive par surface figure onFill : la couleur de texte pour du contenu posé sur un fond coloré, choisie avec un seuil WCAG strict — et lorsqu’aucune marche de la rampe ne passe contre le fond, le rôle se rabat sur un point d’ancrage système, le quasi blanc ou le quasi noir qui l’emporte au contraste brut. La dérivation remplace la supposition : chaque fond — y compris les fonds fonctionnels comme error et success — reçoit une couleur de libellé qui a été vérifiée au moment de la génération, et un futur changement de marque redérive la réponse au lieu de l’invalider en silence.

Ouvrez la dérivation de la couleur sur fond dans Scale Composer — le fond de marque avec son rôle onFill dérivé, le ratio de contraste qu’il franchit, et la valeur APCA à côté.

Pourquoi le réflexe « mets du blanc » persiste-t-il ?

Deux raisons honnêtes. Sur le plan esthétique, le blanc sur couleur paraît plus net à beaucoup d’yeux — le texte foncé sur un fond coloré a un air utilitaire que certaines marques rejettent. Et l’exception pour le grand texte brouille les cartes : un libellé gras de 19px n’a besoin que de 3:1, si bien qu’une association qui échoue à l’audit pour un bouton passe pour son grand frère, et les équipes généralisent à partir du bouton qu’elles ont testé. L’exception est réelle — des traits plus grands et plus épais ont réellement besoin de moins de contraste pour être lisibles — mais elle ne sauve que les boutons qui atteignent effectivement le seuil de taille, ce que la plupart ne font pas.

Quelles sont les échappatoires quand la marque se situe en pleine zone ?

Trois, à peu près dans l’ordre où les systèmes y recourent :

• Assombrir le fond d’une marche. Le choix discret qu’ont fait beaucoup de systèmes : les boutons utilisent le 600 plutôt que le 500, précisément pour que le texte blanc franchisse le seuil. La teinte de marque survit ; le fond descend d’une marche sur sa propre rampe — le même geste qui dérive les états survolé et enfoncé.
• Adopter le texte foncé. Material 3 a emprunté cette voie à travers ses palettes tonales — des associations foncé-sur-tonal par défaut. Cela paraît contemporain une fois passée l’étrangeté initiale, et cela ouvre la moitié claire de la rampe pour les fonds.
• Se qualifier comme grand texte. Mettez le libellé en gras et à 18,66px ou plus, et le 3:1 s’applique. Légitime, mais fragile — cela lie une décision de couleur à une décision de typographie, et la prochaine personne qui réduira le libellé brisera le contrat de façon invisible.

Un paragraphe sur l’instrument plus récent : APCA, le modèle de contraste autour duquel se construit la prochaine génération de WCAG, note la zone médiane plus finement que le ratio, en distinguant des associations que la règle des 4,5:1 met dans le même sac. Le Scale Composer affiche la valeur Lc à côté de chaque ratio sans rendre de verdict, car les seuils de l’APCA dépendent de l’usage. Comme deuxième avis dans la zone de danger, c’est exactement là que ce grain plus fin est utile.

Trouvez la limite de votre propre marque

Savoir si votre marque se tient tranquillement d’un côté du croisement ou à l’intérieur, c’est une mesure, pas une supposition. Chargez un fond de luminosité moyenne et regardez la dérivation de la couleur sur fond travailler le cas limite — ajustez la luminosité du fond marche par marche et voyez où le libellé dérivé bascule du blanc au foncé, et où le point d’ancrage système doit intervenir parce que la rampe elle-même n’a rien qui passe. Ce point de bascule, trouvé une fois, vaut une page de recommandations : il vous dit exactement combien de marge votre couleur de marque possède avant que ses boutons ne se mettent à quereller leurs propres libellés.