Constituer un nuancier de couleurs accessible

Avec l'émergence de nouveaux appareils : smartphones, tablettes, readers, notre façon de développer des sites internet a beaucoup évolué.
Le tactile apporte une évolution importante et un grand rôle dans le développement de nos applications web et dans l'ergonomie de nos interfaces.
L'émergence du microphone sur les portables et des assistants personnels tel qu'Alexa ou de Google Home va également apporter son lot d'évolution dans l'accessibilité (mais nous parlerons plus amplement de ces futures évolutions lors d'un prochain article).

Dans ce premier article, nous allons aborder l'accessibilité dans le choix des couleurs et des contrastes.
En effet l'accessibilité de votre application ou site internet passe forcément par le choix des couleurs.
Et ces couleurs doivent être accessible à tous, songez aux malvoyants, ou encore aux daltoniens.

Un utilisateur, qu'il soit handicapé ou non, doit pouvoir utiliser les services numériques.

Accessibilité et couleurs : le bon contraste

Lors du développement de votre design de site, application ou produits, il est important de vérifier l'accessibilité des couleurs.
Les dernières recommandations WCAG 2.1 indiquent que le texte et le fond doivent avoir un rapport de contraste minimum de 4,5:1, et de 3:1 pour le texte agrandi.
Donc avant de vous lancer tête baissée dans la création de votre design, il vous faudra contrôler vos choix de couleurs.

Pour cela, il existe des nombreux outils très pratiques pour trouver les meilleurs combinaisons de couleurs afin d'obtenir d'excellent contraste.

Outils de vérification des contrastes des couleurs

Voici une liste non-exhaustive de ces outils.

Lighthouse

Google Chrome dispose d'un outil pratique pour analyser l'accessibilité des pages de votre site web : Lighthouse. Pour y accéder, il vous suffit d'ouvrir votre site sur Google Chrome, clic droit / inspecter. Puis choisissez l'onglet Lighthouse et générer un rapport. Le rapport vous permet de corriger vos problèmes d'accessibilité. Et si Google a mis en place un système d'analyse de l'accessibilité, ce n'est pas pour rien ! Google prend en compte l'accessibilité dans le référencement naturel.

Color Review

Color Review est un outil qui va vous aider à vérifier le contraste entre deux couleurs.
Si les deux couleurs que vous avez choisies ont un rapport de contraste trop faible par rapport au minimum ratio choisi, l'outil va vous proposer de nouvelles couleurs qui vont mieux s'associer.
C'est un outil très pratique pour créer et vérifier sa palette de couleur et leurs associations.
Vous pouvez visualiser le résultat de vos couleurs (fond / premier plan) directement sur la page de l'outil.

Tanaguru Contrast Finder

De la même façon, Tanaguru Contrast Finder va vérifier le rapport de contraste entre deux couleurs.
L'outil va également vous aider à trouver une couleur alternative, si celles-ci ne s'associent pas.

Color & Contrast Picker

Color & Contrast Picker est encore un outil similaire. Il permet de tester votre couleur de fond et de premier plan, et de vérifier leur contraste. il vous suffit encore de jouer avec l'outil pour trouver la meilleure combinaison de contraste possible.

Adobe Color

Adobe a enfin ajouté un outil d'accessibilité à Adobe Color qui analyse le rapport de contraste entre deux couleurs seulement.

L'avantage de leur système est la suggestion de couleurs.
En effet, si les couleurs que vous avez choisi ne sont pas assez contrasté, l'outil est capable de vous proposer deux couleurs semblables mais avec un meilleur contraste. Plutôt pratique.

Huetone

Huetone est moins simple à prendre en main, mais il a la particularité de permettre l'export de votre palette de couleurs en CSS et ou directement dans Figma.

Colorable

Colorable est le dernier outil que je peux vous conseiller pour tester le contraste arrière plan et premier plan. De la même façon que les autres outils, vous pouvez modifier les couleurs afin de parvenir au meilleur accord de contraste avec les commandes de teinte, saturation et luminosité.

Construire votre palette de couleurs : accessible et contrasté

Accessible color palette builder est un outil très complet. Avec cette application, vous pouvez intégrer 6 couleurs (les couleurs de votre charte graphique par exemple). L'outil va ensuite simplement analyser les couleurs ajoutées, et vous indiquer les combinaisons possibles pour votre site internet ou application.

Et si vous avez besoin de plus complet (plus de 6 couleurs différentes), vous pouvez utiliser Contrast Grid. Celui-ci accepte plus de personnalisation puisque vous créez vous-même vos colonnes et lignes de couleurs pour établir vos associations de couleurs.

Un outil complet pour tester votre accessibilité : Wave

Wave permet de tester l'accessibilité de votre site internet page par page.
Il est très complet et permet d'analyser :

• les contrastes et couleurs
• les aria-label
• la structure de votre site : header, navigation, main, titres...
• les liens, les boutons...

Comme nous l'avons vu, le choix des couleurs est à prendre en compte en amont du processus de création de votre site internet.
L'accessibilité contribue également à améliorer votre référencement naturel.
Alors ne négligez pas surtout pas cet aspect !