Accessia
Auditer mon site
Tous les critères par thématique

Thématique 3 · Couleurs

Critère RGAA 3.2 : Contraste du texte

Un texte trop peu contrasté devient illisible pour les personnes malvoyantes, les personnes âgées et pour tout le monde sur un écran au soleil.

Niveau
AA
WCAG 2.2
1.4.3
Thématique
Couleurs
Vérification
Détecté automatiquement

La question posée par le RGAA

Dans chaque page web, le contraste entre la couleur du texte et la couleur de son arrière-plan est-il suffisamment élevé (hors cas particuliers) ?

Comment respecter ce critère

  • Visez un contraste d'au moins 4,5:1 pour le texte courant et 3:1 pour le grand texte (24 px, ou 18,5 px en gras).
  • Mesurez les couleurs dès la maquette et corrigez à la source dans le design system.
  • Attention au texte gris clair, aux textes sur photo et aux textes indicatifs (placeholder) des champs.

Mesurez vos couleurs avec le vérificateur de contraste gratuit : ratio, verdict AA / AAA et couleur conforme la plus proche.

Exemple

Le contraste texte/fond est insuffisant (< 4.5:1 pour le texte normal, < 3:1 pour le grand texte).

✗ À éviter

.hint { color: #9aa0a6; background: #ffffff; } /* 2.6:1 */

✓ À faire

.hint { color: #5f6368; background: #ffffff; } /* 4.6:1 */

Les tests officiels

Pour être conforme, chaque élément concerné de la page doit satisfaire les tests suivants :

  1. 3.2.1 — Dans chaque page web, le texte et le texte en image sans effet de graisse d’une taille restituée inférieure à 24px vérifient-ils une de ces conditions (hors cas particuliers) ? (Le rapport de contraste entre le texte et son arrière-plan est de 4.5:1, au moins ; Un mécanisme permet à l’utilisateur d’afficher le texte avec un rapport de contraste de 4.5:1, au moins.)
  2. 3.2.2 — Dans chaque page web, le texte et le texte en image en gras d’une taille restituée inférieure à 18,5px vérifient-ils une de ces conditions (hors cas particuliers) ? (Le rapport de contraste entre le texte et son arrière-plan est de 4.5:1, au moins ; Un mécanisme permet à l’utilisateur d’afficher le texte avec un rapport de contraste de 4.5:1, au moins.)
  3. 3.2.3 — Dans chaque page web, le texte et le texte en image sans effet de graisse d’une taille restituée supérieure ou égale à 24px vérifient-ils une de ces conditions (hors cas particuliers) ? (Le rapport de contraste entre le texte et son arrière-plan est de 3:1, au moins ; Un mécanisme permet à l’utilisateur d’afficher le texte avec un rapport de contraste de 3:1, au moins.)
  4. 3.2.4 — Dans chaque page web, le texte et le texte en image en gras d’une taille restituée supérieure ou égale à 18,5px vérifient-ils une de ces conditions (hors cas particuliers) ? (Le rapport de contraste entre le texte et son arrière-plan est de 3:1, au moins ; Un mécanisme permet à l’utilisateur d’afficher le texte avec un rapport de contraste de 3:1, au moins.)
  5. 3.2.5 — Dans le mécanisme qui permet d’afficher un rapport de contraste conforme, le rapport de contraste entre le texte et la couleur d’arrière-plan est-il suffisamment élevé ?

Source : RGAA 4.1.2, critère 3.2, DINUM (nouvel onglet), sous Licence Ouverte. Le RGAA précise aussi des cas particuliers et un glossaire à consulter pour un audit officiel.

Comment Accessia le vérifie

Accessia détecte automatiquement les manquements à ce critère : l'analyse en ligne et l'extension Chrome localisent chaque élément en cause et proposent le correctif. Un contrôle humain reste utile pour les cas particuliers.