Calculer des contrastes — exercice corrigé de CSS : mettre en forme le Web (école d'ingénieur) (chapitre 4)

Calculer des contrastes

Couleurs, unités et typographie · niveau 2

Énoncé

Les luminances relatives de la charte sont : texte #222 $0, 0160$ ; bleu nuit $0, 0432$ ; ocre $0, 2987$ ; crème $0, 9405$ ; blanc $1$ .

Calculer le rapport de contraste de l'ocre sur le crème, du blanc sur l'ocre et du texte #222 sur l'ocre.
Un bouton ocre peut-il porter un texte blanc de 16 pixels ? Un texte blanc de 24 pixels ? Un texte #222 ?
Le cadre de focus est ocre, de 3 pixels, sur fond crème. Est-il conforme ? Et sur l'en-tête bleu nuit ?

Ocre sur crème : $\frac{0 , 9405 + 0 , 05}{0 , 2987 + 0 , 05} = \frac{0 , 9905}{0 , 3487} \approx 2, 84$ . Blanc sur ocre : $\frac{1 , 05}{0 , 3487} \approx 3, 01$ . #222 sur ocre : $\frac{0 , 3487}{0 , 0160 + 0 , 05} = \frac{0 , 3487}{0 , 0660} \approx 5, 28$ .
Texte blanc de 16 pixels : non (3,01 < 4,5). De 24 pixels : oui, de justesse (3,01 $\geq$ 3, grand texte). Texte #222 : oui, à toutes les tailles (5,28). C'est le choix de la librairie.
Le cadre de focus est un composant : seuil 3. Sur le crème, 2,84 : insuffisant ; il faudrait l'ocre foncé, ou un cadre plus épais doublé d'un liseré sombre. Sur le bleu nuit : $\frac{0 , 3487}{0 , 0932} \approx 3, 74$ , conforme. (Sur fond blanc, il atteint 3,01.) Ce défaut sera repris quand la librairie aura sa charte en variables, au chapitre 10.