Couleur, motif et libellés directs
Codez les séries de façon à ce que les utilisateurs daltoniens puissent les lire.
Couleur, motif et libellés directs est une leçon Web Accessibility Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Web Accessibility Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Web Accessibility Academy comprend 4 leçons au total.
La couleur seule trompe certains yeux
Environ 1 homme sur 12 ne distingue pas correctement certaines couleurs. Si votre graphique indique que le rouge signifie une perte, ces personnes ne voient aucune différence. 🎨
La règle des deux canaux
Encodez chaque série avec un second canal en plus de la couleur : un motif, une forme ou un libellé direct. La couleur devient un plus, et non l’unique indice.
Les motifs comblent la lacune
Donnez aux barres et aux zones des motifs distincts, comme des rayures ou des points. Le remplissage permet de distinguer les séries, même en niveaux de gris.
<rect fill="url(#stripes)" />Des formes différentes pour les graphiques en lignes
Dans les graphiques en lignes, marquez les points avec des formes distinctes : cercles, carrés ou triangles. Chaque ligne reste identifiable sans dépendre de la teinte.
Les libellés directs valent mieux que les légendes
Une légende distincte impose un jeu de correspondance entre les couleurs. Placez le libellé directement sur la ligne ou la portion afin que le nom soit à côté des données.
Choisir une palette adaptée au daltonisme
Certaines paires de teintes, comme le rouge et le vert, sont particulièrement difficiles à distinguer. Une palette adaptée au daltonisme, comme Okabe-Ito, évite ces confusions.
Le contraste reste important ici
Les séries adjacentes et leurs libellés doivent présenter un véritable contraste. WCAG exige un rapport d’au moins 3 pour 1 entre les éléments graphiques porteurs de sens.
Tester en niveaux de gris
Vérification rapide : affichez votre graphique en niveaux de gris. Si vous ne pouvez pas distinguer les séries, une personne daltonienne ne le pourra pas non plus. Corrigez cela avant la mise en production.
filter: grayscale(100%);L’objectif est un encodage redondant
L’empilement de ces indices s’appelle l’encodage redondant : couleur, motif et libellé. Si un indice disparaît, le graphique reste lisible.
Ne pas multiplier les indices
L’équilibre est essentiel. Accumuler tous les motifs à la fois crée du bruit. Ajoutez juste assez d’indices pour que chaque série soit distincte et que le graphique reste lisible.
Cela aide aussi en cas de mauvaise lumière
Les libellés directs et les motifs rendent aussi les graphiques lisibles en plein soleil, sur des écrans bas de gamme ou imprimés en noir et blanc. Tout le monde y gagne. ☀️
Vérification rapide
Pourquoi la couleur seule est-elle un mauvais moyen de distinguer les séries d’un graphique ?
Récapitulatif : plusieurs indices
Vous avez appris à ne jamais vous appuyer uniquement sur la couleur : ajoutez des motifs, des formes ou des libellés directs, choisissez des palettes adaptées et testez en niveaux de gris. 🖤
Questions Fréquemment Posées
La leçon « Couleur, motif et libellés directs » est-elle gratuite ?
Oui — le texte complet de « Couleur, motif et libellés directs » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Web Accessibility Academy, passe à CoddyKit PRO. Le cours Web Accessibility Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Couleur, motif et libellés directs » ?
Codez les séries de façon à ce que les utilisateurs daltoniens puissent les lire. Tu pratiques Web Accessibility Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Web Accessibility Academy ?
Aucune expérience préalable n'est requise. Web Accessibility Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 4.
Combien de temps prend la leçon « Couleur, motif et libellés directs » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Web Accessibility Academy ?
Oui. Chaque leçon Web Accessibility Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Chaque graphique a besoin d'une alternative textuelle
- La solution de repli sous forme de tableau de données
- Couleur, motif et libellés directs
- Graphiques interactifs navigables au clavier