Contrastes

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.0 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).

Texte gris sur fond gris foncé Texte gris (un peu plus clair) sur fond gris foncé

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.

mesure du contraste avec color contrast analyser (résultat=3,5)

Quelques autres outils:

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

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.

paragraaf op internetjournalistiek met rode links in doorlopende zwarte tekst

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.

zelfde paragraaf in grijswaarden waardoor links niet te onderscheiden zijn

Fond pas uniforme

Texte avec photo en arrière-plan Texte blanc avec motif en couleurs en arrière-plan

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