Résumé de section

  • 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.