Lorsqu’il s’agit de concevoir des sites web, le choix des couleurs revêt une grande importance. Les couleurs véhiculent l’identité de votre marque, aident les utilisateurs à comprendre l’information présentée.

Cependant, il est essentiel de prendre en compte les différences individuelles dans la perception des couleurs. Certains utilisateurs peuvent être daltoniens, tandis que d’autres peuvent avoir une déficience visuelle. De plus, divers facteurs environnementaux ou situationnels peuvent rendre complexe la perception des couleurs et des contrastes. C’est pourquoi accorder une attention particulière à l’accessibilité de vos sites web et services est d’une importance primordiale.

Je ne détaillerai pas tous les aspects de l’accessibilité en général, car cet article se concentre spécifiquement sur l’importance des couleurs.

Couleurs et accessibilité 

« L’accessibilité des couleurs’ est le fait d’utiliser des couleurs visibles par le plus grand nombre. Cela signifie que lors de la création du design d’un site internet, le choix de couleurs avec beaucoup de contraste doivent être privilégiées afin que chacun puisse clairement différencier le texte et puisse lire facilement votre texte.

Les critères et directives des WCAG et RGAA

Toutefois, il existe une liste de critères que vous pouvez consulter dans les directives WCAG 2.2  pour vous aider dans cette démarche. En France, le référentiel à suivre est le RGAA

La section 3 du RGAA est spécifiquement dédiée à la couleur.

Lorsqu’il s’agit de l’accessibilité et des couleurs, il y a deux principaux points à retenir :

• L’information ne doit pas être donnée uniquement par la couleur.
• Le contraste entre la couleur du texte et la couleur de son arrière-plan soit être suffisamment élevé.

Contraste entre les textes et l’arrière-plan

La couleur du texte de premier plan doit présenter un contraste suffisant avec la couleur d’arrière-plan.

Critère 3.2 du RGAA

Dans chaque page web, le contraste entre la couleur du texte et la couleur de son arrière-plan est-il suffisamment élevé (hors cas particuliers) ? Source : RGAA

Le rapport de contraste entre le texte et son arrière-plan est de 4.5:1, au moins ;

Critère 1.4 des WCAG 

(Niveau A)

La couleur n’est pas utilisée comme le seul moyen visuel de transmettre une information, d’indiquer une action, de susciter une réponse ou de distinguer un élément visuel.

Critère de succès 1.4.3 Contraste (minimum)

(Niveau AA)

La présentation visuelle du texte et des images de texte a un rapport de contraste d’au moins 4,5:1, à l’exception de ce qui suit :

Le texte à grande échelle et les images de texte à grande échelle ont un rapport de contraste d’au moins 3:1 ;

Le texte ou les images de texte qui font partie d’un composant d’interface utilisateur inactif , qui sont purement décoratifs , qui ne sont visibles par personne ou qui font partie d’une image contenant un autre contenu visuel important, n’ont aucune exigence de contraste.

Le texte faisant partie d’un logo ou d’un nom de marque n’a aucune exigence de contraste.

Comment vérifier le rapport de contrastes ?

Colour Contrast Analyser

Afin de tester les contrastes, utiliser par exemple l’outil Colour Contrast Analyser disponible en libre téléchargement.

Contrast Analyzer est un outil qui compare les couleurs du texte et de l’arrière-plan pour voir si elles sont assez différentes pour que tout le monde puisse les voir clairement. 

WebAIM Color Contrast Checker

Cet outil permet de vérifier rapidement et facilement le contraste entre deux couleurs. Il utilise les critères WCAG pour évaluer si le contraste est conforme aux normes d’accessibilité recommandées.

Comment simuler le daltonisme?

Les daltoniens constituant une partie significative de la population, avec environ 8% des hommes et 0,5% des femmes touchées par cette condition. Les daltoniens ont une perception altérée des couleurs, ce qui rend difficile la distinction entre certaines teintes. Par conséquent, les concepteurs doivent éviter de s’appuyer exclusivement sur la couleur pour transmettre des informations importantes. L’utilisation de symboles, de motifs et de contrastes forts peut aider à rendre le contenu accessible à tous les utilisateurs, indépendamment de leur perception des couleurs.

Il existe de nombreux outils pour simuler différents types de daltonisme, et la vérification est importante pour détecter tout problème potentiel à l’avance.

Color oracle

Color Oracle est un simulateur de daltonisme gratuit pour Windows, Mac et Linux. Il élimine les conjectures de la conception pour les daltoniens en vous montrant en temps réel ce que verront les personnes ayant des troubles courants de la vision des couleurs.

Color Oracle applique un filtre de couleur plein écran à l’art que vous concevez, indépendamment du logiciel utilisé. Huit pour cent de tous les hommes sont affectés par une déficience de la vision des couleurs – assurez-vous que votre travail graphique est lisible par le public le plus large possible.

Toptal

L’outil en ligne de Toptal Colorfilter vous permet de tester votre site Web et vous montre comment les personnes daltoniennes voient vos pages.

Simuler des déficiences visuelles

NoCoffee Vision Simulator

Cet outil simule différentes déficiences visuelles, y compris le daltonisme, pour vous permettre de voir comment votre site web ou votre design apparaît aux personnes atteintes de ces conditions. Il fournit une perspective précieuse sur l’accessibilité visuelle.

Quelques conseils

• Évitez de compter uniquement sur la couleur pour transmettre une information comme utiliser uniquement du texte en rouge pour mettre en évidence un contenu important. Utilisez plutôt une méthode secondaire telle que l’italique ou le gras pour différencier le texte.
• Évitez les combinaisons de couleurs rouges et noires, car les personnes qui ne peuvent pas détecter le rouge peuvent confondre le rouge avec le noir, rendant l’élément illisible.
• Évitez les combinaisons de couleurs rouges et vertes, car environ 5% des personnes ont des difficultés à distinguer entre le rouge et le vert.
• Évitez les combinaisons de couleurs bleues et jaunes.
• Évitez de combiner des teintes vives lorsque vous placez du texte sur un arrière-plan coloré. Cela peut entraîner une confusion visuelle où les couleurs se superposent et interfèrent les unes avec les autres, rendant le texte difficile à lire.
• Évitez d’utiliser des arrière-plans fortement texturés car ils rendent le texte plus difficile à lire.

Générer une palette de couleurs accessibles 

Accessible Color Palette Generator

Cet outil génère une palette de couleurs accessible en fonction d’une couleur de base que vous spécifiez. Il garantit des combinaisons de couleurs qui respectent les recommandations en matière de contraste et d’accessibilité.

Color Safe

Cet outil vous aide à trouver des combinaisons de couleurs accessibles en générant automatiquement des palettes de couleurs avec un bon contraste. Il prend en compte les recommandations WCAG et facilite le choix de couleurs accessibles pour votre design.

A11y Color Palette

Cet outil génère des palettes de couleurs accessibles en utilisant différentes méthodes de sélection des couleurs, telles que les couleurs complémentaires, analogues, etc. Il facilite la création de palettes respectueuses de l’accessibilité.

Ces outils partagent un objectif similaire : simplifier le processus de développement pour créer des interfaces utilisateur a la fois esthétiques et accessibles.