Couleurs et unités

Un texte gris clair #bbbbbb sur fond blanc a un rapport de contraste de 1.92 pour 1. Les WCAG demandent au moins 4.5 pour 1 pour un texte normal.

Les façons d'écrire une couleur

CSS accepte les couleurs dans plusieurs notations, et toutes reviennent au même : des quantités de lumière rouge, verte et bleue à l'écran. Les couleurs nommées comme red, navy ou rebeccapurple sont faciles à lire mais limitées. La notation hexadécimale écrit le rouge, le vert et le bleu avec deux chiffres hexadécimaux chacun, de 00 à ff (0 à 255) : #1a5fb4 correspond à 26 de rouge, 95 de vert et 180 de bleu, un bleu moyen. rgb(26 95 180) dit la même chose en décimal. hsl(210 80% 40%) décrit une couleur par sa teinte (un angle sur le cercle chromatique, où 0 est le rouge, 120 le vert et 240 le bleu), sa saturation et sa luminosité, ce qui permet d'obtenir facilement une nuance plus claire ou plus foncée de la même teinte en changeant un seul nombre.

color: navy;
color: #1a5fb4;              /* same as #1A5FB4 */
color: #36c;                 /* short form of #3366cc */
color: rgb(26 95 180);
color: rgb(26 95 180 / 50%); /* half transparent */
color: hsl(210 80% 40%);
background-color: transparent;

Une quatrième valeur, après une barre oblique, règle le canal alpha : rgb(0 0 0 / 50%) est un noir à moitié opaque, qui laisse donc voir ce qui se trouve derrière. color définit la couleur du texte, background-color le remplissage derrière un élément et border-color sa bordure. Le mot-clé currentColor désigne la couleur du texte de l'élément, pratique pour les icônes et les bordures qui doivent être assorties au texte.

Le contraste n'est pas facultatif

Un texte trop proche de son fond en luminosité est difficile à lire pour beaucoup de monde : les personnes malvoyantes, les lecteurs âgés, et tous ceux qui lisent sur un téléphone en plein soleil. Les WCAG 2.2, les règles d'accessibilité du W3C, mesurent cela par un rapport de contraste allant de 1 pour 1 (aucune différence) à 21 pour 1 (noir sur blanc). Le critère de succès 1.4.3 demande au moins 4.5 pour 1 pour un texte normal et 3 pour 1 pour un grand texte, que les WCAG définissent comme au moins 18 points, ou 14 points en gras. Le gris foncé #767676 sur blanc passe tout juste avec 4.54 pour 1 ; #777777 échoue de peu avec 4.48. Les outils de développement du navigateur affichent ce rapport quand tu inspectes un élément de texte : inutile de deviner.

La couleur ne doit jamais être non plus le seul moyen de transmettre une information. Un formulaire qui signale les erreurs uniquement en passant une bordure en rouge exclut toutes les personnes qui distinguent mal le rouge ; ajoute aussi un message ou une icône.

Unités absolues et relatives

Les longueurs ont besoin d'une unité, sauf zéro. px est le pixel CSS, une unité fixe ; sur les écrans haute densité, un pixel CSS couvre plusieurs pixels physiques, il garde donc à peu près la même taille à l'œil. Les unités relatives dépendent d'autre chose. em est relatif à la taille de police de l'élément lui-même : padding: 0.5em sur un texte de 20 pixels donne 10 pixels. rem est relatif à la taille de police de la racine (html), qui vaut 16 pixels dans les navigateurs sauf si le lecteur l'a modifiée : 1.25rem fait donc normalement 20 pixels. % est relatif au parent, en général à sa largeur. vw et vh sont des centièmes de la largeur et de la hauteur de la fenêtre d'affichage, et ch correspond à peu près à la largeur du chiffre zéro dans la police utilisée.

Laquelle choisir ? Dimensionner le texte en rem respecte le lecteur : si quelqu'un règle son navigateur pour un texte plus grand, tout ce qui est en rem grandit avec, alors qu'un texte fixé en px risque de ne pas suivre. Un padding en em grandit avec le texte qu'il entoure. Les pixels conviennent à ce qui ne doit pas changer d'échelle, comme une bordure de 1 pixel.