Créer une palette de couleurs accessible selon les normes WCAG
L'accessibilité des couleurs n'est pas une contrainte optionnelle — c'est une obligation légale dans de nombreux pays pour les sites web publics, et une bonne pratique pour tous les autres. Les WCAG 2.1 définissent des ratios de contraste minimum que le texte doit respecter par rapport à son arrière-plan pour être lisible par les personnes malvoyantes. Le Sélecteur de Couleur de WikiPlus affiche le ratio de contraste en temps réel et vous aide à ajuster vos couleurs pour atteindre les niveaux AA et AAA sans sacrifier l'identité visuelle de votre marque.
Comprendre les niveaux WCAG AA et AAA
Les directives WCAG 2.1 définissent trois seuils d'accessibilité. Pour le texte normal — tout texte sous 18 pt régulier ou 14 pt gras — le niveau AA minimum exige un rapport de contraste de 4,5:1. Pour le grand texte à ces tailles ou au-dessus, le minimum est de 3:1. Le niveau AAA exige 7:1 pour le texte normal et 4,5:1 pour le grand texte. WCAG 3.0 (actuellement en brouillon) introduira l'algorithme APCA qui tient compte de la graisse de police, de la taille et de la fréquence spatiale plutôt que de traiter tout le texte de la même façon. Mais WCAG 2.1 AA reste la base légale et d'audit dans la plupart des pays. En France, le RGAA (Référentiel Général d'Amélioration de l'Accessibilité) adopte les critères WCAG 2.1 AA comme base pour les services publics numériques.
Ajuster les couleurs de marque pour l'accessibilité
Le problème courant est qu'une couleur de marque saturée — un bleu vif, un orange lumineux — semble visuellement accessible mais mesure seulement 2,8:1 ou 3,2:1 contre le blanc, bien en dessous du minimum de 4,5:1. La solution standard est d'assombrir la couleur de texte en augmentant la composante de valeur dans l'espace HSL ou oklch tout en préservant la teinte. Une réduction de 15 à 25 points de luminosité suffit généralement pour passer de 3:1 à 4,5:1. Alternativement, réservez la couleur de marque hors spec pour les grands titres de présentation où seul le seuil de 3:1 s'applique. Utilisez une version assombrie pour le corps du texte. Le sélecteur WikiPlus met à jour le ratio en temps réel pendant que vous ajustez les curseurs, ce qui rend ce processus d'ajustement très rapide.
Construire des palettes tonales accessibles
Une palette tonale cohérente contient plusieurs nuances d'une même teinte, allant du très clair au très sombre, toutes avec des ratios de contraste prédéfinis. Pour créer une palette tonale accessible : commencez avec votre couleur de base en oklch, conservez la teinte et la chroma constantes, et faites varier la luminosité par incréments réguliers de 10 à 15 points. Vérifiez le ratio de contraste de chaque nuance contre le blanc et le noir dans le sélecteur. Les nuances avec L < 0,4 auront généralement un bon contraste contre le blanc (>4,5:1), et les nuances avec L > 0,7 auront un bon contraste contre le noir. Cette approche garantit que votre palette a des options accessibles à chaque niveau de luminosité. Material Design 3 et le système de couleurs de Tailwind CSS suivent cette approche pour leurs palettes.
Tester l'accessibilité des couleurs pour le daltonisme
Environ 8% des hommes et 0,5% des femmes présentent une forme de daltonisme. Les types les plus courants sont la deutéranopie (difficulté avec le vert), la protanopie (difficulté avec le rouge) et la tritanopie (difficulté avec le bleu). Pour ces utilisateurs, une interface dont les informations sont communiquées uniquement par la couleur est inaccessible. Les bonnes pratiques recommandent de toujours combiner la couleur avec un autre indicateur visuel : une icône, un label textuel ou un motif de fond. Pour les formulaires, ne signalez pas les erreurs uniquement en rouge — ajoutez un message d'erreur textuel. Pour les graphiques, ne distinguez pas les lignes uniquement par leur couleur — ajoutez des marqueurs ou des patterns différents. Le sélecteur de couleur WikiPlus peut être utilisé pour tester la lisibilité des combinaisons de couleurs que vous envisagez.
Questions fréquemment posées
- Comment calculer le ratio de contraste entre deux couleurs ?
- Le ratio de contraste WCAG est calculé à partir de la luminance relative des deux couleurs. La luminance est d'abord calculée en appliquant une correction gamma aux valeurs RGB, puis les deux luminances sont comparées : ratio = (L1 + 0,05) / (L2 + 0,05) où L1 est la luminance la plus élevée. Le sélecteur WikiPlus calcule ce ratio automatiquement pour n'importe quelle paire de couleurs.
- Quelle est la différence entre WCAG 2.1 et WCAG 3.0 pour les couleurs ?
- WCAG 2.1 utilise un ratio de contraste basé sur la luminance relative qui traite tout le texte identiquement. WCAG 3.0 (en brouillon) utilise APCA qui tient compte de la graisse de police, de la taille et du fond pour calculer une valeur de contraste plus représentative de la perception visuelle réelle. WCAG 2.1 AA reste le standard légal actuel.
- Mon logo peut-il utiliser des couleurs qui ne respectent pas WCAG ?
- Oui. Les WCAG exemptent les logotypes et le texte décoratif de leurs exigences de contraste. Ces exemptions s'appliquent aussi aux icônes purement décoratives. Cependant, si votre logo inclut du texte fonctionnel que les utilisateurs doivent lire, les exigences de contraste s'appliquent.