PhpBB Lab Académie

Continuer avec le même petit site et la même feuille styles.css, comprendre la différence entre la couleur du texte et la couleur d’arrière-plan, découvrir les valeurs hexadécimales, vérifier le contraste des couleurs utilisées sur les vraies pages du projet et éviter de transmettre une information uniquement par la couleur.

Avant de commencer

Dans la leçon précédente, vous avez commencé à améliorer la lisibilité du texte.

Votre feuille

styles.css

peut maintenant contenir :

body {
    font-family: Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
}

h1 {
    color: darkblue;
    font-size: 2rem;
}

h2 {
    color: darkgreen;
    font-size: 1.5rem;
}

.nom-site {
    color: darkslateblue;
    font-weight: bold;
}

Nous utilisons déjà plusieurs couleurs.

Jusqu’à présent, elles nous ont surtout permis d’observer facilement les effets de CSS.

Nous allons maintenant les choisir de manière plus rigoureuse.

Dans cette leçon, nous allons répondre à quatre questions :

- Comment définir précisément une couleur en CSS ?
- Quelle différence existe entre la couleur du texte et celle de l’arrière-plan ?
- Comment vérifier qu’un texte reste suffisamment lisible ?
- Pourquoi une information importante ne doit-elle pas dépendre uniquement d’une couleur ?

À la fin de cette leçon, notre petit site utilisera une palette simple dont nous aurons réellement vérifié le contraste.

1. Reprendre la propriété color

Vous connaissez déjà la propriété :

color

Nous l’avons utilisée par exemple dans :

h1 {
    color: darkblue;
}

La propriété

color

définit la couleur du texte.

Dans cette règle :

darkblue

est la valeur.

Nous avons utilisé jusqu’ici des noms de couleurs parce qu’ils sont faciles à lire lorsque l’on débute.

CSS permet cependant de définir une couleur de manière plus précise.

2. Découvrir les couleurs hexadécimales

Une couleur CSS peut être écrite sous la forme :

#1f2937

Cette écriture est appelée :

valeur hexadécimale

Elle commence par :

#

puis contient ici six caractères.

Par exemple :

#000000

correspond au noir.

Et :

#ffffff

correspond au blanc.

Vous n’avez pas besoin de mémoriser une liste de valeurs.

L’important est de reconnaître cette écriture et de comprendre qu’elle permet de choisir une couleur précise.

3. Ajouter une couleur de texte générale

Nous allons maintenant définir une couleur de texte de base pour les trois pages.

Dans la règle

body

, ajoutez :

color: #1f2937;

Vous obtenez :

body {
    font-family: Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    color: #1f2937;
}

Cette couleur sombre servira de base au texte courant du site.

Nous conservons ainsi une seule règle générale plutôt que de choisir une couleur différente pour chaque paragraphe.

4. Découvrir background-color

La propriété :

background-color

permet de définir la couleur d’arrière-plan d’un élément.

Nous allons l’utiliser sur :

body

Ajoutez :

background-color: #ffffff;

La règle devient :

body {
    font-family: Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    color: #1f2937;
    background-color: #ffffff;
}

Nous avons maintenant défini une paire de couleurs :

texte : #1f2937

arrière-plan : #ffffff

5. Penser toujours au texte et à son arrière-plan ensemble

Une couleur de texte ne peut pas être jugée seule.

Prenons :

color: #1f2937;

Cette couleur peut être très lisible sur un fond blanc.

Mais une même couleur pourrait devenir difficile à lire sur un arrière-plan très sombre.

Lorsque nous choisissons une couleur de texte, nous devons donc toujours nous demander :

quelle couleur se trouve derrière ce texte ?

Retenez :

la lisibilité dépend de la combinaison :

couleur du texte + couleur d’arrière-plan

6. Qu’est-ce que le contraste ?

Le contraste représente la différence visuelle entre deux couleurs.

Pour du texte, nous comparons principalement :

la couleur du texte

et :

la couleur de son arrière-plan

Deux couleurs trop proches peuvent rendre la lecture difficile.

Deux couleurs suffisamment différenciées permettent généralement de mieux distinguer le texte.

Mais nous ne devons pas nous fier uniquement à notre impression visuelle.

Le contraste peut être mesuré.

7. Comprendre le ratio de contraste

Un outil de vérification peut fournir un résultat sous une forme comme :

4.5:1

ou :

7:1

Il s’agit d’un :

ratio de contraste

Plus le ratio est élevé, plus la différence de luminance entre les deux couleurs est importante.

Vous n’avez pas besoin de calculer ce ratio à la main.

Nous utiliserons un outil de vérification pour mesurer les couleurs choisies.

8. Une référence importante pour le texte courant

Pour du texte courant, le niveau AA des recommandations d’accessibilité utilise comme référence minimale :

4.5:1

Pour certains textes suffisamment grands, le seuil minimal peut être :

3:1

Dans notre petit site, nous ne chercherons pas à utiliser volontairement le seuil le plus faible possible.

Pour le texte courant, nous conserverons comme repère principal :

au moins 4.5:1

Une couleur qui respecte un seuil technique n’est pas automatiquement parfaite dans toutes les situations.

Mais cette mesure constitue une vérification importante.

9. Une référence plus exigeante

Pour du texte courant, un ratio de :

7:1

correspond à une exigence de contraste plus élevée associée au niveau AAA.

Cela ne signifie pas qu’une page entière devient conforme au niveau AAA simplement parce que son texte atteint ce ratio.

L’accessibilité dépend de nombreux autres critères.

Retenez simplement ici :

4.5:1 = référence minimale AA pour le texte courant

7:1 = référence plus exigeante pour le texte courant

10. Vérifier notre couleur de texte générale

Testons maintenant la combinaison :

texte : #1f2937

arrière-plan : #ffffff

Son ratio de contraste est d’environ :

14.68:1

Cette combinaison dépasse largement :

4.5:1

et :

7:1

Nous pouvons donc conserver cette paire pour le texte courant de notre petit site.

11. Choisir une couleur précise pour les titres

Nos titres

h1

utilisent actuellement :

darkblue

Nous allons remplacer cette couleur nommée par une valeur précise :

#163b65

La règle devient :

h1 {
    color: #163b65;
    font-size: 2rem;
}

Sur l’arrière-plan blanc :

#ffffff

cette couleur possède un contraste d’environ :

11.37:1

Elle reste donc très lisible.

12. Donner la même couleur aux h2

Dans la leçon précédente, les

h2

utilisaient :

darkgreen

Nous allons maintenant simplifier notre palette et utiliser la même couleur que pour le

h1

.

La règle devient :

h2 {
    color: #163b65;
    font-size: 1.5rem;
}

Nous conservons la différence de niveau grâce à la taille :

h1 = 2rem

h2 = 1.5rem

mais les titres appartiennent maintenant à la même famille visuelle.

Nous préparerons ainsi une feuille plus cohérente pour la prochaine leçon.

13. Mettre à jour la couleur du nom du site

La classe :

.nom-site

utilise actuellement :

darkslateblue

Nous allons choisir une valeur précise :

#4c1d95

La règle devient :

.nom-site {
    color: #4c1d95;
    font-weight: bold;
}

Sur un fond blanc, cette combinaison possède un ratio d’environ :

10.95:1

Le nom :

Mon premier site HTML

reste donc nettement lisible dans les trois pages.

14. Vérifier le résultat sur le vrai site

Enregistrez

styles.css

.

Ouvrez ensuite :

index.html
apropos.html
contact.html

Vérifiez notamment :

- le texte courant ;
- le

h1

de chaque page ;
- les

h2

de la page d’accueil ;
- le texte

Mon premier site HTML

.

La page utilise maintenant une palette limitée :

texte courant : #1f2937

titres : #163b65

nom du site : #4c1d95

arrière-plan : #ffffff

Chaque couleur possède un rôle identifiable.

15. Pourquoi une palette limitée est-elle utile ?

Nous pourrions choisir une couleur différente pour chaque titre, chaque paragraphe et chaque section.

CSS le permettrait.

Mais une grande quantité de couleurs rendrait rapidement le site plus difficile à comprendre et à maintenir.

Une palette limitée facilite :

- la cohérence visuelle ;
- la lecture de la feuille CSS ;
- la vérification des contrastes ;
- les modifications futures.

Nous n’ajouterons donc pas une nouvelle couleur sans raison précise.

16. La couleur ne doit pas être le seul moyen de transmettre une information

Reprenons notre formulaire de contact.

Dans le cours HTML, certains libellés indiquent explicitement :

Votre nom (obligatoire)

Votre adresse e-mail (obligatoire)

Votre message (obligatoire)

Cette information est présente dans le texte.

C’est important.

Nous pourrions plus tard utiliser une couleur pour renforcer visuellement les champs obligatoires.

Mais nous ne devons pas remplacer le mot :

obligatoire

par une simple couleur.

Par exemple, évitez une consigne comme :

Les champs rouges sont obligatoires.

Une personne qui ne distingue pas correctement cette couleur pourrait perdre l’information.

17. Même principe pour les erreurs

Imaginons qu’un jour notre formulaire affiche une erreur.

Le message ne devra pas reposer uniquement sur :

rouge = erreur

Il devra également expliquer le problème.

Par exemple :

Erreur : l’adresse e-mail n’est pas valide.

La couleur pourra renforcer visuellement ce message.

Mais le sens restera compréhensible sans dépendre uniquement de la couleur.

Cette règle est importante bien au-delà de notre petit site.

18. Ne pas deviner le contraste

Une combinaison peut sembler suffisamment lisible à une personne et être plus difficile à distinguer pour une autre.

Il est donc préférable de mesurer le contraste plutôt que de dire :

Cette couleur me semble assez foncée.

Lorsque vous modifiez :

color

ou :

background-color

vérifiez de nouveau la paire de couleurs concernée.

Retenez :

nouvelle paire de couleurs = nouvelle vérification

19. Notre feuille styles.css à la fin de la leçon

Votre fichier peut maintenant contenir :

body {
    font-family: Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    color: #1f2937;
    background-color: #ffffff;
}

h1 {
    color: #163b65;
    font-size: 2rem;
}

h2 {
    color: #163b65;
    font-size: 1.5rem;
}

.nom-site {
    color: #4c1d95;
    font-weight: bold;
}

Nous avons conservé tout le travail des leçons précédentes.

Nous avons simplement remplacé les couleurs nommées par une petite palette précise et vérifiée.

20. Lire cette palette avec méthode

Nous pouvons maintenant résumer :

#1f2937
= texte courant

#ffffff
= arrière-plan général

#163b65
= titres h1 et h2

#4c1d95
= nom du site

Les valeurs ne sont pas choisies au hasard.

Elles correspondent à des rôles précis et ont été vérifiées sur l’arrière-plan utilisé.

21. Préparer la prochaine étape

Nous disposons maintenant :

- d’une famille de caractères ;
- d’une taille de texte de base ;
- d’une hauteur de ligne ;
- d’une hiérarchie de tailles ;
- d’une palette de couleurs ;
- de contrastes vérifiés.

La prochaine étape ne consiste pas à ajouter beaucoup de nouvelles propriétés.

Nous allons plutôt apprendre à réunir ces choix dans une présentation cohérente et facile à maintenir.

Nous verrons notamment comment organiser plus clairement

styles.css

et comment vérifier l’ensemble de la typographie sans répéter inutilement les mêmes règles.

22. Ce que vous devez comprendre avant la prochaine leçon

Vous devez maintenant être capable d’expliquer :

- le rôle de

color

;
- le rôle de

background-color

;
- ce qu’est une valeur hexadécimale ;
- pourquoi une couleur de texte doit être vérifiée avec son arrière-plan ;
- ce qu’est un ratio de contraste ;
- pourquoi

4.5:1

constitue une référence importante pour le texte courant ;
- pourquoi

7:1

représente une exigence plus élevée ;
- pourquoi nous avons limité le nombre de couleurs du site ;
- pourquoi une information ne doit pas dépendre uniquement de la couleur ;
- pourquoi le contraste doit être vérifié après une modification de couleur.

Dans la prochaine leçon, nous continuerons avec exactement la même feuille

styles.css

.

Nous réunirons la typographie et les couleurs afin d’obtenir une présentation plus cohérente, lisible et facile à maintenir.

Reprenons la feuille construite dans la leçon précédente.

Nous complétons d’abord la règle

body

:

body {
    font-family: Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    color: #1f2937;
    background-color: #ffffff;
}

Puis nous utilisons une couleur commune pour les titres :

h1 {
    color: #163b65;
    font-size: 2rem;
}

h2 {
    color: #163b65;
    font-size: 1.5rem;
}

Enfin, le nom du site conserve une présentation distincte :

.nom-site {
    color: #4c1d95;
    font-weight: bold;
}

Sur l’arrière-plan blanc

#ffffff

, ces couleurs possèdent un contraste élevé.

Nous avons donc une petite palette dont chaque couleur correspond à un rôle précis dans le vrai site.

Continuez avec le même petit site et le même fichier

styles.css

.

1. Compléter body

Dans la règle

body

, ajoutez :

color: #1f2937;
background-color: #ffffff;

La règle doit devenir :

body {
    font-family: Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    color: #1f2937;
    background-color: #ffffff;
}

2. Mettre à jour h1

Remplacez :

color: darkblue;

par :

color: #163b65;

3. Mettre à jour h2

Remplacez :

color: darkgreen;

par :

color: #163b65;

Les

h1

et

h2

utilisent maintenant la même couleur.

4. Mettre à jour .nom-site

Remplacez :

color: darkslateblue;

par :

color: #4c1d95;

5. Vérifier les trois pages

Ouvrez :

index.html
apropos.html
contact.html

Vérifiez que le texte reste lisible et que les couleurs sont cohérentes sur tout le site.

6. Mesurer le contraste

Avec un outil de vérification de contraste, testez au minimum :

#1f2937 sur #ffffff

#163b65 sur #ffffff

#4c1d95 sur #ffffff

Notez les ratios obtenus.

Vérifiez qu’ils dépassent tous :

4.5:1

pour le texte courant.

7. Retrouver un exemple dans le formulaire

Ouvrez

contact.html

.

Repérez un libellé contenant :

(obligatoire)

Expliquez pourquoi cette information doit rester écrite dans le texte même si nous décidions un jour d’utiliser également une couleur pour la signaler.

8. Expliquer ce que vous avez fait

Sans regarder la correction, expliquez avec vos propres mots :

1. la différence entre

color

et

background-color

;
2. ce qu’est une valeur hexadécimale ;
3. pourquoi nous vérifions une paire texte/arrière-plan ;
4. ce que représente un ratio comme

4.5:1

;
5. pourquoi nous utilisons une palette limitée ;
6. pourquoi une information importante ne doit pas dépendre uniquement d’une couleur.

Dans cette leçon, nous avons appris à choisir les couleurs de manière plus précise.

La propriété :

color

définit la couleur du texte.

La propriété :

background-color

définit la couleur d’arrière-plan.

Nous avons remplacé les noms de couleurs utilisés pour apprendre par une petite palette hexadécimale :

#1f2937 = texte courant

#ffffff = arrière-plan

#163b65 = titres

#4c1d95 = nom du site

Le contraste doit être vérifié entre la couleur du texte et celle de son arrière-plan.

Pour le texte courant, nous avons retenu comme référence importante :

4.5:1

et une exigence plus élevée :

7:1

Nous avons également rappelé qu’une information importante ne doit pas dépendre uniquement d’une couleur.

Dans notre formulaire, le mot :

(obligatoire)

reste donc présent dans le texte.

Dans la prochaine leçon, nous conserverons cette palette et nous réunirons les choix de typographie et de couleurs afin d’organiser une présentation cohérente et maintenable.