La couleur du focus — exercice corrigé de CSS : mettre en forme le Web (école d'ingénieur) (chapitre 10)

La couleur du focus

Variables, transitions, animations et projet · niveau 2

Énoncé

Un développeur propose de dessiner le contour de focus de la Librairie en ocre, #e07a1f, « pour rester dans la charte ».

Calculer le rapport de contraste de l'ocre avec le fond crème #faf8f5, puis avec le bleu nuit de l'en-tête.
Conclure, sachant qu'un indicateur de focus doit avoir un contraste d'au moins 3:1 avec ce qui l'entoure.
Pourquoi le contour est-il placé sur :focus-visible et pas sur :focus ?

Avec la formule du chapitre 4 : luminance relative de #e07a1f environ 0,299, de #faf8f5 environ 0,941, de #1f3a68 environ 0,043. Contrastes : $(0, 941 + 0, 05) / (0, 299 + 0, 05) \approx 2, 84$ sur le crème, et $(0, 299 + 0, 05) / (0, 043 + 0, 05) \approx 3, 75$ sur le bleu nuit.
Sur le fond crème, où se trouvent presque tous les liens et champs, l'ocre n'atteint pas 3:1 : refusé. On garde le bleu nuit (10,6:1) sur le crème et le blanc (11,3:1) dans l'en-tête. L'ocre reste la couleur de la page courante dans le menu, où il est posé sur le bleu nuit et doublé d'un soulignement.
:focus s'applique aussi après un clic de souris sur un bouton : un contour épais y surprendrait l'utilisateur de la souris, ce qui pousse à le supprimer pour tous. :focus-visible ne le montre que lorsqu'il est utile, au clavier notamment.