Organiser la colorimétrie en vue d'un Design System

Client

Le groupe Thom est une entité qui regroupe plusieurs grandes marques sur le marché européen des bijouteries et de l'horlogerie. On compte pas moins de 7 enseignes internationales et compte plus d'un millier de magasins en France, en Italie, au Benelux et en Allemagne avec la promesse de rendre accessible le bijou au plus grand nombre.

Le contexte

Dans le cadre de la refonte et des outils et des méthodes, nous avons travaillé sur la formalisation des palettes colorimétriques pour accroître la cohérence visuelle des marques.

Les objectifs

• 🎯 Structurer les palettes de couleurs pour chaque marque
• 🎯 Appliquer les normes d'accessibilité WCAG 2.1 et APCA
• 🎯 Mettre en place une nomenclature systémique pour faciliter l'usage des couleurs

Structurer les palettes

Pour répondre aux besoins des équipes design et dev, on adopte une approche structurer

Suite au recensement des couleurs et des cas d'usages Ui, on procède à la création de la palette avec une échelle d'intensité sur plusieurs niveaux (100 à 900 pour notre cas) pour chaque teinte.

Voici un extrait d'une palette de couleur utilisée pour les contenus, une teinte de "gris moderne" :

Appliquer les normes d'accessibilité

Afin de mettre en place les bonnes pratiques en termes d'accessibilité, on applique un double audit. Nous utiliserons les ratios de contrastes WCAG 2.1 (AA, AAA) et le contraste percetuel APCA en tenant en compte des contextes d'usage spécifiques (textes, fond...)

Historiquement, la norme la plus répandue est celle du WCAG 2.1 développée par W3C. Le ratio est exprimé de 1:1, représentant le plus faible ratio de contraste, à 21:1 représentant le contraste maximal. Cependant, cette norme présente certaines limites et nous venons compléter notre audit avec une méthode complémentaire.

Face aux limites, nous utiliserons également une approche plus récente avec APCA développée par Myndex Research. Le contraste est exprimé sur une échelle de -100 à +100, les valeurs positives désignent du texte sombre sur un fond clair et inversement.

La conclusion de cette évaluation ? On observe que la plupart des teintes analysées n'atteignent pas les niveaux de contrastes recommandés selon WCAG 2.1 ou APCA. Dans ce cas, nous aurons à retravailler les teintes selon les usages pour correspondre aux critères de contrastes.

Poser une nomenclature systémique

Résultats de l'organisation colorimétrique

Le fait d'organiser et de structurer les palettes a permis de faire le point au sein des équipes et dans la pratique. Dans l'ensemble pour 4 marques du groupe, nous avons organisé environ 30 palettes de couleurs, une centaine de recommandations d'usages (par la nomenclature systémique) et de mettre en avant les critères d'accessibilité à retravailler afin de répondre aux recommandations.

Sur le plan des équipes, cela a été tout aussi bénéfique. Une structuration claire de la colorimétrie amène à fluidifier les étapes de conception, d'intégration et de validation.