Vérifier le contraste et la lisibilité

Un texte peut sembler lisible sur votre écran et devenir difficile à distinguer pour une autre personne, sur un autre appareil ou dans des conditions de lumière différentes. Un contraste trop faible fatigue les yeux et peut rendre les horaires ou les conseils de l’atelier difficiles à consulter. Vous allez vérifier les couleurs, la taille et l’espacement des textes, ainsi que la visibilité des liens au clavier.

Mesurer le contraste

Le contraste désigne la différence de luminosité entre un texte et son arrière-plan. Quand les deux couleurs sont proches, les lettres se détachent mal : un vert pâle sur un fond blanc, par exemple, peut être difficile à lire. Le rapport de contraste se calcule entre les deux couleurs et s’exprime de 1:1, contraste minimal, à 21:1, contraste maximal.

Pour viser le niveau AA des recommandations WCAG, prévoyez un rapport d’au moins 4,5:1 pour le texte courant. Les grands caractères peuvent se contenter de 3:1 ; on entend généralement par là un texte d’au moins 24 px, ou d’au moins 18,66 px s’il est en gras. Ne vous fiez pas uniquement à votre perception : utilisez un outil de vérification du contraste en lui donnant les couleurs du texte et du fond, puis comparez le résultat aux seuils.

Corriger les couleurs de la page

Dans la page de l’atelier, le nom de l’activité, les horaires et les conseils pratiques doivent rester faciles à lire sur leur arrière-plan. Si votre vert de marque est trop clair pour un paragraphe sur fond blanc, gardez-le pour un grand titre ou une décoration et choisissez un vert plus sombre pour le texte courant. Les variables de couleur déjà mises en place vous permettent de remplacer une valeur partagée sans modifier chaque règle séparément.

:root {
    --couleur-texte: #243128;
    --couleur-fond: #ffffff;
    --couleur-lien: #175c37;
    --couleur-focus: #a33b00;
}

body {
    color: var(--couleur-texte);
    background-color: var(--couleur-fond);
    font-size: 1rem;
    line-height: 1.6;
}

a {
    color: var(--couleur-lien);
    text-decoration: underline;
}

a:focus-visible {
    outline: 3px solid var(--couleur-focus);
    outline-offset: 3px;
}

Dans cet exemple, le texte courant est sombre sur fond blanc et les liens sont soulignés : leur identification ne dépend donc pas seulement de leur couleur. Les valeurs de couleur proposées sont des points de départ ; vérifiez leur rapport réel avec un outil avant de les retenir, car une petite variation peut faire passer une paire de couleurs sous le seuil recommandé. Conservez des différences visuelles nettes entre le texte et le fond, y compris dans les zones de contact ou les encadrés.

Améliorer le confort de lecture

Un bon contraste ne suffit pas si le texte est minuscule ou tassé. Gardez une taille de base confortable, par exemple 1rem, et une hauteur de ligne autour de 1,5 à 1,7 pour les paragraphes. Évitez les longues portions en capitales, les polices très fines et les paragraphes trop denses ; séparez les informations pour que les horaires et les consignes puissent être repérés rapidement.

Vérifiez aussi que l’information n’est pas communiquée uniquement par la couleur. Si vous distinguez les liens du reste du texte par leur couleur, ajoutez un soulignement ; si une consigne signale une erreur, accompagnez sa couleur d’un texte explicite. Ces repères restent utiles aux personnes qui perçoivent mal certaines couleurs et à celles qui consultent la page sur un écran peu performant.

Rendre les liens visibles au clavier

Les personnes qui naviguent au clavier doivent pouvoir repérer quel lien est sélectionné. La règle :focus-visible de l’exemple affiche un contour contrasté autour du lien actif sans supprimer le style de focus fourni par défaut par le navigateur. N’enlevez pas ce contour avec outline: none sans fournir à la place un indicateur tout aussi visible ; vérifiez que le contour ne se confond ni avec le fond ni avec la couleur du lien.

À retenir

• Visez un rapport de contraste d’au moins 4,5:1 pour le texte courant et de 3:1 pour les grands caractères.
• Vérifiez les paires de couleurs avec un outil de mesure, plutôt qu’à l’œil seul.
• Privilégiez une taille confortable et une hauteur de ligne qui facilite le suivi des paragraphes.
• Ne transmettez pas une information uniquement par la couleur ; distinguez aussi les liens par un repère visuel.
• Conservez un indicateur de focus visible pour les liens utilisés au clavier.