Un ocre lisible — exercice corrigé de CSS : mettre en forme le Web (école d'ingénieur) (chapitre 4)

Un ocre lisible

Couleurs, unités et typographie · niveau 3 (difficile)

Énoncé

L'ocre de la charte s'écrit hsl(28deg 76% 50%). On veut la même teinte, assez foncée pour écrire sur le crème au niveau AA.

Faut-il augmenter ou diminuer la luminosité ? Pourquoi travailler en hsl() plutôt qu'en hexadécimal ?
Trouver par essais, en pas de 1 %, la plus grande luminosité qui convient. (Le sélecteur de couleur des outils de développement affiche le contraste en direct ; on peut aussi programmer le calcul.)
La librairie a choisi #a8520a. Comparer.

Le crème est très clair : il faut un ocre plus sombre, donc diminuer la luminosité. En hsl(), on ne touche qu'à un nombre et la teinte reste la même ; en hexadécimal, il faudrait modifier les trois composantes dans les bonnes proportions.
Rapports sur le crème selon la luminosité (teinte $2 8^{\circ}$ , saturation 76 %) : 50 % donne 2,86 ; 45 %, 3,47 ; 40 %, 4,25 ; 39 %, 4,46 ; 38 %, 4,63. La plus grande luminosité qui convient est 38 % : hsl(28deg 76% 38%), que Chromium convertit en rgb(171, 92, 23).
#a8520a $= (168, 82, 10)$ est un peu plus sombre et plus saturé : 5,11:1, une marge de sécurité appréciable au-dessus de 4,5 (pour des fonds légèrement différents, comme le beige #f0ebe3 du catalogue, où il donne encore 4,57).