Contraste

Pour qu'un texte soit lisible il faut un contraste suffisant entre le texte et l'arrière-plan. Si le contraste est mauvais, une personne malvoyante ne pourra pas lire le texte. Il sera également plus difficile à lire pour tout le monde quand la luminosité est trop forte (par exemple à l'extérieur) ou lors de la lecture sur un petit écran (smartphone).

Qu'est-ce qu'un contraste suffisant?

Le contraste est la différence de luminosité entre deux couleurs. WCAG 2.1 recommande une valeur minimum de 4,5:1 pour un texte de taille normale et de 3,0:1 pour du grand texte (à partir de 18pt ou 14pt en gras) .

Ci-dessous vous voyez deux captures d'écran quasi identiques. Dans la première, le contraste est insuffisant (3,5:1). Dans la deuxième, le texte gris est légèrement plus clair et le contraste est suffisant (5,4).

Outils pour mesurer le contraste

Vous pouvez utiliser un outil tel que Colour Contrast Analyser pour mesurer objectivement le contraste. Choisissez l'algorithme de luminosité. Utilisez la pipette pour sélectionner deux couleurs à l'écran ou indiquez directement les valeurs hexadécimales.

Quelques autres outils:

• Contrast Ratio Analyser - service en ligne
• Colour Contrast Analyser - Extension pour Firefox
• Colors On the Web Color Contrast Analyzer
• Tanaguru Contrast-Finder mesure le contraste et propose des solutions

Pour créer une charte graphique accessible, vous pouvez vous aider du tutoriel pour créer une palette de couleurs accessibles de Stéphanie Walter ou utiliser la grille d'analyse des contrastes d'une charte proposéepar Atalan.

Le daltonisme et les contrastes

Le daltonisme est une anomalie dans la perception des couleurs. L’œil perçoit en couleurs sur la base des couleurs primaires rouge, vert et bleu. Si la perception d'une de ces trois couleurs ne se fait pas bien, c'est la perception globale qui est altérée. Un homme sur douze est daltonien pour une femme sur 250. Les cas d'absence totale de perception des couleurs (achromatopsie) existent mais sont rares.

Lorsque les couleurs ne sont pas bien perçues les contrastes ont encore plus d'importance. Utilisez les combinaisons de couleurs suivantes avec prudence:

• rouge - vert
• noir - rouge
• blanc - jaune
• vert - bleu

 

Une simulation des formes de daltonisme peut être réalisée grâce au Colour Contrast Analyser.

Contraste des liens

Dans l'exemple ci-dessous les liens se distinguent du reste du texte par la couleur. Le texte est noir et les liens sont rouges.

Ici c'est le contraste entre la couleur du texte et la couleur des liens qui est insuffisante. Pour quelqu'un qui ne distingue pas bien les couleurs les liens sont quasi impossibles à distinguer, comme on le voit si l'on regarde la même texte en nuances de gris.

Fond pas uniforme

Lorsque l'arrière-plan n'est pas uni il faut faire en sorte que le contraste soit suffisant pour toutes les combinaisons de couleurs présentes. C'est parfois impossible. C'est pourquoi il est recommandé d'utiliser un fond uni pour afficher du texte.

Même avec des contrastes suffisants, des arrière-plans pas uniformes peuvent rendre la lecture très difficile ou impossible pour les personnes dyslexiques. Evitez-les au maximum.

Plus d'informations

En Anglais

• Atypical colour response est un article concernant le daltonisme.
• Vischeck's Daltonize Cet outil permet de simuler plusieurs formes de daltonisme.
• A list with color contrast tools