Catégories
Astuces et Design

Construire des composants flexibles avec transparence

En ajoutant une touche de transparence, nous pouvons concevoir des composants qui s'adaptent automatiquement à leurs arrière-plans.

Un composant de panneau superposé en 3D sur un arrière-plan dégradé coloré. L'en-tête du panneau a un arrière-plan transparent et lit

Je conçois souvent des composants qui seront utilisés dans une grande variété de contextes. Plusieurs fois, j'ai conçu un composant sur un fond blanc, puis j'ai rencontré des problèmes en essayant d'utiliser ce même composant sur un arrière-plan gris ou coloré. Par exemple, prenez ce panneau:

Le panneau utilise un gris subtil (#ddd) pour dessiner une bordure entre son contenu et la page environnante. Mais lorsque l'arrière-plan de la page se rapproche de #ddd, la conception ne fonctionne pas aussi bien.

En utilisant la transparence, on peut conserver le même effet sur les arrière-plans blancs tout en assurant un contraste accru sur d'autres arrière-plans. Ici, j'utilise une couleur noire définie pour 0.135 opacité à la place: rgba(0, 0, 0, 0.135). Cela correspond #ddd sur fond blanc mais apparaît automatiquement plus sombre sur d'autres arrière-plans:

Cette technique fonctionne également bien sur les arrière-plans légèrement colorés. Le panneau reprendra les couleurs sous-jacentes et les affichera à travers le noir transparent:

Les choses deviennent encore plus intéressantes lorsque nous utilisons nos panneaux sur des fonds de dégradés, de motifs ou d'images:

Les couleurs du texte peuvent également être rendues plus flexibles en ajoutant une touche de transparence. C'est beaucoup plus subtil que nos exemples précédents car le texte doit fortement contraster avec l'arrière-plan, mais vous pouvez voir que le texte est légèrement saturé avec la couleur d'arrière-plan.

Cela peut également être utilisé pour augmenter le contraste des couleurs du texte. Parfois, les conceptions demandent du texte gris sur fond blanc. Lorsque ces couleurs de texte sont réutilisées sur des arrière-plans plus sombres, elles peuvent perdre du contraste et devenir inaccessibles. En utilisant un noir transparent au lieu d'un gris, nous pouvons augmenter le contraste sur les arrière-plans non blancs:

Cette technique peut être vraiment amusante et flexible, mais il y a quelques mises en garde à prendre en compte:

  1. Lorsque vous utilisez la transparence, il peut être facile de se retrouver avec des combos qui n’ont pas un niveau de contraste accessible. Assurez-vous de vérifier que vous suivez les directives de contraste WCAG chaque fois que vous utilisez cette technique. (Et rappelez-vous que les directives sont le minimum les exigences et non les objectifs.)
  2. Cette technique fonctionne mieux lorsque vous utilisez un noir ou un blanc transparent. Si vous utilisiez un bleu transparent sur un fond rose, le bleu pourrait rapidement commencer à se sentir boueux et désaturé.

Tant que vous êtes conscient de ces mises en garde, cela peut être une technique vraiment utile. Au lieu de créer un ensemble de différentes variantes de composants spécifiques au contexte, vous pouvez créer une variante qui s'adapte à différents arrière-plans.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *