Aperçu des sections

  • Bienvenue !

    Tout replier Tout déplier

    Ce cours vous permettra d'appréhender les principes fondamentaux de l'accessibilité numérique liée à l'utilisation des couleurs. Il aborde à la fois les aspects théoriques et pratiques pour concevoir des ressources accessibles à tous les utilisateurs.

    À travers des exemples visuels, des exercices pratiques et des études de cas, vous apprendrez à identifier et corriger les erreurs d'accessibilité courantes, pour garantir que vos ressources pédagogiques soient utilisables par tous, indépendamment de leurs capacités visuelles.

    Objectifs

    • Identifier les enjeux d'accessibilité chromatique ;
    • Identifier et utiliser les principaux outils de vérification de l'accessibilité des couleurs ;
    • Repérer les problèmes d'accessibilité chromatiques dans diverses situations données et trouver des solutions adaptées.
    Ce cours est en libre accès !

    Aucune création de compte ou d'inscription n'est nécessaire, toutefois vous ne pourrez le parcourir qu'en lecture seule.

    Pour participer à certaines activités (test, forum...), vous pouvez vous inscrire au cours.

    S'inscrire au cours

    • Auteur(s) / Formateur(s): Viet Jeannaud - Fondation Callisto
      Public cible: Formateurs
      Date de publication: 31 mars 2025
      Durée estimée: 45 minutes
      Prérequis: Introduction à l'accessibilité conseillée
      Licence: CC BY-NC-SA
      Open badge: Oui
      Nombre d'inscrits: 8
      Recours à une IA: Aide à la génération des graphiques avec Claude Sonnet 3.7

  • Les couleurs dans l'apprentissage

    Commençons par quelques aspects théoriques sur la couleur, notamment dans un contexte pédagogique.

    3 minutes de lecture

    • La symbolique des couleurs

      Les couleurs sont de puissants vecteurs d'émotions et de messages dans notre quotidien. Chaque couleur peut évoquer différentes sensations et sentiments, même si ces associations restent subjectives et varient selon les cultures. Voici quelques exemples courants dans notre contexte occidental :

    • Rouge : passion, énergie, dynamisme, alerte, puissance...

      Violet : créativité, imagination, spiritualité, luxe, sagesse...

      Bleu : confiance, calme, professionalisme, paix, harmonie...

      Vert : nature, équilibre, bien-être, espoir, renouveau...

      Jaune : optimisme, joie, luminosité, jeunesse, dynamisme...

      Orange : sociabilité, communication, vitalité, créativité, originalité...

      Roue chromatique

    • Bien entendu, ces associations ne sont pas universelles ! Une même couleur peut avoir des significations très différentes selon les cultures. Le blanc par exemple peut symboliser la pureté en Occident, mais représenter le deuil dans certaines cultures asiatiques.

    • L'impact des tonalités

      Au-delà de la couleur elle-même, la façon dont on la module influence aussi son impact émotionnel. On peut jouer sur plusieurs aspects, par exemple :

      La luminosité (foncé/clair)

      Une même couleur peut paraître plus profonde ou plus légère selon sa luminosité. Un bleu foncé évoquera le sérieux, la profondeur, tandis qu'un bleu clair suggérera la légèreté, la douceur.

      Exemple de quatre couleurs bleues allant de la plus sombre à la plus claire.
      L'intensité (pastel/vif)

      L'intensité d'une couleur détermine sa force expressive. Une couleur douce créera une atmosphère plus subtile et apaisée, tandis qu'une version plus vive attirera l'attention et transmettra de l'énergie.

      Exemple de quatre couleurs bleues allant de la plus douce à la plus vive.
      La teinte

      En faisant varier légèrement la teinte d'une couleur, on peut modifier subtilement son impact. Par exemple, un bleu tirant vers le violet paraîtra plus profond et mystérieux, alors qu'un bleu tendant vers le vert semblera plus dynamique et frais.

      Exemple de quatre couleurs allant d'un bleu tirant vers le violet à un bleu tirant vers le vert.

    • Ces variations permettent d'ajuster finement l'impact émotionnel d'une couleur tout en restant dans la même famille chromatique.

    • Les usages conventionnels des couleurs

      Si les couleurs évoquent des émotions, elles servent aussi à donner un sens commun. Par exemple :

      • elles font parties intégrantes de la compréhension du code de la route, 
      • elles permettent d'identifier rapidement des éléments sur le web, comme les liens hypertextes (bleu par défaut), les messages d'erreur (rouge), de validation (vert)...

      On retrouve bien sûr ces usages en contexte pédagogique, pour structurer l'apprentissage et guider les apprenants, par exemple :

      • des codes couleur conventionnels comme le rouge pour signaler les erreurs et le vert pour les réponses correctes,
      • l'utilisation de couleurs pour organiser l'information, symboliser les niveaux de difficulté,
      • des surlignages colorés pour mettre en évidence les points clés.
      Description dans la légende.

      Quiz montrant deux feedbacks : un de couleur rouge pour la réponse fausse et un vert pour la correcte.

      Ces pratiques, bien qu'efficaces, doivent être pensées pour rester accessibles à tous les apprenants. C'est ce que nous allons voir dans la section suivante...

  • Les enjeux de l'accessibilité des couleurs

    Quels problèmes sont liés à la couleur en termes d'accessibilités et quelles sont les pistes pour les éviter ?

    2 minutes de lecture

    • Des perceptions différentes selon les utilisateurs

      Nous avons vu que les couleurs sont largement utilisées pour transmettre de l'information et guider les utilisateurs. Cependant, tous les apprenants ne perçoivent pas les couleurs de la même façon.

      Le daltonisme

      Le daltonisme affecte environ 8% des hommes et 0,5% des femmes en France. Il en existe plusieurs formes qui vont avoir des répercussions différentes sur la perception des couleurs. En voici quelques exemples.

      Protanopie

      L'absence des cônes rouges engendre une difficulté à voir le rouge.

      Comparaison des couleurs de l'arc en ciel vues par une personne sans handicap et par une personne atteinte de pronotopie.
      Deutéranopie

      L'absence des cônes verts engendre une difficulté à voir le vert.

      Comparaison des couleurs de l'arc en ciel vues par une personne sans handicap et par une personne atteinte de deutéranopie.
      Tritanopie

      L'absence des cônes bleus engendre une difficulté à voir le bleu.

      Comparaison des couleurs de l'arc en ciel vues par une personne sans handicap et par une personne atteinte de tritanopie.
      Autres troubles

      Si on pense généralement au daltonisme concernant les problèmes de perception des couleurs, il convient tout de même de prendre en compte d'autres contextes. Par exemple :

      • la perception des couleurs peut être altérée par la fatigue visuelle ou le vieillissement,
      • les conditions d'éclairage ou la qualité des écrans peuvent modifier l'apparence des couleurs,
      • certaines personnes peuvent être particulièrement sensibles à la luminosité ou aux contrastes,
      • certaines formes de migraine peuvent causer une hypersensibilité aux couleurs vives.

    • Critères à prendre en compte pour éviter les problèmes d'accessibilités

      Il n'est pas toujours possible de savoir si un apprenant se trouve dans une situation l'empêchant de bien percevoir les couleurs. Dès lors, si l'on ne fait pas attention, plusieurs problématiques peuvent survenir :

      • impossibilité de distinguer les bonnes des mauvaises réponses dans un quiz si seule la couleur (vert/rouge) est utilisée ;
      • difficulté à repérer les liens hypertextes si leur seule caractéristique est d'avoir une couleur différente du texte principal ;
      • impossibilité de lire et comprendre des graphiques / schémas si seule la couleur différencie les éléments ;
      • problèmes de lecture en cas de contraste insuffisant, notamment entre la couleur de texte et la couleur de fond.

      La bonne nouvelle est qu'il existe des solutions simples pour rendre nos contenus accessibles à tous :

      1. ne jamais utiliser la couleur comme seul vecteur d'information,
      2. envisager des alternatives (textes, symboles, motifs...) pour pallier ce problème,
      3. assurer un contraste suffisant entre les couleurs.

      Ci-dessous, un exemple de quiz typique que l'on peut trouver sur une plateforme d'apprentissage :

      Comment un quiz est perçu selon différents types de daltonisme
      Vision normale
      Quiz avec la bonne réponse en vert et les mauvaises en rouge. Une icône permet de distinguer les couleurs.
      Vision protanope
      Quiz ne permettant de distinguer la bonne réponse avec les couleurs, mais avec les icônes.
      Vision deutéranope
      Quiz ne permettant de distinguer la bonne réponse avec les couleurs, mais avec les icônes.
      Vision tritanope
      Quiz ne permettant de distinguer la bonne réponse avec les couleurs, mais avec les icônes.

      Dans cet exemple, il y a heureusement la présence des symboles ✓ et ✗ qui permet de comprendre les réponses même sans distinguer les couleurs. La couleur n'est donc pas utilisée comme seule façon de donner l'information. On peut toutefois se poser la question du contraste entre la couleur du texte et la couleur de fond...

  • Les critères techniques à respecter

    Voyons dans le détail ce qui est préconisé par le cadre légal en termes d'accessibilité.

    10 minutes de lecture

    • Le ratio de contraste

      Le ratio de contraste mesure la différence de luminosité entre deux couleurs. Il s'étend de 1:1 (aucun contraste, comme noir sur noir) à 21:1 (contraste maximal, comme noir sur blanc).

      1. Seuils minimaux à respecter pour le texte

      Selon le RGAA (Référentiel Général d'Amélioration de l'Accessibilité), qui s'aligne sur les standards internationaux WCAG (Web Content Accessibility Guidelines), les ratios minimaux à respecter pour le texte sont :

      Grand texte : 3:1 minimum

      Est considéré comme grand un texte supérieur ou égal à 24px (ou 18pt) sans graisse ou supérieur ou égal à 18.5px (14pt) avec graisse.

      Exemple :

      • Grand texte (24px)
      • Grand texte (18.5px, gras)
      Texte standard : 4.5:1 minimum

      Est considéré comme standard un texte inférieur à 24px (ou 18pt) sans graisse ou inférieur à 18.5px (ou 14pt) avec graisse.

      Exemple :

      • Texte standard (20px)
      • Texte standard (16px, gras)
    • Échelle des ratios de contraste pour le texte
      Graduation de couleur du noir au blanc montrant les différents contrastes selon les ratios évoqués ci-dessus.

    • Pour en savoir plus sur les normes d'accessibilité, les principes et critères des WCAG et du RGAA, vous pouvez consulter le cours d'introduction sur l'accessibilité.

    • 2. Seuil minimal à respecter pour les éléments graphiques

      On entend par éléments graphiques tout élément non textuel servant principalement à communiquer visuellement une information. Ils peuvent être statiques (comme les icônes informatives, les lignes d'un graphique, les segments d'un diagramme) ou parfois interactifs (comme une carte cliquable ou une infographie interactive). Leur fonction première est de représenter ou d'illustrer une information.

      Pour ces éléments graphiques, le ratio de contraste minimum est de 3:1 avec leur environnement.

    • Exemples d'éléments graphiques
      Contraste insuffisant
      Ratio < 3:1
      Exemples d'éléments graphiques (statut "hors ligne", diagramme, indicateurs colorés) avec ratio de contrastes insuffisant.
      Contraste suffisant
      Ratio ≥ 3:1
      Exemples d'éléments graphiques (statut "hors ligne", diagramme, indicateurs colorés) avec ratio de contrastes suffisant.

    • Il ne faut pas oublier de prendre en considération le contraste entre chaque partie d'un élément graphique.

      Par exemple, pour un graphique de type "camembert", les secteurs du diagramme doivent être suffisamment contrastés. Il peut être difficile de trouver une palette de couleurs accessible, c'est pourquoi il peut être judicieux d'ajouter un contour ou d'espacer les secteurs pour pouvoir les distinguer.

      Dans l'exemple ci-contre, le contraste est suffisant autour et entre les secteurs. Un contour foncé a été ajouté au secteur jaune afin de renforcer son contraste avec le fond blanc.

      Description dans la légende ci-dessous.

      Exemple de diagramme circulaire passant les critères WCAG. Source : Non-text Contrast (Level AA) - WCAG 2.1 Understanding Docs

    • 3. Seuil minimal à respecter pour les composants d'interface

      Les composants d'interface sont généralement des éléments qui permettent l'interaction avec une application. Ils incluent les boutons, champs de formulaire, menus déroulants, cases à cocher, curseurs, onglets, etc. Leur fonction première est de faciliter l'action de l'utilisateur et ils suivent souvent des conventions établies. Un utilisateur s'attend à pouvoir interagir avec eux d'une certaine manière.

      Comme pour les éléments graphiques, le ratio de contraste minimum pour les composants d'interface est de 3:1 avec leur environnement.

    • Exemples de composants d'interface
      Contraste insuffisant
      Ratio < 3:1
      Exemples de composants (boutons, barre de recherche, case à cocher) avec ratio de contrastes insuffisant.
      Contraste suffisant
      Ratio ≥ 3:1
      Exemples de composants (boutons, barre de recherche, case à cocher) avec ratio de contrastes suffisant.

    • La distinction entre éléments graphiques et composants d'interface peut être subtile... Par exemple, une icône peut être un simple élément graphique informatif, mais devient un composant d'interface lorsqu'elle est cliquable. De même, un indicateur visuel peut simplement afficher un statut (élément graphique) ou permettre de changer ce statut (composant d'interface).

      Finalement, quelle que soit sa catégorie, l'important est le rôle de l'élément : est-il essentiel à la compréhension ou à l'interaction ? Si oui, il doit respecter les ratios de contraste préconisés.

    • Notez que vous ne pouvez pas tout contrôler ! Par exemple, si vous produisez un contenu avec un outil spécifique, comme un quiz, vous ne pourrez probablement pas modifier les composants d'interface.

      Toutefois si vous utilisez une image qui n'est pas de vous, comme un graphique ou une image contenant du texte avec un ratio insuffisant, vous pouvez :

      • rédiger les informations importantes en complément afin de proposer une alternative accessible,
      • reproduire ou modifier l'image vous-même pour corriger les problèmes de contraste.

    • Les informations transmises par la couleur

      Ce critère impose de ne pas véhiculer une information uniquement par la couleur. Ceci peut se rencontrer dans plusieurs situations, par exemple :

      • des liens hypertextes identifiables seulement par leur couleur,
      • des cellules colorées dans un tableau sans informations supplémentaires,
      • des graphiques avec des segments différenciés uniquement par couleur.

      Pour assurer une meilleure accessibilité, nous pouvons :

      • ajouter une icône ou un soulignement aux liens,
      • ajouter une information textuelle dans les cellules colorées,
      • ajouter des motifs aux segments du graphique.
    • Ne pas utiliser uniquement la couleur
      À éviter
      Information uniquement par la couleur
      Lien hypertexte sans soulignement et exemples de légendes s'appuyant uniquement sur la couleur.
      Solution accessible
      Information renforcée par d'autres indices visuels
      Lien hypertexte avec soulignement et exemples de légendes ne s'appuyant pas uniquement sur la couleur.

    • Notez que tous les éléments graphiques ne nécessitent pas le même niveau de contraste. Les éléments porteurs d'information ou interactifs requièrent un ratio minimum de 3:1, mais les éléments purement décoratifs, non essentiels ou redondants avec du texte peuvent être exemptés de ce ratio minimum. 

      L'essentiel est de se concentrer sur l'accessibilité de l'information et des fonctionnalités d'interaction. Ce sont ces éléments qui doivent être perceptibles par tous les utilisateurs, quelles que soient leurs capacités visuelles.

    • En résumé : les critères techniques à respecter

      Nous avons vu dans cette section les exigences techniques précises qui encadrent l'accessibilité des couleurs. Les ratios de contraste préconisés par les normes WCAG et RGAA constituent des repères essentiels : 4.5:1 minimum pour le texte standard et 3:1 minimum pour le grand texte, les éléments graphiques et composants d'interface.

      Cette section a également souligné l'importance de ne pas utiliser uniquement la couleur pour transmettre une information, en proposant des méthodes alternatives comme l'ajout d'icônes, de texte ou de motifs pour renforcer le message visuel.

  • Étude de cas : exemples d'erreurs d'accessibilité

    Continuons avec un exemple concret qui nous permettra de voir comment corriger des problèmes d'accessibilité dans un cours.

    5 minutes de lecture

    • Il est important de retenir qu'il n'y a pas de solution unique. Selon votre situation, plusieurs pistes de correction peuvent s'ouvrir à vous. Le tout est de faire des choix adaptés par rapport aux cas que vous rencontrerez, et garder comme objectif principal de faire en sorte que tout le monde puisse accéder à la même information.

  • Boîte à outils

    Il existe de nombreux outils conçus pour vous aider à corriger les problèmes de contraste. Certains sont plutôt destinés à des personnes expertes, comme l'extension de navigateur WCAG Color contrast checker (disponible sur Chrome et Firefox). Le but ici est plutôt de vous donner quelques liens qui vous seront utiles en tant que formateur.

    5 minutes de lecture

    • Pour vérifier le ratio de contraste

      WebAIM Contrast Checker
      Pour une analyse complète

      C'est un outil de référence pour les professionnels de l'accessibilité qui donne des informations détaillées sur la conformité WCAG.

      Le site (en anglais) propose d'entrer le code hexadécimal des couleurs à vérifier, ou d'en prélever une, puis donne les résultats du ratio au niveau de la taille des textes et même des composants d'interface et éléments graphiques !

      Il propose aussi d'autres ressources très utiles, comme cette page complète et très pédagogique sur la notion de contraste et accessibilité.

      Aller sur WebAIM Contrast Checker
    • Tanaguru Contrast Finder
      Pour une utilisation complète en français

      Un outil français et open source qui vous permet d'entrer le code RVB ou hexadécimal, de choisir le ratio minimum que vous visez et d'obtenir des couleurs valides proches de vos couleurs intiales.

      Aller sur Tanaguru Contrast Finder
    • Coolors Contrast Checker
      Pour une vérification rapide

      Cet outil (en anglais) contient bien moins d'explications mais a l'avantage de suggérer une couleur de remplacement se rapprochant au plus près de la teinte problématique.

      Comme WebAIM Contrast Checker, vous pouvez entrer les codes hexadécimaux pour obtenir les résultats du ratio, mais seulement au niveau de la taille des textes.

      Aller sur Coolors Contrast Checker

    • Pour prélever la couleur (outil pipette)

      ColorZilla
      Pour prélever des couleurs sur le web

      C'est une extension de navigateur disponible sur Chrome et Firefox qui permet de prélever le code couleur de n'importe quel élément sur le web. Les couleurs prélevées sont conservées dans l'historique, et d'autres fonctionnalités peuvent s'avérer aussi intéressantes.

      À noter que sur Firefox, le zoom permettant de bien voir le pixel de couleur à prélever ne semble pas disponible. Heureusement, une fonctionnalité intégrée au navigateur existe (voir ci-après).

      Aller sur ColorZilla
    • Mozilla pipette à couleurs
      Pour prélever des couleurs sur Fierfox

      Le problème de Colorzilla sur Firefox est que le zoom du pointeur peut ne pas fonctionner, ce qui rend la sélection du pixel difficile. La fonctionnalité intégrée au navigateur Firefox n'a pas ce problème. Il suffit de cliquer sur le pixel choisi pour copier le code dans le presse-papier.

      La pipette se trouve dans la section "Outils du navigateur / Outils supplémentaires" du menu de la barre d’outils Firefox.

      Aller sur Mozilla pipette à couleurs
    • PowerPoint
      Pour prélever des couleurs hors ligne

      PowerPoint, qui compte parmi les outils les plus utilisés en formation, permet aussi de prélever des couleurs avec une pipette. Ce qui se révèle pratique si vous utilisez une image trouvée hors ligne et que vous souhaitez vérifier les contrastes avec les codes couleurs exacts.

      À noter que les récentes version proposent des fonctions d'accessibilité, notamment la possibilité de filtrer votre palette avec les couleurs ayant des contrastes élevés seulement, mais aussi l'option "Inspecter sans couleur" pour vérifier le rendu en nuances de gris.

      En savoir plus sur la pipette PowerPoint

  • Évaluation : corriger les erreurs d'accessibilité

    Passons à la pratique avec cette série d'exercices qui consiste à vérifier et corriger un diaporama. Cette évaluation compte pour la complétion du cours !

    20 minutes de travail

    • Présentation

      L'objectif de l'évaluation consiste en la vérification et la correction des problèmes d'accessibilité liés à la couleur sur un diaporama fictif. 

      Il y a 5 diapositives à corriger. Il faut réussir les exercices demandés sur la diapositive actuelle pour débloquer la suivante.

      Pour cette évaluation, vous aurez besoin :

      1. D'un outil pipette pour prélever la couleur. Vous pouvez installer Colorzilla si vous êtes sur Chrome. Si vous utilisez Firefox, nous vous conseillons d'utiliser la pipette proposée dans le menu du navigateur (voir la section ci-dessus "Boîte à outils > Mozilla pipette à couleurs").
      2. D'un outil de vérification du ratio de contraste. Comme nous l'avons vu, il y en a plusieurs. Vous pouvez utiliser WebAIM Contrast Checker qui offre des résultats détaillés (prend en compte la taille des textes et les éléments graphiques/composants). Notez que peu importe l'endroit où vous entrez le code couleur ("Foreground" ou "Background"), cela revient à la même chose.

      Pour la vérification des contrastes, fiez-vous d'abord à votre ressenti. Vous n'êtes pas obligé de vérifier toutes les combinaisons, privilégiez celles qui vous semblent problématiques et pour lesquelles vous avez un doute !

    • Diapo 1

      Selon vous, cette diapositive contient-elle un problème de contraste ? Et si oui, sur quel élément ?

      Utilisez la pipette pour vérifier le ratio de contraste du texte par rapport aux couleurs de fond.

      Informations importantes
      Voici la taille de police pour le texte :

      • Les secrets d'une bonne nuit de sommeil : 35px ;
      • Guide pratique pour mieux dormir : 30px ;
      • Février 2025 ; 16px.
      Les secrets d'une bonne nuit de sommeil

      Guide pratique pour mieux dormir

      Février 2025

      Vous avez réussi ? Passez à la diapo suivante en cliquant sur le bouton ci-dessous (nécessite d'être inscrit au cours).

      Passer à la diapo 2

  • Références

  • Merci d'avoir suivi ce cours !