Comment changer les couleurs de mon app ?

Voici le rôle de chaque couleur, comment les changer pour toute l'app, et comment donner sa propre couleur à un seul élément.

Dans le panneau Couleurs, les quatre « Couleurs principales » puis les deux « Couleurs secondaires » ont chacune un rôle, le même dans toute l'app. Les voici dans l'ordre du panneau, comme sur l'image.

1. Le texte principal, les titres et le texte des articles.
2. L'accent, l'information sous le titre, l'adresse d'un événement, l'icône d'une action sélectionnée.
3. Le texte secondaire, l'information au-dessus du titre (date, catégorie), les auteurs, le lien vers la liste complète.
4. Le fond des surfaces, les cellules et les en-têtes de widget.
5. Les bordures, autour des cellules.
6. Le fond secondaire, celui d'un widget quand vous lui en donnez un.

Dans une app GoodBarber, une couleur a donc une fonction, pas une place. Si votre accent est bleu, tout ce qui porte l'accent devient bleu, d'un écran à l'autre. Et quand vous changez de teinte, le texte reste du texte, le fond reste du fond. Les zones de l'app, le « Header », le menu, les boutons, ont leurs propres réglages, dans le même panneau. Le jaune des pastilles de date, le 7 sur l'image, vient ainsi des « Autres boutons ».

Voici deux fois le même écran, et une seule couleur a changé entre les deux, l'accent. À gauche, il a la couleur du texte, et tout se lit au même niveau. À droite, il passe au bleu de la marque, et avec lui l'information sous le titre de la notice et l'adresse de chaque répétition, avec son icône. L'œil trouve aussitôt ce qui est utile. Ni les titres, ni les fonds, ni les polices n'ont bougé.

Un seul réglage porte loin. Sur l'une de nos apps GoodBarber, changer la couleur du texte principal a repeint 95 réglages d'un coup, dans toute l'app, sans ouvrir un seul écran. C'est notre principe « No design burden », pour que la cohérence ne soit jamais à votre charge.

Pour juger votre réglage, regardez l'aperçu avant d'appliquer, puis parcourez deux ou trois pages. Si l'accent saute aux yeux là où il ne devrait pas, c'est sans doute l'élément qui le porte qu'il faut retoucher, dans son panneau de design.

Ces quatre apps utilisent les mêmes rôles, et pourtant elles ne se ressemblent pas. La différence tient aux réglages où chacune met sa couleur.

• Eastside Music Workshop met son bleu dans l'accent, qui colore ici l'adresse d'une répétition, et son jaune dans les « Autres boutons », qui colorent les pastilles de date.
• Blandas Astronomy Club met son ambre dans les réglages de sa barre d'onglets, et ici seul l'onglet en cours s'allume.
• Unit 7 pose son vert fluo en fond de l'onglet actif, un aplat avec son nom écrit dessus.
• Tweed & Cheviot met son rouge dans l'accent, mais n'affiche l'information sous le titre que là où elle compte, ici le chiffre à retenir.

À vous de choisir où mettre la vôtre. Demandez-vous ce qu'elle doit dire, ce qui est actif, ce qui est nouveau, ce qui attend un geste.

Mon réglage préféré ne se remarque pas. Pour le fond des surfaces, je ne mets jamais #FFFFFF, mais un blanc légèrement teinté, #FFF8ED chez Eastside, posé sur un « Fond de l'app » un cran plus sombre, #EDE7DD. Les cellules se détachent sans ombre, et l'écran prend une matière, comme du papier. Pour le texte principal, jamais #000000 non plus, mais un presque-noir coloré, #23252B ici. Le noir pur sur du blanc donne le contraste maximal, 21:1, que je trouve dur sur une longue lecture. #23252B sur #FFF8ED garde 14,5:1, le double du niveau le plus exigeant des WCAG (7:1), avec la douceur en plus.

Trois valeurs, et toute l'app y gagne, les titres, les textes, les cellules. C'est ce que permet le rôle, régler une fois, pour partout.

Les couleurs en bref

• Dans une app GoodBarber, les couleurs de toute l'app se règlent dans un seul panneau, vingt réglages dont six couleurs qui portent chacune un rôle.
• Une couleur a une fonction, pas une place, le texte principal, l'accent, le texte secondaire, le fond des surfaces, les bordures, le fond secondaire.
• Tout se règle dans le panneau Couleurs, un thème, la Palette magique ou une seule couleur, puis « Appliquer », qui repeint l'app entière.
• Un élément se retouche dans le panneau de sa section ou de son widget, ou clé par clé avec l'extension gratuite Édition avancée.
• Réglez le thème en premier, les détails ensuite.
• Deux réglages de designer, jamais de blanc pur pour les surfaces, jamais de noir pur pour le texte.