Contrastes & Couleurs
Assurer une lisibilité optimale pour tous les utilisateurs
Critères WCAG EN 301 549
Contraste de texte
Mauvais exemple
Texte gris clair sur blanc (2.2:1) - Échec
Ratio: 2.2:1Texte gris moyen sur blanc (3.8:1) - Échec
Ratio: 3.8:1Texte jaune sur blanc (1.9:1) - Échec
Ratio: 1.9:1Orange sur rouge (1.2:1) - Échec
Ratio: 1.2:1Gris foncé sur fond noir (2.5:1) - Échec
Ratio: 2.5:1Bleu sur fond sombre (1.8:1) - Échec
Ratio: 1.8:1Bon exemple
Texte gris foncé sur blanc (7.0:1) - Réussite AAA
Ratio: 7.0:1Texte noir sur blanc (21:1) - Réussite AAA
Ratio: 21:1Texte bleu foncé sur blanc (5.9:1) - Réussite AA
Ratio: 5.9:1Blanc sur bleu foncé (8.6:1) - Réussite AAA
Ratio: 8.6:1Blanc sur fond noir (21:1) - Réussite AAA
Ratio: 21:1Jaune sur fond sombre (12.3:1) - Réussite AAA
Ratio: 12.3:1Explication : Le ratio de contraste WCAG AA exige au minimum 4.5:1 pour le texte normal et 3:1 pour le texte large (18pt+ ou 14pt+ gras). Le niveau AAA est plus strict avec 7:1 et 4.5:1.
Information par la couleur
Mauvais exemple
Formulaire d'inscription
🔴 Rouge = Erreur, Vert = Valide
Statut des commandes
Bon exemple
Formulaire d'inscription
Statut des commandes
Explication : L'information ne doit jamais reposer uniquement sur la couleur. Il faut toujours ajouter des indicateurs visuels supplémentaires (icônes, motifs, texte).
Daltonisme et accessibilité
Mauvais exemple
Graphique de performance
Bon exemple
Graphique de performance
Explication : Environ 8% des hommes et 0.5% des femmes sont daltoniens. Les combinaisons rouge-vert sont particulièrement problématiques.
Commutateur de thème accessible
Mauvais exemple
Contenu de la page
Ce texte change de couleur selon le thème.
Carte d'information
Information importante à lire.
Bon exemple
Contenu de la page
Ce texte maintient un bon contraste dans tous les thèmes.
Carte d'information
Information importante toujours lisible.
Explication : Un commutateur de thème doit maintenir les ratios de contraste, préserver la lisibilité, et respecter les préférences système de l'utilisateur.
Liens - Soulignement et identification
Mauvais exemple
Liens basés uniquement sur la couleur
L'accessibilité web est essentielle pour créer des sites inclusifs. En savoir plus sur l'accessibilité peut vous aider à comprendre les meilleures pratiques. Les directives WCAG fournissent un cadre complet pour améliorer l'accessibilité.
Visitez notre page de ressources pour trouver des outils et tutoriels.
Bon exemple
Liens basés uniquement sur la couleur
L'accessibilité web est essentielle pour créer des sites inclusifs. En savoir plus sur l'accessibilité peut vous aider à comprendre les meilleures pratiques. Les directives WCAG fournissent un cadre complet pour améliorer l'accessibilité.
Visitez notre page de ressources pour trouver des outils et tutoriels.
Explication : Les liens doivent être identifiables sans dépendre uniquement de la couleur. Le soulignement, les différences de motifs ou d'autres indicateurs visuels sont essentiels.