Pourquoi le contraste des couleurs est une priorité absolue dans la conception accessible

Votre site Web a-t-il le bon rapport de contraste ? Le rapport de contraste est la propriété d'un affichage Web et le rapport de la luminance de la teinte la plus claire à la teinte la plus foncée que le système produit. Un rapport de contraste élevé est souhaité, et avoir le bon rapport de contraste pour tous les utilisateurs, y compris les personnes handicapées, garantit qu'ils peuvent comprendre et interagir avec votre page. Un rapport de contraste insuffisant rendra difficile, voire impossible, pour un utilisateur de percevoir le contenu d'une page. Lors de la conception d'une page, le contraste des couleurs et la possibilité pour tous les utilisateurs d'interagir avec la page doivent être une priorité – et cela peut être le cas si vous suivez les critères de réussite des Directives pour l'accessibilité du contenu Web (WCAG).

Les principaux critères de contraste des couleurs

Passons en revue certains des principaux critères à garder à l'esprit :

Critère de réussite 1.4.3 Contraste (minimum)

Ceci est un critère de niveau, qui est la norme à suivre pour chaque entreprise, et stipule qu'il doit y avoir un rapport de contraste de 4,5:1. Le contraste pour le texte de grande taille est de 3:1 et il existe d'autres exceptions définies dans l'exigence.

Critère de réussite 1.4.6 Contraste (amélioré)

Il s'agit d'un critère de niveau AAA, qui est un critère avancé qui est sélectionné lorsque demandé, qui indique qu'il doit y avoir un rapport de contraste de 7:1. Le contraste pour le texte de grande taille est de 4,5:1 et il existe d'autres exceptions qui sont définies dans l'exigence.

Critère de réussite 1.4.11 Contraste non textuel

Le contraste non textuel est un critère de niveau AA qui a été étendu au non-texte. -zones de texte avec l'adoption de WCAG 2.1 en 2018, modifiant le rapport de contraste à 3:1. Les exemples incluent les couleurs utilisées dans les tableaux, les graphiques et les icônes.

Au minimum, les conceptions doivent suivre les critères AA, et les ratios indiqués sont le ratio minimum pour passer les critères. Plus le ratio est élevé, plus le contraste est élevé et plus une page devient accessible pour tous les utilisateurs. Il est beaucoup plus facile de concevoir pour AAA lorsqu'il est fait dans les premières phases du projet. Mais cela devient plus difficile, plus rapide et plus coûteux si ces modifications sont effectuées dans le cadre d'un processus de correction.

Mais attendez, les outils d'accessibilité peuvent vous aider

Heureusement, il existe plusieurs outils pour aider à détecter et à définir la palette de couleurs appropriée. pour votre guide de style. Selon la situation, vous pouvez utiliser un ou tous ces outils pour vous aider à déterminer le rapport correct.

WebAim Contrast Checker  

WebAim Contrast Checker vous permet de vérifier le rapport en ajoutant l'hexadécimal des codes pour le premier plan et l'arrière-plan pour identifier si la combinaison de couleurs satisfait ou échoue aux critères de réussite WCAG applicables.

Analyseur de contraste de couleur.

Dans certains cas, la couleur d'arrière-plan provient d'une image ou d'un dégradé et n'aura pas de code hexadécimal.

L'analyseur de contraste de couleur est une application locale (disponible pour Windows et Apple) pour aider à déterminer le rapport de contraste. En plus de la vérification par code hexadécimal, les fonctionnalités supplémentaires incluent la vérification avec RVB et d'autres formats de couleur. L'application dispose également d'un outil pipette à déposer sur une page et affiche le code hexadécimal en fonction de l'endroit où la pipette a été placée. Comme avec WebAim, cet outil fournit également un résumé de la comparaison entre la combinaison de couleurs et les critères, et vous pouvez également étendre les critères pour obtenir des informations supplémentaires.

Image d'arrière-plan Brandwood

L'outil d'image d'arrière-plan vous permettra de vérifier le rapport de contraste du texte sur les images d'arrière-plan. Cela est pratique si vous avez une image et que vous devez trouver la zone la plus appropriée pour placer le texte. Pour utiliser l'outil, vous pouvez télécharger l'image et déterminer la couleur et la taille du texte. Ensuite, déplacez le texte autour de l'image pour trouver l'endroit le plus accessible. Selon l'endroit où le texte est placé, cet outil déterminera si la conception est accessible. Il peut passer dans un domaine et échouer dans un autre domaine. Si vous avez des restrictions sur l'endroit où le texte peut être placé, cela peut vous aider à décider si vous avez besoin d'un dégradé supplémentaire ou si le texte doit même être placé sur l'image.

Résolvez facilement les problèmes de contraste des couleurs

Il existe de nombreux autres outils pour vous aider à identifier et à déterminer les rapports de contraste des couleurs. C'est l'une des erreurs d'accessibilité les plus courantesmais une fois identifiée, c'est aussi l'une des erreurs les plus faciles à résoudre. Pour éviter que des erreurs n'apparaissent sur votre site, utilisez ces outils lors de la conception, du développement et des tests. En utilisant ces outils, vous pouvez identifier et résoudre tous les problèmes avant que votre client ne les voit. Pour plus d'informations sur les outils d'accessibilité, téléchargez notre guide, Expériences numériquement accessibles : pourquoi c'est important et comment les créeret pour savoir si votre site Web est accessible, contactez-nous à propos de notre Accessibility IQ.