Canaux alpha et opacité des couleurs en CSS

Alpha exprime l’opacité, pas une autre couleur

Un canal alpha ne crée pas une version pâle autonome d’une couleur. Il détermine la contribution du premier plan lorsqu’il est composé sur un arrière-plan. Le résultat visible dépend donc des deux couleurs et de chaque couche intermédiaire. Le même rgb(0 0 0 / 50%) devient gris moyen sur blanc, plus sombre sur gris et peut disparaître sur noir. Alpha s’écrit couramment comme un nombre de 0 à 1 ou un pourcentage de 0% à 100%. Il représente l’opacité : une valeur supérieure signifie davantage de premier plan, et non davantage de transparence.

Le mot-clé transparent représente une couleur entièrement transparente. Il est utile dans les dégradés et transitions, mais une extrémité transparente conserve des composantes colorées susceptibles d’intervenir pendant l’interpolation selon l’espace et ses règles. Il ne faut pas supposer que toute transition vers transparent revient à diminuer seulement l’alpha de l’autre extrémité. Quand l’interpolation exacte compte, indiquez explicitement les deux couleurs terminales dans la notation choisie et testez le dégradé. Pour une superposition ordinaire, une couleur avec alpha après la barre exprime souvent mieux l’intention.

Dans un HEX à huit chiffres, alpha vient en dernier

Le HEX à huit chiffres suit l’ordre #RRGGBBAA : l’octet alpha vient après rouge, vert et bleu. #4F46E580 signifie rouge 4F, vert 46, bleu E5 et alpha 80 ; ce n’est pas une séquence ARGB. La forme courte #RGBA développe chaque chiffre en le répétant, comme #RGB. Un octet alpha ne comportant que 256 valeurs discrètes, 80 en hexadécimal vaut 128/255, soit environ 50,2%, et non exactement 50%. Lorsqu’un pourcentage décimal lisible est important, la notation fonctionnelle évite d’avoir à deviner la valeur de l’octet.

.alpha-examples {
  --overlay-a: #4f46e580;
  --overlay-b: rgb(79 70 229 / 50%);
  --overlay-c: hsl(243.4 75.4% 58.6% / 0.5);
}

La notation fonctionnelle rend alpha explicite

La syntaxe moderne de rgb(), hsl(), hwb(), lab() et oklch() place alpha après une barre oblique. Il peut s’agir d’un nombre ou d’un pourcentage, ce qui rend rgb(79 70 229 / 50%) facile à contrôler. Les anciens noms rgba() et hsla() restent des alias de compatibilité, mais rgb() et hsl() modernes acceptent déjà alpha. Alpha n’étend pas le gamut et ne modifie pas les coordonnées des autres canaux. Gardez les unités valides pour la fonction choisie et ne mélangez pas les virgules historiques avec la grammaire moderne à espaces et barre.

• 0 et 0% sont transparents ; 1 et 100% sont totalement opaques.
• Dans #RRGGBBAA, AA est toujours la dernière paire.
• La valeur huit bits 80 représente 128/255, soit environ 50,2% d’opacité.
• L’alpha après une barre appartient à la couleur et ne change pas les autres peintures.

Alpha et opacity n’ont pas la même portée

L’alpha intégré à une couleur affecte uniquement cette peinture : un fond translucide n’atténue pas automatiquement le texte et les enfants. La propriété opacity s’applique à tout l’élément après rendu de son contenu dans un groupe ; descendants, bordures, texte, ombres et arrière-plan sont donc atténués ensemble. opacity convient rarement pour créer un panneau translucide derrière un texte qui doit rester opaque. Un pseudo-élément ou une couche séparée donne un contrôle indépendant. Le comportement interactif est également séparé : opacity: 0 ne désactive ni les événements du pointeur ni la focalisation.

La composition change les canaux visibles

La composition calcule la sortie à partir du premier plan, du fond et d’alpha. Plusieurs couches translucides se combinent ; répéter le même jeton alpha dans des superpositions imbriquées ne produit pas une couleur finale prévisible sans connaître la pile. Filtres, modes de fusion, images, dégradés et effets appliqués à l’arrière-plan ajoutent des dépendances. Les outils de développement peuvent montrer une couleur résolue, mais l’accessibilité concerne les pixels de l’état réel. Incluez les fonds des états de survol, de focalisation, de désactivation et de sélection, ainsi que les voiles modaux. Un échantillon présenté uniquement sur blanc ne prouve rien pour tous les composants.

.notice {
  background: rgb(255 255 255 / 92%);
  border-color: rgb(15 23 42 / 18%);
}

.disabled {
  opacity: 0.55;
}

L’accessibilité dépend du fond final

Le contraste WCAG est évalué entre les couleurs finales du premier plan et de l’arrière-plan. Un texte translucide ne possède pas un rapport unique indépendant de son fond. Une superposition peut aussi réduire ou augmenter le contraste du contenu inférieur. Pour du texte sur des images variables, fournissez une surface contrôlée opaque ou suffisamment stable, ou calculez le pire fond admis. Ne revendiquez pas la conformité à partir de coordonnées RGB non composées. Les seuils du texte normal et agrandi dépendent du critère, mais nécessitent toujours les luminances relatives des couleurs résolues.

• Vérifiez tous les fonds et états pris en charge.
• Utilisez l’alpha de couleur pour une peinture et opacity seulement pour atténuer volontairement un groupe.
• Mesurez le contraste après composition, pas seulement avec les canaux sources.
• Gardez le comportement interactif explicite même si l’élément est visuellement transparent.

Une méthode de revue fiable

Contrôlez le code alpha selon la syntaxe, la portée, l’état et la solution de repli. Vérifiez l’ordre #RRGGBBAA, qu’un octet n’a pas été copié depuis une API ARGB et qu’un pourcentage n’a pas été lu comme un taux de transparence. Décidez si une peinture ou le groupe entier doit s’atténuer. Inspectez chaque fond autorisé, forced-colors et les préférences pertinentes. Nommez les jetons par fonction, par exemple overlay ou border-subtle, plutôt que d’inscrire un fond supposé dans le nom. Tout changement de palette de fond impose de refaire les tests.