Palettes de couleurs d'accent : 16 accents et l'étiquette dont chacun a besoin

Une couleur d'accent est la seule couleur de votre interface qui veut dire « touche ici ». Elle ne fonctionne que si les mots posés dessus sont lisibles, c'est donc l'étiquette qui décide quel accent est un bon accent. Voici seize accents en quatre tests, avec chaque code hex et l'étiquette que chacun accepte.

Ce qu'un accent doit supporter

Un accent se juge à ce qui arrive quand on pose un mot dessus. L'étiquette doit être lisible, et le bouton doit se détacher de la page derrière lui.

Cela donne quatre tests. Accepte-t-il une étiquette blanche ou foncée, ou tombe-t-il au milieu où aucune ne marche ? Peut-il porter un petit texte de tag ? Est-il trop pâle pour être un bouton, comme Butterscotch Gold #F7C873 ?

Chaque palette ci-dessous est une encre, un accent et une surface, et la dernière tuile montre le test.

Quelle étiquette l'accent accepte-t-il

Teal, Cobalt et Rose sont assez foncés pour qu'une étiquette blanche se lise de l'autre bout de la pièce. Amber #C88A16, non.

Teal

#10312E

Deep Sea

#0E7C6B

Teal

#ECF3F1

Chalk

Enregistrer

Blanc sur Teal

Un bleu-vert profond qui porte une étiquette blanche avec une large marge.

Cobalt

#171C33

Navy Ink

#2F4BD6

Cobalt

#ECEEF7

Mist

Enregistrer

Blanc sur Cobalt

Le plus solide des quatre. Le blanc sur Cobalt se lit de l'autre bout de la pièce.

Rose

#2E1E24

Plum Ink

#C2445F

Rose

#F8EEEF

Shell

Enregistrer

Blanc sur Rose

Rose est le plus clair des trois accents à étiquette blanche, donc celui qui a le moins de marge. Ne l'éclaircissez pas davantage.

Amber

#2C2415

Bark

#C88A16

Amber

#F6F0E4

Oat

Enregistrer

Bark sur Amber

Amber est l'honnête du groupe. Le blanc dessus échoue, et la solution n'est pas un ambre plus foncé : composez l'étiquette en Bark et gardez la couleur exactement telle quelle.

Voilà tout le travail d'un accent : survivre aux mots qu'on pose dessus. Amber montre que la solution est rarement une autre couleur. Changez l'étiquette, gardez la marque.

La zone morte des tons moyens

Certains accents se situent au milieu de l'échelle de luminosité : trop clairs pour du texte blanc, trop sombres pour du texte foncé. Sur ces quatre, deux s'en sortent dans des directions opposées, et deux sont coincés.

French Winery

#9A0A2C

French Winery

Enregistrer

Blanc sur French Winery : réussi

Enregistrer

Midnight Express #1D2433 sur French Winery : échec

#F4EEE4

Magnolia Petal

Assez foncé pour que le texte blanc fonctionne. French Winery sort de la zone morte en s'assombrissant.

Wild Forest

#009041

Wild Forest

Enregistrer

Blanc sur Wild Forest : échec

Enregistrer

Nightwalker #2B1A35 sur Wild Forest : échec

#FBEFEE

Vintage Porcelain

Un vert frais pile au milieu. Le blanc échoue dessus, le foncé aussi. Un cran plus sombre et le blanc passe : retouchez le vert avant de dessiner le moindre bouton.

Glowing Lantern

#FFBB40

Glowing Lantern

Enregistrer

Blanc sur Glowing Lantern : échec

Enregistrer

Aztec #153023 sur Glowing Lantern : réussi

#F1F5F9

Silent Snowfall

Assez clair pour que le texte foncé fonctionne. Glowing Lantern sort de la zone morte dans l'autre sens, en s'éclaircissant, son étiquette est donc Aztec, jamais blanche.

Pink Orchid

#C157AD

Pink Orchid

Enregistrer

Blanc sur Pink Orchid : échec

Enregistrer

Royal Neptune #0F2E30 sur Pink Orchid : échec

#EEF4F1

Snowflake

Un rose de ton moyen avec le même problème que Wild Forest. Un cran plus sombre et le blanc passe.

Le grand texte a une barre plus basse que le petit, donc un gros titre peut sembler correct sur ces couleurs alors que l'étiquette du bouton échoue. Vérifiez le plus petit texte que vous poserez sur l'accent. Si votre accent de marque tombe au milieu, retouchez-le avant de construire le jeu de boutons.

Un bouton n'est pas un badge

Un badge, c'est généralement l'accent à environ 15 % pour le fond, avec l'accent complet pour le texte. Cette teinte éclaircit le fond, et le texte dessus perd en contraste. Un accent peut porter une étiquette de bouton blanche et pourtant échouer dans son propre badge. La troisième tuile montre l'accent à 15 % sur la surface.

Peacock Pride

#006262

Peacock Pride

Enregistrer

Étiquette de bouton blanche : réussi

Nouveau

Peacock Pride sur teinte #D5E1D2 : réussi

Nouveau

Wood Bark #2A2320 sur teinte : réussi

Un bleu-vert profond qui survit aux deux rôles sur Cosmic Latte #FBF7E6.

Furnace

#D23D20

Furnace

Enregistrer

Étiquette de bouton blanche : réussi

Nouveau

Furnace sur teinte #EAD9D1 : échec

Nouveau

Elite Teal #13302A sur teinte : réussi

Un bouton rouge-orangé costaud qui devient faible en tag. Sur White Glove #EEF4F0, composez le texte du tag en encre et le badge se lit bien.

Purple Heart

#652A97

Purple Heart

Enregistrer

Étiquette de bouton blanche : réussi

Nouveau

Purple Heart sur teinte #E6D3DF : réussi

Nouveau

Black Velvet #1B2838 sur teinte : réussi

Assez foncé pour que la teinte derrière, sur Vanilla Blush #FDF1EC, ne change rien.

French Blue

#0075C9

French Blue

Enregistrer

Étiquette de bouton blanche : réussi

Nouveau

French Blue sur teinte #D9E3E3 : échec

Nouveau

Nightly Voyager #2A1630 sur teinte : réussi

La même histoire que Furnace : un bouton qui marche et un badge qui ne marche pas. Sur Powdered #FFF6E8, l'encre sauve le texte du badge.

Si votre accent est un ton moyen, composez le texte des badges et des tags en encre. Les tags de Furnace comme les badges de French Blue deviennent faciles à lire dès que le texte passe à l'encre.

Le vif n'est pas le bouton

Un bouton doit se détacher nettement de la page sur laquelle il repose. Un accent pâle et vif sur une page crème n'y arrive pas, même s'il est la plus jolie couleur de la palette.

Alors échangez les rôles. La couleur foncée devient le bouton, et la vive devient le tag, le badge et l'état sélectionné. Deux de ces palettes font cela, et les deux autres ont un accent assez foncé pour être touché.

Butterscotch

Enregistrer

Storm Graphite #434343 bouton, Butter Canvas #FAEBCD étiquette : réussi

Nouveau

Butterscotch Gold #F7C873 tag : réussi

Enregistrer

Butterscotch Gold sur la page : à peine visible

Butterscotch Gold est magnifique et disparaît comme bouton sur Butter Canvas. Échangez les rôles : Storm Graphite se touche, l'or devient le tag.

Ocean Breeze

Enregistrer

Midnight Navy #0C2C55 bouton, Vanilla Linen #EDEDCE étiquette : réussi

Nouveau

Ocean Breeze #629FAD tag : réussi

Enregistrer

Ocean Breeze sur la page : à peine visible

Un bleu-vert doux sur un lin pâle. Même solution : Midnight Navy est le bouton, Ocean Breeze est le tag et l'état sélectionné.

Silent Grove

Enregistrer

Silent Grove #215E61 bouton : réussi

Garder

Lien sur Morning Paper #F5FBE6 : réussi

#233D4D

Blue Monolith #233D4D

Celui-ci sait tout faire. Un bleu-vert foncé est à la fois le bouton et le lien sur Morning Paper, avec une étiquette blanche qui se lit sans effort.

Wild Berry

Enregistrer

Wild Berry #CF4173 bouton : réussi

Garder

Lien Wild Berry sur Peach Cashmere #F6D8BD : échec

Garder

Lien Deep Berry Plum #5D3140 : réussi

Wild Berry passe de justesse comme bouton avec une étiquette blanche. Comme texte sur Peach Cashmere, il est insuffisant, donc ses liens passent en Deep Berry Plum.

Un lien, ce sont des mots : il doit franchir la barre du texte, pas seulement celle du bouton. Quand l'accent passe tout juste comme bouton, composez les liens en encre.

Les seize accents dans un seul tableau

Les chiffres, pour celui qui défend le choix

Chaque association ci-dessus a été mesurée avec la formule de contraste WCAG 2. C'est le seul tableau du papier avec des ratios.

Comment tester votre propre accent

1. Essayez le blanc d'abord. Si le blanc passe sur l'accent, comme sur Cobalt #2F4BD6, votre étiquette est réglée.
2. Essayez ensuite votre encre la plus sombre. Si le blanc échoue et que l'encre passe, composez toutes les étiquettes en encre, comme pour Amber et Glowing Lantern.
3. Si les deux échouent, déplacez l'accent. Un cran plus sombre ou plus clair vous sort du milieu.
4. Testez le tag séparément. Fabriquez la teinte à 15 % et vérifiez l'accent comme texte dessus. S'il échoue, composez les tags en encre.
5. Vérifiez le bouton contre la page. Un accent pâle est un tag, pas un bouton. Nos papiers sur le contraste de couleur accessible et les erreurs de couleur en UI couvrent les seuils.

Récupérez les fichiers de chaque set

Chaque set est un jeu de couleurs gratuit sur Forge, avec codes à copier d'un toucher, fichiers de nuancier pour Figma et Adobe (ASE), variables CSS et design tokens.

Jeu de couleurs gratuit

Encre, surface, une seule chose à toucher : Teal, Cobalt, Rose, Amber

Chaque hex, plus nuanciers ASE, variables CSS et design tokens.

Ouvrir le set

Jeu de couleurs gratuit

La zone morte : French Winery, Wild Forest, Glowing Lantern, Pink Orchid

Chaque hex, plus nuanciers ASE, variables CSS et design tokens.

Ouvrir le set

Jeu de couleurs gratuit

Un bouton n'est pas un badge : Peacock Pride, Furnace, Purple Heart, French Blue

Chaque hex, plus nuanciers ASE, variables CSS et design tokens.

Ouvrir le set

Jeu de couleurs gratuit

Le vif n'est pas le bouton : Butterscotch, Ocean Breeze, Silent Grove, Wild Berry

Chaque hex, plus nuanciers ASE, variables CSS et design tokens.

Ouvrir le set

FAQ

Quelle couleur de texte sur un bouton de couleur d'accent ?

Du blanc si l'accent est assez foncé, de l'encre foncée s'il est clair. Teal #0E7C6B prend du blanc. Amber #C88A16 prend du Bark #2C2415. Si aucun ne marche, l'accent est au milieu et doit bouger d'un cran.

Pourquoi le texte blanc échoue-t-il sur certains boutons colorés ?

Parce que le bouton est trop clair. Amber, Glowing Lantern #FFBB40 et Butterscotch Gold #F7C873 sont vifs, donc le texte blanc dessus est pâle. Les tons moyens comme Wild Forest #009041 échouent avec le texte blanc comme avec le texte foncé.

Comment choisir une couleur d'accent pour une palette d'UI ?

Choisissez l'étiquette d'abord. Décidez si l'accent portera du texte blanc ou foncé, puis prenez une couleur clairement d'un côté du milieu. Vérifiez-la comme bouton, comme texte de badge et contre la page.

Pourquoi mon accent est-il correct en bouton mais mauvais en badge ?

Un badge place l'accent en texte sur une teinte claire de lui-même, ce qui abaisse le contraste. Furnace #D23D20 et French Blue #0075C9 portent facilement une étiquette de bouton blanche et échouent en texte de badge. Composez le texte du badge en encre.

Une couleur d'accent claire peut-elle être un bouton ?

Rarement. Il doit se détacher de la page derrière lui, et un accent pâle sur une page crème y parvient à peine. Faites d'une couleur foncée le bouton et utilisez l'accent pâle comme tag ou état sélectionné.

Sources

• Noms de couleurs et codes hex issus des sets de couleurs UX Brainy sur Forge, vol 02, 06, 07 et 11. Le contraste a été calculé avec la formule WCAG 2 contre la surface sur laquelle repose chaque couleur.
• Les seuils de contraste pour le texte et pour les formes suivent W3C WCAG 2.2 : Contrast (Minimum) et Non-text Contrast.
• Le hex de la teinte dans chaque tuile de badge est l'accent à 15 % sur la surface, dérivé de la palette.
• D'abord publié en quatre carrousels sur UX Brainy : Votre accent décide de la couleur de l'étiquette qu'il porte, La zone morte, Un bouton n'est pas un badge et Le vif n'est pas le bouton.