Couleurs, unités et typographie

Cours · CSS : mettre en forme le Web (école d'ingénieur), chapitre 4 · école d'ingénieur, informatique · le début du chapitre, la suite sur Adloun

Un site se lit avant tout : sur la page d'accueil de la Librairie du Campus, plus des trois quarts de la surface sont du texte. Sa couleur, sa taille, sa police, l'espace entre ses lignes et leur longueur décident du confort de lecture bien plus que n'importe quel décor. Jusqu'ici, nous avons écrit des couleurs en hexadécimal sans les expliquer, et des tailles en em sans savoir exactement à quoi elles se rapportaient.

Ce chapitre fait le point sur les valeurs que l'on donne aux propriétés : comment noter une couleur, comment vérifier qu'elle se lit (le rapport de contraste se calcule), quelles unités de longueur employer et pourquoi le pixel n'est pas toujours le bon choix. Il se termine par les propriétés du texte et par l'échelle typographique de la librairie.

Objectifs du chapitre

Lire et écrire une couleur en hexadécimal, rgb(), hsl(), avec ou sans transparence ; connaître oklch() et currentcolor.
Calculer le rapport de contraste de deux couleurs et le comparer aux seuils d'accessibilité (4,5:1 et 3:1).
Choisir entre px, em, rem, %, vw, ch, et calculer la valeur en pixels de chacune.
Écrire une pile de polices, charger une police avec @font-face.
Régler taille, graisse, interlignage (sans unité), espacement, alignement et décoration du texte ; limiter la longueur des lignes.
Donner à la librairie une échelle typographique en rem et une charte au contraste vérifié.

4.1 Noter une couleur

Les écrans composent chaque couleur à partir de trois lumières : rouge, vert et bleu. CSS offre plusieurs notations pour les doser ; la page suivante peint sept bandes, dont les cinq premières visent le bleu nuit de la charte.


.c1 {
  background-color: #1f3a68;
}

.c2 {
  background-color: rgb(31 58 104);
}

.c3 {
  background-color: hsl(218deg 54% 26%);
}

.c4 {
  background-color: oklch(35% 0.087 260deg);
}

.c5 {
  background-color: navy;
}

/* Avec transparence : le fond crème se voit à travers */
.c6 {
  background-color: rgb(31 58 104 / 60%);
}

.c7 {
  color: #222;
  background-color: #1f3a6833;
}

Définition 4.1Notations de couleur

Mots-clés : 148 noms, de black à rebeccapurple, plus transparent. Pratiques pour un essai, rarement pour une charte : navy n'est pas notre bleu nuit.
Hexadécimal #rrggbb : trois octets de 00 à ff (0 à 255) pour le rouge, le vert et le bleu. #1f3a68 vaut $(31, 58, 104)$ , car $1f_{16} = 16 + 15 = 31$ , $3a_{16} = 48 + 10 = 58$ , $68_{16} = 96 + 8 = 104$ . La forme courte #rgb double chaque chiffre : #222 $=$ #222222.
rgb(r g b) : les trois mêmes composantes en décimal (0 à 255) ou en pourcentages.
hsl(t s l) : teinte en degrés sur le cercle des couleurs (0 rouge, 120 vert, 240 bleu), saturation et luminosité en pourcentages. Plus intuitive pour décliner une couleur : même teinte, plus ou moins claire.
oklch(L C h) : luminosité perçue, chroma, teinte, dans un espace conçu pour que des écarts égaux de L paraissent égaux à l'œil ; elle donne aussi accès aux couleurs plus vives des écrans récents.

Dans Chromium, les quatre premières bandes ont la même couleur calculée rgb(31, 58, 104) — à un détail près : la notation hsl(218deg 54% 26%), arrondie au degré et au pour cent, donne rgb(30, 57, 102), imperceptiblement différente. Les valeurs exactes de notre bleu sont $21 8^{\circ}$ , $54, 1 %$ et $26, 5 %$ . La notation oklch() est conservée telle quelle par le navigateur.

Proposition 4.2Transparence

Toutes les notations fonctionnelles acceptent une quatrième valeur, l'opacité alpha, après une barre oblique : rgb(31 58 104 / 60%) (de 0%, transparent, à 100%, opaque). En hexadécimal, on ajoute un quatrième octet : #1f3a6833 ( $33_{16} = 51$ , soit $51/255 = 20 %$ ). La couleur affichée est alors un mélange avec ce qui est derrière.

L'ancienne écriture avec virgules, rgba(31, 58, 104, 0.6), est toujours acceptée ; la configuration standard de stylelint demande la notation moderne, sans virgules, et les codes hexadécimaux en minuscules et en forme courte quand elle existe.

4.1.1 Le mot-clé currentcolor

Le mot-clé currentcolor désigne la valeur de la propriété color de l'élément. C'est d'ailleurs la valeur par défaut de la couleur des bordures et des soulignements.


body {
  font-family: system-ui, sans-serif;
}

/* Une seule couleur à changer : la bordure suit le texte */
.badge {
  color: #1f3a68;
  border: 2px solid currentcolor;
  text-decoration: underline dotted currentcolor;
}

.badge-promo {
  color: #a8520a;
}

.badge-epuise {
  color: #555;
}

Chaque variante ne change que color ; la bordure et le soulignement pointillé suivent (dans Chromium, border-top-color et text-decoration-color valent exactement la couleur du texte). Les icônes SVG utilisent le même mécanisme avec fill="currentcolor". Le mot s'écrit indifféremment currentColor ou currentcolor ; stylelint préfère les minuscules.

4.2 Le contraste, une contrainte calculable

Un texte gris clair sur fond blanc est élégant sur l'écran du graphiste, et illisible au soleil, sur un écran bon marché ou pour l'un des nombreux lecteurs dont la vue est moins bonne. Les règles d'accessibilité du Web (WCAG, du W3C) fixent un seuil mesurable.

Définition 4.3Luminance relative et rapport de contraste

Pour une couleur $(R, G, B)$ :

on ramène chaque composante dans $[0, 1]$ : $c = R /255$ , etc. ;
on la linéarise : $c^{'} = c /12, 92$ si $c \leq 0, 04045$ , sinon $c^{'} = (\frac{c + 0 , 055}{1 , 055})^{2, 4}$ ;
la luminance relative est $L = 0, 2126 R^{'} + 0, 7152 G^{'} + 0, 0722 B^{'}$ , entre 0 (noir) et 1 (blanc). Le vert pèse le plus : l'œil y est le plus sensible.

Le rapport de contraste de deux couleurs de luminances $L_{1} \geq L_{2}$ est

$\frac{L _{1} + 0 , 05}{L _{2} + 0 , 05},$

qui va de $1$ (deux couleurs identiques) à $21$ (noir sur blanc). On l'écrit 4.5:1, « 4,5 pour 1 ».

Proposition 4.4Seuils WCAG, niveau AA

Texte courant : rapport $\geq 4, 5$ .
Grand texte (au moins 24 pixels, ou 18,66 pixels en gras) et composants d'interface (bordure d'un champ, icône, focus) : rapport $\geq 3$ .

Le niveau renforcé AAA demande 7 et 4,5.

Exemple 4.5Bleu nuit sur crème

Pour #1f3a68 $= (31, 58, 104)$ : $c = 0, 1216$ ; $0, 2275$ ; $0, 4078$ , toutes supérieures à $0, 04045$ , d'où $R^{'} = 0, 0137$ , $G^{'} = 0, 0423$ , $B^{'} = 0, 1384$ et

$L = 0, 2126 \times 0, 0137 + 0, 7152 \times 0, 0423 + 0, 0722 \times 0, 1384 \approx 0, 0432.$

Pour le crème #faf8f5, on trouve de même $L \approx 0, 9405$ . Le rapport vaut

$\frac{0 , 9405 + 0 , 05}{0 , 0432 + 0 , 05} \approx 10, 6.$

Le bleu nuit convient largement, même au niveau AAA.

Le même calcul pour toutes les paires de la charte (luminances : texte $0, 0160$ , ocre $0, 2987$ , blanc $1$ ) donne :

La suite du cours est sur Adloun

Le chapitre en entier, formules et figures comprises, avec le tuteur, les fiches, les QCM et les exercices.

Lire la suite du cours

En accès libre, sans inscription.

Exercices corrigés de ce chapitre

Lire la suite du cours →