Nous avons vu dans [l’article précédent](/articles/utiliser-hsl-pour-vos-couleurs/) tout l’intérêt qu’il y avait à utiliser HSL pour créer et manipuler les couleurs, mais il est des domaines où cela présente tellement d’avantages qu’il est presque surprenant que les développeurs n’en profitent pas plus.

<figure role="group"><img src="/images/holi-2x.jpeg" alt="jeune fille recouverte de peinture de toutes les couleurs et tirant la langue"/></figure>

<h2>Créer des prototypes rapides de schémas de couleurs</h2>

[HSL](https://fr.wikipedia.org/wiki/Teinte_saturation_lumière) est idéal pour la création rapide de [schémas de couleurs](http://en.wikipedia.org/wiki/Color_scheme), en particulier pour les développeurs qui ne maîtrisent pas parfaitement le design ou la théorie des couleurs. <span aria-hidden="true" data-icon="&#9758;"></span> (_NdT : si c’est votre cas, pas d’inquiétude&nbsp;! Vous retrouverez dans la Cascade tout un tas d’articles et de ressources pour maîtriser les couleurs comme un pro, voyez la liste dans la [page du tag "couleur"](/tags/couleur)_). L’utilisation de quelques règles simples permet de créer des choix de couleurs harmonieux qui fonctionnent en toute situation.

Prenons un exemple, disons que vous avez une couleur principale et que vous voulez l’utiliser pour générer rapidement le schéma de couleurs d’un site. Admettons, par exemple, que vous ayez une couleur orange dérivée du logo du client, qui correspond à `hsl(30, 90%, 29%)`.

Pour générer instantanément une couleur complémentaire, il suffit d’ajouter 180 degrés à la valeur de la couleur&nbsp;: dans notre exemple, cela donne `hsl(210, 90%, 29%)`. Facile, non&nbsp;? Et si votre première couleur a une valeur supérieure à 180 degrés, pas de souci, votre navigateur saura “faire le tour du cadran de l’horloge” et convertir les valeurs supérieures à 360 degrés. Il sait même gérer les valeurs négatives.

Pour créer en un tournemain un schéma de couleurs monochromatique&nbsp;: prenez la valeur de saturation et soustrayez un tiers. Notre base de couleur est `hsl(30, 90%, 29%)`, les couleurs additionnelles seront donc `hsl(30, 60%, 29%)` et `hsl(30, 30%, 29%)`.

Pour un schéma de couleurs neutre&nbsp;: soustrayez et/ou ajoutez à la couleur un nombre de degrés identiques à chaque fois, mais jamais supérieur à 90°. Par exemple, à partir d’une couleur de 30°, on obtiendra `hsl(0,90%,29%)` et `hsl(60,90%,29%)`.

Pour un schéma de couleurs triadique, ajoutez 120° à la valeur de la couleur principale.

Bien utilisé, ceci élimine le débat sur la question de savoir “ce qui irait bien avec ça&nbsp;?” et vous aide à générer le design d’un site très rapidement.

<h2>Ajustement rapide de couleurs</h2>

Combien de fois un client vous a-t-il demandé “pourriez-vous éclaircir un peu le background&nbsp;?” Si vous avez spécifié les couleurs en [RGB](http://fr.wikipedia.org/wiki/Rouge_vert_bleu) ou en [Hexadécimal](http://fr.wikipedia.org/wiki/Noms_de_couleur_du_Web), il vous faudra ajuster trois composants simultanément, en faisant attention que l’un ne prenne pas plus d’importance que l’autre. Si votre schéma de couleurs est en HSL, rien de plus facile et sûr. Le background orange doit être plus sombre&nbsp;? Vous prenez votre background&nbsp;:

    body { background: hsl(60,100%,50%); }

...et vous réduisez la dernière composante (luminosité) :

    body { background: hsl(60,100%,40%); }

Et voilà ! Et si vous avez utilisé les techniques de schémas de couleurs dont nous avons parlé ci-dessus, il suffit d’ajuster les autres couleurs —&nbsp;tout aussi facilement.

<h2>Créer rapidement des variantes de couleurs</h2>

J’ai travaillé sur un article qui utilise [un dégradé radial](/articles/les-degrades-css/#radial) pour créer une lumière témoin sur le bouton que vous voyez ici (le rendu est meilleur sur Webkit au moment où j’écris ceci), basé sur ce travail de simurai&nbsp;:

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="http://codepen.io/simurai/pen/rJwpz/">
  Animated Radio Inputs</a> de <a href="/auteurs/simurai">simurai</a> dans <a href="https://codepen.io">CodePen</a></span>
</div>

Si l’on fait abstraction des préfixes constructeurs, le code CSS3 ressemble à ceci&nbsp;:

    //CSS
    input {
      background-image:
        radial-gradient( hsla(0,100%,90%,1) 0%,
        hsla(0,100%,70%,1) 15%,
        hsla(0,100%,60%,.3) 28%,
        hsla(0,100%,30%,0) 70% );
    }



<figure role="group"><img src="/images/red-button-compressor.jpeg" alt=""/><figcaption>Lumière témoin rouge, inspirée de simurai</figcaption></figure>

Si je veux une lumière bleue, tout ce que j’ai à faire c’est de faire tourner la composante couleur du code HSL&nbsp;:

    //CSS
    input {
      background-image:
        radial-gradient( hsla(200,100%,90%,1) 0%,
        hsla(200,100%,70%,1) 15%,
        hsla(200,100%,60%,.3) 28%,
        hsla(200,100%,30%,0) 70% );
    }



<figure role="group"><img src="/images/blue-button-compressor.jpeg" alt=""/><figcaption>Lumière témoin bleue, vite fait !</figcaption></figure>

La nouvelle lumière a la même intensité et la même brillance, dans une couleur différente. Pas besoin de bricoler entre les rouges, les verts et les bleus.

<h2>Quand ne faut-il &nbsp;<em>pas</em>&nbsp; utiliser HSL ?</h2>

Réponse courte : quand votre site doit être visible sur IE8 et avant. Si vous avez besoin de la compatibilité IE, [Sass peut automatiquement transférer les couleurs HSL en hexadécimal](http://thenewcode.com/982/Learning-Sass-With-CodePen-Part-Four-Color)... Donc vous pouvez commencer dès aujourd’hui à profiter de tout ce qu’HSL peut vous apporter&nbsp;!

3 raisons d'utiliser HSL pour vos couleurs


Le premier principe d'accessibilité du contenu dans les _[Web Content Accessible Guidelines](https://www.w3.org/TR/WCAG22/)_ est que le contenu doit être **perceptible**. Après tout, vous ne pourrez pas accéder à l'information ou à la fonctionnalité si vous ne savez pas qu'elle est là&nbsp;! Et apparemment, le moyen le plus efficace de s'assurer que les utilisateurs ne pourront pas distinguer votre contenu est de le définir dans une couleur qui ne se démarque pas de son arrière-plan —&nbsp;en d'autres termes, d'avoir un faible contraste de couleur.

Nous pouvons tous rencontrer un problème lié à un contraste insuffisant, pour diverses raisons —&nbsp;par exemple à cause du reflet du soleil sur notre écran&nbsp;— mais le contraste insuffisant d'un texte a un impact _démesuré_ sur les utilisateurs malvoyants tels que ceux qui ont des problèmes de vision ou qui sont daltoniens. Et pourtant, le texte à faible contraste est partout. Le rapport [WebAIM Million pour 2022](https://webaim.org/projects/million/) a révélé que près de 84 % des 1 million de pages d'accueil les plus populaires avaient au moins une violation de contraste insuffisant, avec une moyenne de 31,6 instances distinctes de texte faiblement contrasté par page d'accueil. [Un rapport de 2021 de Deque Systems (PDF)](https://accessibility.deque.com/hubfs/Accessibility-Coverage-Report.pdf#page=6) a révélé que le texte à faible contraste représentait 30 % des défauts d'accessibilité automatiquement détectables, ce qui en fait de loin le défaut d'accessibilité le plus courant.

Corriger l'insuffisance de contraste pourrait grandement contribuer à **rendre le Web plus utilisable**. Nous allons voir comment mesurer le contraste, corriger facilement un faible contraste et assurer un contraste suffisant dans nos sites à l'avenir.

## Obtenez un ratio

Le plus simple pour commencer est d'utiliser un contrôleur de contraste de couleur. Des outils tels que [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/) prennent une paire de couleurs que vous leur donnez et vous retournent un rapport de contraste. En attendant, si vous avez déjà déployé votre site et vos couleurs en direct pour le monde, vous pouvez utiliser des outils d'analyse d'accessibilité pleine page tels que l'extension [ax DevTools](https://www.deque.com/axe/devtools/), et ils effectueront des opérations de contraste des couleurs pour chaque bit de texte et d'arrière-plan sur votre page et identifieront les éléments spécifiques de votre page dont le contraste est insuffisant. Dans tous les cas, vous obtiendrez un rapport de contraste des couleurs.

Ces ratios prennent le format `<un certain nombre>:1`, allant de `1:1` (pas de contraste — vous avez comparé une couleur à elle-même) à `21:1` (contraste maximum, uniquement obtenu en comparant le noir et blanc). Plus le premier chiffre est élevé, plus il y a de contraste entre les deux couleurs.

Ce rapport n'est pas vraiment un score de la différence entre les deux couleurs, mais plutôt un score de la façon dont une couleur serait perceptible par dessus l'autre. Par exemple, en tant que personne non daltonienne, les couleurs CSS tomato `#ff6347` et cornflowerblue `#6495ed` me semblent très différentes&nbsp;:

<section class="demo" aria-label="Démo : deux cercles, un rouge tomate et l'autre bleu clair"><div class="swatch tomato"></div><div class="swatch cornflowerblue"></div></section>

Et pourtant, la tomate et le bleuet ont ensemble un très mauvais rapport de contraste des couleurs&nbsp;: seulement environ 1,009:1. C'est à peine mieux que la comparaison de n'importe quelle couleur avec elle-même&nbsp;! Si nous empilons ces couleurs l'une sur l'autre (avec nos excuses anticipées&nbsp;!), nous pouvons voir qu'ensemble elles sont difficiles, voire carrément douloureuses, à lire&nbsp;:

<section class="legibility demo" aria-label="Exemple: Texte de couleur rouge tomate sur un fond de couleur bleu fleur de maïs">
<strong>Qui a envie de lire ça ?</strong>
</section>

Les algorithmes de contraste de couleurs actuelllement disponibles pour obtenir ces rapports n'essaient pas de nous donner la différence mathématique pure entre deux couleurs, mais décrivent plutôt une différence plus subjective entre les deux couleurs, basée sur la perception humaine. Plus précisément, ils comparent la [luminance](https://fr.wikipedia.org/wiki/Luminance) relative des deux couleurs, ce qui revient essentiellement à savoir si une couleur est plus claire ou plus lumineuse que l'autre. Ici, la tomate et le bleuet sont à peu près aussi brillants, c'est pourquoi ils sont difficiles à lire ensemble.

### Utilisation des ratios

Maintenant que nous avons une idée de la façon dont on mesure le contraste entre deux couleurs, comment savons-nous quand le contraste est suffisant&nbsp;?

Dans le [critère de réussite 1.4.3](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html) des directives pour l'accessibilité des contenus Web, le World Wide Web Consortium définit deux points de repère clés dont nous devons nous souvenir&nbsp;:

- La plupart des textes ont besoin d'un rapport d'au moins 4,5:1 par rapport à leur arrière-plan.
- Les règles pour les textes plus volumineux sont un peu plus souples —&nbsp;un texte volumineux n'a besoin que de respecter un rapport de 3:1 par rapport à son arrière-plan.

## Comment améliorer votre score

Vous avez donc mesuré votre texte et déterminé qu'il ne répond pas aux exigences de contraste des couleurs. Que pouvez-vous faire pour régler la situation sans chambouler votre design&nbsp;?

En règle générale, j'aborde la correction du contraste des couleurs de deux manières différentes, au cas par cas :

- Choisir des couleurs plus claires et plus foncées
- Agrandir le texte

### Passez du côté Clair/Obscur

Votre approche principale pour résoudre les problèmes de contraste des couleurs consistera à modifier les couleurs sous-jacentes elles-mêmes.

En général cependant, vous vous retrouverez limité dans ce que vous pouvez faire si vous abordez le problème en modifiant les _teintes_ des couleurs. D'une part, les guides de style des marques ou des sites ont généralement des palettes de couleurs assez strictes, et le changement de teintes créera souvent des couleurs qui s'en écartent. D'autre part, comme l'a montré l'exemple précédent de tomate et bleuet, les teintes des couleurs ont souvent un impact très minime sur le rapport entre ces deux couleurs, surtout si ces couleurs ont des luminosités très similaires.

Au lieu de cela, il me semble que rendre une couleur plus claire et/ou l'autre couleur plus foncée a un impact plus profond sur le contraste, tout en restant plus cohérent avec le reste des composantes du design et plus proche de la sensibilité générale du site.

### L'agrandissement est parfaitement acceptable

Un texte plus grand et plus épais a tendance à être beaucoup plus facile à lire, même sur des arrière-plans à faible contraste, qu'un texte plus petit et plus fin. Par exemple, dans l'exemple suivant, les deux lignes de texte sont de la même couleur, mais si vous arrivez à discerner le texte, il sera plus facile d'en distinguer la première ligne, dont les caractères sont plus grands et plus gras :

<section class="gris" aria-label="Exemple: Text gris clair sur un fond gris encore plus clair: le texte en gras est à peu près lisible, le texte en petits caractères est illisible.">
<p><strong>Je suis plutôt plus facile à lire !</strong></p>
<p><small>Je suis bien plus difficile à lire !</small></p>
</section>

C'est à cause de cette différence que le WCAG est un peu plus indulgent pour le texte volumineux, qu'il définit comme un texte d'au moins `18 pt` ou, alternativement, comme un texte en gras et d'au moins `14 pt`. N'oubliez pas que `pt` est une unité de taille de police définie par le navigateur de l'utilisateur (un peu comme `rem`) —&nbsp;ce qui signifie, dans les paramètres par défaut de la plupart des navigateurs, que le seuil est d'environ 24 pixels, ou à la fois "en gras _et_ d'environ 19 pixels". Le texte qui répond à ce critère de dimensionnement n'a besoin que d'un rapport de `3:1` par rapport à son arrière-plan, selon le WCAG.

Vous pourrez parfois utiliser ce seuil plus indulgent à votre avantage, car au lieu de devoir choisir différentes couleurs, vous pourrez peut-être augmenter la taille ou le poids de votre police. Si vous utilisez uniquement cette approche pour atteindre vos seuils minimaux, ce correctif ayant tendance à être très contextuel ne s'appliquera probablement qu'à des éléments tels que les titres. Cependant, l'accessibilité ne consiste pas seulement à atteindre des seuils. Le WCAG est la barre minimale à franchir, mais une fois que vous avez franchi ces seuils minimaux, vous pouvez utiliser des tactiques telles que l'augmentation de la taille de la police, l'augmentation du poids de la police ou le choix d'une police de caractères plus épaisse pour offrir une expérience plus lisible, même s'ils n'améliorent pas votre score de contraste.

## Construire des approches systémiques pour assurer le contraste des couleurs

Ces approches fonctionnent bien pour ajouter des couleurs uniques à une page ou pour corriger un texte à faible contraste mis en évidence par un audit, mais ce n'est pas très durable pour les grands sites ou organisations.

De nombreuses organisations se tournent vers les systèmes de design pour communiquer leurs pratiques UI et UX, y compris leurs palettes de couleurs, ainsi que leurs connaissances institutionnelles sur le moment et la manière dont chaque couleur desdites palettes doit être utilisée. Ces systèmes de design sont un excellent endroit pour coder les connaissances sur les appariements de couleurs acceptables. Par exemple, un système de design peut déterminer des couleurs d'arrière-plan et des couleurs de texte acceptables pour les boutons, et ces couleurs auront certainement été choisies en fonction de rapports de contraste acceptables. Les designers et les développeurs peuvent tirer parti de ces décisions sans même avoir _vraiment besoin_ du contexte d'arrière-plan complet de la façon dont ces couleurs ont été choisies —&nbsp;il y a un [puits de succès](https://blog.codinghorror.com/falling-into-the-pit-of-success/) large et facile.

👉🏽 _NdT : comme rappelé dans l'article en lien ci-dessus, notre objectif n'est pas que l'utilisateur remporte une brillante victoire au terme de multiples épreuves et surprises, mais qu'il_ tombe simplement dans des pratiques gagnantes _en utilisant notre plateforme et nos frameworks. Faciliter les ennuis, c'est courir à l'échec_.

J'ai également entendu parler de systèmes de design qui deviennent encore plus explicites dans la façon dont ils communiquent des associations de couleurs accessibles. Une astuce que j'ai apprise de [Mike Aparicio](https://www.mikeaparicio.com/) réside dans la façon dont il nomme les nuances du coloris d'un système de design. Dans ses systèmes de design, chaque nuance d'une couleur reçoit un nombre de 100 à 900, où 100 est la nuance la plus claire, 600 est la nuance "de base", 900 est la nuance la plus foncée et les autres couleurs sont remplies entre les deux comme de besoin. Ses échelles de couleurs sont calculées de manière à ce que les couleurs "200" et plus claires soient toujours suffisamment claires pour contraster avec la teinte de base "600". Cette règle est assez facile à retenir pour les designers et les développeurs, ce qui garantit qu'ils sont beaucoup plus susceptibles de choisir des appariements acceptables. Vous pouvez l'entendre parler de cette approche sur [Frontend Horse](https://frontend.horse/episode/lets-make-a-design-system) et dans [ma propre émission Some Antics](https://www.youtube.com/watch?v=wX3z42LbfbI).

## Encore quelques éléments à garder en tête à propos du contraste

Les systèmes de rapport de contraste actuels sont assez soigneusement vérifiés, mais il y a quelques limitations, dont les suivantes&nbsp;:

- Les algorithmes actuels ne prennent pas en compte la question de savoir quelle couleur est au premier plan et laquelle est en arrière-plan, même si dans certaines paires de couleurs telles que le marron et le rose, une couleur est définitivement plus appropriée comme premier plan et non comme arrière-plan.
- Le gras de certaines polices de caractères n'est pas toujours très gras, ce qui signifie que vous pouvez répondre à la _lettre_ de l'exigence de texte en gras sans en respecter l'_esprit_.

Une future version des Directives pour l'accessibilité du contenu Web peut utiliser [un algorithme de contraste de couleur différent](https://github.com/Myndex/SAPC-APCA) qui utilise plus de facteurs tels que ceux-ci, mais [cela nécessite encore plus de vérification](https://yatil.net/blog/wcag-3-is-not-ready-yet). Si vous rencontrez certaines de ces limitations dans votre design et si vous pensez que votre design est techniquement conforme, je vous encourage à faire des tests utilisateur si possible, de préférence avec des utilisateurs malvoyants, pour vérifier si votre contenu est ou non lisible pour de vrais gens.

De plus, la couleur peut être une chose difficile à équilibrer&nbsp;! Si vous avez du mal à distinguer différents contenus avec des couleurs, envisagez de vous appuyer sur d'autres leviers et d'utiliser des outils tels que des icônes ou différentes tailles de police pour faire passer votre message&nbsp;! Cela garantit que vous [ne comptez pas uniquement sur la couleur](https://www.w3.org/WAI/WCAG22/Understanding/use-of-color.html) pour transmettre du sens, et la création de moyens redondants pour intégrer des informations dans votre design conduira presque toujours à une expérience plus accessible.

## Points à retenir en conclusion

Les problèmes de contraste des couleurs sont partout, et les éliminer réduirait considérablement les barrières d'accès sur le Web. Au cas par cas, je trouve plus simple de corriger un faible insuffisant en ajustant la luminosité ou l'obscurité des couleurs, plutôt que leur teinte ou leur saturation. Dans _certains_ cas (notamment les textes proéminents tels que les titres), vous pourrez peut-être tirer parti de la taille et de l'épaisseur de la police. À l'avenir, le contraste devrait être traité de manière systémique, typiquement par le biais de systèmes de design codifiés et, idéalement, contrôlé par des tests utilisateurs.


Améliorer un texte à faible contraste


Les variables CSS se fraient lentement leur chemin vers une mise en oeuvre prochaine dans les navigateurs. Une variable existe pourtant depuis des années&nbsp;: `currentColor` ! Cette fonctionnalité CSS a une bonne compatibilité navigateurs et quelques applications pratiques intéressantes. Voyons comment nous pouvons l’utiliser.

## Une règle héritée

Une des caractéristiques les moins connues de CSS est que si vous réglez votre `color` dans une déclaration qui comporte également une `border` et que vous omettez de spécifier la couleur de cette dernière, la bordure héritera par défaut de la couleur du texte&nbsp;:

    h1 { color: hsl(0,0%,44%); padding: 1rem; border-bottom: 4px solid; }

Le résultat :

<figure><img src="/images/CSS-currentColor.jpeg" alt=""/></figure>

C’est une astuce sympa&nbsp;: si vous changez la couleur de votre titre, celle du soulignement sera automatiquement modifiée. La même chose s’applique à `outline` et `box-shadow`.

En utilisant currentColor, nous pouvons étendre cette fonctionnalité aux éléments enfants.

## Un exemple pratique de currentColor

Nous avons dépassé depuis longtemps l’époque des liens bleus sur les pages web. Depuis une dizaine d’années, la pratique courante est de donner aux liens la même couleur que le texte dans lequel ils se trouvent. Bien sûr, il nous faut mettre en évidence le fait qu’il s’agit d'un lien. Une de mes techniques préférées est celle-ci&nbsp;:

    p { color: #333; }
    p a {
      text-decoration: none; color: #333;
      font-weight: bolder;
      display: inline-block;
      padding-bottom: .5rem;
      border-bottom: 1px dashed #333;
    }

Certes, ça marche, mais je pense que vous avez vu le problème&nbsp;: nous indiquons que les liens doivent avoir la même couleur que le reste du texte, et nous utilisons encore une fois cette couleur pour la bordure inférieure. **Nous répétons trois fois la même valeur de couleur**. Si un jour nous décidions de changer notre design, il nous faudrait laborieusement passer en revue notre feuille de styles et appliquer les modifications une à une (👉🏿 _NdT : sauf si vous utilisiez Sass bien sûr, puisque vous auriez déjà utilisé des variables_).

Procédons plutôt de la sorte&nbsp;: nous allons définir la couleur du texte et laisser les autres propriétés à l’intérieur du lien hériter de la couleur via `currentColor` (👉🏿 _NdT : CSS n'est pas sensible à l'utilisation de majuscules, on peut écrire_ `currentcolor` _comme ci-dessous_).

    p { color: #333; }
    p a {
      text-decoration: none;
      color: currentcolor;
      font-weight: bolder;
      display: inline-block;
      padding-bottom: .5rem;
      border-bottom: 1px dashed currentcolor;
    }

Il y a certes d’autres façons de parvenir au même résultat, en particulier en utilisant `inherit`, mais un exemple comme celui-ci par contre est impossible sans `currentColor`&nbsp;:

    body { color: #f0f; }
    hr { height: 10px; background: currentcolor; }

On peut utiliser `currentColor` de tas de façons inattendues, par exemple avec [les dégradés](/articles/les-degrades-css/) et les SVG. Ainsi, pour avoir des sprites SVG en ligne qui s’affichent plutôt comme des icônes fontes, on pourrait utiliser&nbsp;:

    svg { fill: currentcolor; }

De cette manière, chaque icône SVG prendra la `color` de son élément parent.

Ce qui serait _vraiment_ génial ce serait de pouvoir faire quelque chose comme `color: (currentColor) 10% lighter` mais ce genre de manipulation n'est pas possible dans le standard CSS, elles relèvent encore du domaine des préprocesseur, en tout cas jusqu'à présent.

### Compatibilité

La compatibilité est excellente. Tous les navigateurs modernes et leurs équivalents mobiles, y compris IE9+, supportent le mot-clé.

### Conclusion

L'utilisation de `currentColor` dans vos feuilles de styles est une bonne façon de renforcer les [bonnes pratiques DRY](http://fr.wikipedia.org/wiki/Ne_vous_r%C3%A9p%C3%A9tez_pas), la cohérence de votre design, et éventuellement de vous préparer à migrer vers les préprocesseurs. Dans le web à venir, les variables joueront un plus grand rôle dans le développement et le design front-end.

👉🏿 \_NdT : Une autre utilisation possible de currentColor, que je viens de découvrir grâce à la [série de vidéos de Chris Coyier sur SVG](http://css-tricks.com/lodge/), concerne la résolution de certains problèmes spécifiques d'application de style CSS sur les SVG.


La première variable CSS : currentColor


## Qu'est-ce que les filtres CSS&nbsp;?

Honnêtement, il y a des propriétés CSS stupéfiantes, et CSS filters en fait partie. Les filtres ont une capacité étonnante de transformer des images et des pages web tout entières. C'est incroyablement fort quand on y pense, alors même que certains navigateurs ne peuvent toujours pas traiter les `border-radius` ou les `@font-face` correctement.

## Comment utiliser les filtres CSS&nbsp;?

L'utilisation des filtres CSS</span> est extrêmement simple, toutefois il faut noter que la syntaxe n'est pas tout à fait habituelle. De nombreuses valeurs prennent des paramètres, et pour de bonnes raisons. Prenons l'exemple d'une échelle de gris (grayscale) et de sa syntaxe.

    img {
    	-webkit-filter: grayscale(50%);
    }

Tout d'abord, il y a un préfixe webkit. Puis la valeur est définie avec des parenthèses et un paramètre. À peu près tous les filtres CSS ont des paramètres, qui définissent la quantité de changement à appliquer. Dans l'exemple qui précède, l'image sera seulement transformée pour 50% en noir et blanc. Si l'on avait 100%, la transformation serait totale (voir l'exemple `grayscale` plus bas). Une bonne façon de comprendre la logique est de se dire &ldquo;quel niveau de gris est-ce que je veux atteindre&rdquo;&nbsp;? En gros, quelle intensité du filtre est-ce que je veux appliquer.

## Les différents types de filtres

Il existe de nombreux filtres, certains plus habituels que d'autres, certains plus utiles que d'autres aussi. Mais dans cet article, nous allons essayer d'en passer en revue le plus possible, pour vous donner une bonne idée des possibilités des filtres CSS. Notre image de démo aujourd'hui est cette magnifique photo de voiture que j'ai prise il y a peu...

<figure><img src="/images/filter1-compressor.jpeg" alt=""/></figure>

### Grayscale

Je viens de mentionner grayscale. Il transforme une image en noir et blanc, selon un pourcentage qui va de 0% à 100% où 0% correspond à aucun filtre et 100% à un filtre total - il ne reste plus que du noir, du gris et du blanc.

    img { -webkit-filter: grayscale(100%); }
    img { -webkit-filter: grayscale(50%); }

<figure style="filter:grayscale(100%);"><img src="/images/filter1-compressor.jpeg" alt=""/></figure>

<figure style="filter:grayscale(50%);"><img src="/images/filter1-compressor.jpeg" alt=""/></figure>

### Sepia

Je ne sais pas si on applique encore beaucoup ce type d'effet, mais si vous le voulez, il est là. Son utilisation est identique à celle de grayscale.

    img { -webkit-filter: sepia(100%); }
    img { -webkit-filter: sepia(50%); }

<figure style="filter:sepia(100%);"><img src="/images/filter1-compressor.jpeg" alt=""/></figure>

<figure style="filter:sepia(50%);"><img src="/images/filter1-compressor.jpeg" alt=""/></figure>

### Blur

Le filtre `blur` (floutage) fonctionne d'une manière assez similaire au filtre Gaussien de Photoshop. Le nombre de pixels définit l'intensité du floutage, plus le nombre de pixels est grand, plus l'image sera floue.

    img { -webkit-filter: blur(5px); }
    img { -webkit-filter: blur(50px); }

<figure style="filter:blur(5px);"><img src="/images/filter1-compressor.jpeg" alt=""/></figure>

<figure style="filter:blur(50px);"><img src="/images/filter1-compressor.jpeg" alt=""/></figure>

### Saturation

Si vous connaissez [la théorie des couleurs](https://99designs.fr/blog/conseils-design/la-theorie-des-couleurs/), vous savez que la saturation définit l'intensité de la couleur. Contrairement aux filtres précédents, celui-ci n'a pas de limite, vous pouvez spécifier ce que vous voulez, par exemple 200% ou 2000%, plus le pourcentage sera élevé, plus la couleur sera vive. Entre 0% et 100%, la couleur devient plus terne, et à 100% l'image est inchangée.

    img { -webkit-filter: saturate(20%); }
    img { -webkit-filter: saturate(200%); }
    img { -webkit-filter: saturate(2000%); }

<figure style="filter:saturate(20%);"><img src="/images/filter1-compressor.jpeg" alt=""/></figure>

<figure style="filter:saturate(200%);"><img src="/images/filter1-compressor.jpeg" alt=""/></figure>

<figure style="filter:saturate(2000%);"><img src="/images/filter1-compressor.jpeg" alt=""/></figure>

### Contrast

Ce filtre fonctionne un peu comme la saturation, il n'y a pas de limite au pourcentage appliqué. Entre 0% et 100% vous choisissez un contraste faible, vous donne l'image inchangée et au-delà vous passez à un contraste fort.

    img { -webkit-filter: contrast(50%); }
    img { -webkit-filter: contrast(500%); }

<figure style="filter:contrast(50%);"><img src="/images/filter1-compressor.jpeg" alt=""/></figure>

<figure style="filter:contrast(500%);"><img src="/images/filter1-compressor.jpeg" alt=""/></figure>

### Brightness

Ce filtre est le dernier de cette série de trois. Il fonctionne comme `saturation` et `contrast`, entre 0% et 100% l'image est moins lumineuse, au-delà elle l'est plus, et la valeur par défaut est 100%.

    img { -webkit-filter: brightness(50%); }
    img { -webkit-filter: brightness(500%); }

<figure style="filter:brightness(50%);"><img src="/images/filter1-compressor.jpeg" alt=""/></figure>

<figure style="filter:brightness(500%);"><img src="/images/filter1-compressor.jpeg" alt=""/></figure>

### Hue-rotation

Celui-ci est intéressant, il prend la roue des couleurs (voir l'article [utiliser HSL](/articles/utiliser-hsl-pour-vos-couleurs)) et la fait tourner du nombre de degrés que vous indiquez, en modifiant chacune des couleurs en fonction. Les valeurs vont de 0° à 360°.

    img { -webkit-filter: hue-rotate(45deg); }
    img { -webkit-filter: hue-rotate(120deg); }
    img { -webkit-filter: hue-rotate(240deg); }

<figure style="filter:hue-rotate(45deg);"><img src="/images/filter1-compressor.jpeg" alt=""/></figure>

<figure style="filter:hue-rotate(120deg);"><img src="/images/filter1-compressor.jpeg" alt=""/></figure>

<figure style="filter:hue-rotate(240deg);"><img src="/images/filter1-compressor.jpeg" alt=""/></figure>

### Invert

Comme son nom le suggère, ce filtre inverse les couleurs de l'image. Il fonctionne comme grayscale avec des valeurs comprises entre 0% et 100%. Il faut donc juste indiquer le niveau de l'effet que vous souhaitez appliquer à votre image.

    img { -webkit-filter: -webkit-filter: invert(100%); }

<figure style="filter:invert(100%);"><img src="/images/filter1-compressor.jpeg" alt=""/></figure>

## Les limites des filtres CSS

👉🏾 _NdT : Pour vérifier la compatibilité, il suffit comme toujours de consulter [Can I Use](http://caniuse.com/css-filters). À la date de traduction, IE est totalement incompatible, Firefox est partiellement compatible, mais la compatibilité de Chrome, Safari et Opera, y compris pour les versions mobiles, est excellente. Aujourd'hui elle est excellente chez tous_.

### Vitesse de chargement

Deuxième point auquel il faut être attentif, le temps de chargement de votre page peut être affecté. Les filtres CSS peuvent être appliqués à de nombreux éléments, pas seulement aux images. Plus vous en ajoutez, plus votre site risque d'être ralenti - c'est compréhensible dans la mesure où la manipulation des éléments est plus complexe que les opérations habituelles de CSS.

### Utilité

Dernier point, et au vu de ce qui précède, on peut se poser la question de savoir s'il ne vaut pas mieux ouvrir Photoshop et faire le travail en amont. Cela dit, la possibilité d'éditer les images dans le navigateur est géniale alors pourquoi pas&nbsp;?

👉🏾 _NdT : Oui les filtres sont utiles : ils s'appliquent à toutes sortes d'images, y compris celles produites en CSS, où Photoshop ne vous sera d'aucun secours. Voyez l'article de Donovan Hutchinson sur la [création de sphères en CSS](https://la-cascade.io/creer-des-spheres-en-css/) pour une utilisation (simple) du filtre CSS `blur`._

### Plus vous en savez

Maintenant que vous savez de quoi il s'agit, j'espère que vous appréciez leurs capacités étonnantes. C'est un grand progrès en termes de ce que HTML, CSS et nos navigateurs peuvent faire pour nous.


Les filtres CSS

OKLCH en CSS, des palettes de couleurs accessibles et cohérentes


La [méthode HSL](http://fr.wikipedia.org/wiki/Teinte_saturation_lumi%C3%A8re) de création de couleurs en CSS3 est très bien supportée par les navigateurs modernes mais quelque peu négligée par les codeurs, en raison sans doute de sa différence avec [les autres modèles](/tags/couleur/)&nbsp;:

- Il est facile de traduire d’[hexadécimal](http://fr.wikipedia.org/wiki/Noms_de_couleur_du_Web) en [RGB](http://fr.wikipedia.org/wiki/Rouge_vert_bleu), mais plus difficile de traduire de ces modèles vers HSL.
- Les valeurs Hex et RGB de Photoshop peuvent être transférées directement dans votre CSS, ce qui n’est pas le cas de HSB qui n’est _pas_ la même chose que HSL.
- HSL ne vous offre pas une plus grande palette de couleurs que Hex et RGB, on reste sur la même étendue.

Et pourtant, malgré ces quelques restrictions, HSL est la méthode préférée des designers, voici pourquoi.

<figure><img src="/images/cercle-chromatique-hsl-compressor.jpeg" alt="le cercle chromatique"/></figure>

Tout d’abord, il vous faut un nouveau modèle mental pour la couleur, focalisez-vous sur le cercle chromatique. Vous voyez le rouge, le vert et le bleu&nbsp;: au sommet, le rouge est à 0 degrés, le vert à 120 degrés et le bleu à 240 degrés, ensemble ils partagent le cercle en trois parties égales. À distance égale entre eux se trouvent le jaune, le cyan et le magenta (du système de couleurs CMYK) respectivement à 60, 180 et 300 degrés.

_NdT : HSL signifie Hue, Saturation, Luminosity, c’est à dire [Teinte, Saturation, Luminosité](https://fr.wikipedia.org/wiki/Teinte_saturation_luminosit%C3%A9). Ce sont les trois composantes que nous retrouverons dans le code `hsl`_.

En partant du sommet et en tournant dans le sens des aiguilles d’une montre, nous passons par toutes les couleurs de l’arc en ciel.

La première composante de HSL est donc très facile&nbsp;: c’est la position de la couleur (la “teinte") sur le cercle chromatique, exprimée en degrés.

Pour prendre un exemple, le violet se trouve à mi-chemin du bleu (240°) et du magenta (300°), son code serait donc `hsl(270, 100%, 50%)` (ne vous inquiétez pas pour les autres composantes du code, nous allons voir ça tout de suite). Pour obtenir un violet “plus bleu”, il suffit de revenir en arrière vers le bleu, par exemple en faisant `hsl(255, 100%, 50%)`.

La deuxième composante est la saturation, également décrite comme l’intensité. Plus on s’éloigne du centre, plus l’intensité de la couleur augmente, atteignant le maximum de saturation sur le bord extérieur du cercle. Au contraire, plus on va vers le centre, plus la couleur tend vers le gris. En d’autres termes, le degré de saturation dépend de la distance à laquelle on se trouve du gris. Toutes les couleurs HSL ayant une saturation de 0% ont la même ombre (_shade_) de gris, toutes choses étant égales par ailleurs.

<div className="centeredBold">Valeurs de saturation hsl(45, x%, 50%)</div>

<div class="container-hsl">
<span style="background-color:hsl(45,0%,50%);color:#fff">hsl(45,0%,50%)</span>
<span style="background:hsl(45,25%,50%)">hsl(45,25%,50%)</span>
<span style="background:hsl(45,50%,50%)">hsl(45,50%,50%)</span>
<span style="background:hsl(45,75%,50%)">hsl(45,75%,50%)</span>
<span style="background:hsl(45,100%,50%)">hsl(45,100%,50%)</span></div>

Note : Pour la saturation et la luminosité, le signe % doit _toujours_ être inclus, même si la valeur est égale à 0.

La luminosité, ou “brillance”, spécifie la distance à laquelle la couleur se trouve du blanc et du noir. Un niveau de luminosité de 50% signifie que la couleur est en équilibre parfait entre le clair et le sombre, et demeure inchangée. Si l’on réduit la luminosité, la couleur s’assombrit&nbsp;: toute couleur ayant un niveau de luminosité de 0 est un noir pur. Si l’on augmente la luminosité, la couleur s’éclaircit et à l’extrême (100%) elle est blanche. Entre les deux, vous avez de nombreuses possibilités, comme illustré ci-dessous&nbsp;:

<div className="centeredBold">Valeurs de luminosité hsl(90, 100%, x%)</div>

<div class="container-hsl">
<span style="background-color:hsl(90,100%,0%);color:#fff">hsl(90, 100%, 0%)</span>
<span style="background:hsl(90,100%,25%)">hsl(90, 100%, 25%)</span>
<span style="background:hsl(90,100%,50%)">hsl(90, 100%, 50%)</span>
<span style="background:hsl(90,100%,75%)">hsl(90, 100%, 75%)</span>
<span style="background:hsl(90,100%,100%)">hsl(90, 100%, 100%)</span></div>

Avec un peu de pratique, cette carte mentale de la couleur deviendra instinctive et vous trouverez probablement qu’il est bien plus facile de créer et de manipuler les couleurs spécifiées en HSL. Même si vous choisissez de ne pas toujours l’utiliser, HSL présente quelques avantages spécifiques dans certaines circonstances —&nbsp;nous verrons cela dans [le prochain article](/articles/3-raisons-dutiliser-hsl-pour-vos-couleurs/).

**Note** :

Eric Meyer propose [un diagramme bien utile](http://meyerweb.com/eric/css/colors/hsl-16.html) permettant de traduire les mots-clés de couleurs habituels en valeurs HSL, et Lars Gunther a construit un outil pédagogique intéressant pour [utiliser le cercle chromatique](http://itpastorn.github.io/webbteknik/future-stuff/svg/color-wheel.html).


La Cascade

couleur

Ressources complémentaires en français

Ressources complémentaires en anglais

Outils