3.1. Assurer un contraste suffisant entre les textes et l’arrière-plan ou proposer une alternative contrastée

Le contraste entre les textes et l’arrière-plan doit être suffisant.

Cela concerne l’ensemble des textes (« pur », en image, dans des animations, etc.).

Remarque

Il est également important d’assurer un contraste suffisant entre les pictogrammes informatifs ou interactifs seuls (non accompagnés de texte) et leur arrière-plan.

Exemples de pictogrammes suffisamment contrastés.

Rapports de contraste minimum pour une conformité au niveau AA

Le rapport de contraste minimum à atteindre pour une conformité au niveau AA dépend de la taille et de la graisse des textes.

Texte non gras

Texte gras

Remarque

La police de caractères utilisée n’a pas d’impact sur les rapports à atteindre.

Colour Contrast Analyser

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

D’après cet outil, les textes blanc sur fond rose possèdent un rapport de contraste suffisant pour une conformité AA.
Toujours d’après cet outil, le titre « Actualités » en noir sur fond jaune possède un rapport de contraste suffisant pour une conformité AA et AAA.

Attention

Utiliser avec vigilance les dégradés, la transparence et les motifs en arrière-plan.

Astuces

Charte graphique alternative

S’il n’est pas envisageable d’optimiser les contrastes par défaut, alors une charte graphique alternative suffisamment contrastée peut être réalisée.

Une charte graphique alternative n’est pas nécessairement une charte où les contrastes sont poussés à l’extrême (du type noir sur blanc ou blanc sur noir), mais une charte où les associations de couleurs sont suffisamment optimisées.

Dans cet exemple, une charte graphique alternative suffisamment contrastée est activable depuis un bouton « Augmenter le contraste ».
Une fois ce bouton « Augmenter le contraste » cliqué, il se transforme en un bouton « Diminuer le contraste ».

Aller plus loin

8 commentaires

  • Par Claire Bizingre, le 15 septembre 2015 à 13h10.

    Bonjour,

    Il est indiqué dans le critère de contraste « un texte non gras inférieur à 18 pt ».

    Pourquoi fixer 18pt et pourquoi indiquer l’unité pt ?

    On parle plutôt d’un pourcentage de 150% par rapport à taille de police par défaut (ou 1.5em). Même chose pour le texte en gras.

    Mais il y a peut-être une bonne raison qui m’échappe ?

    Merci pour cet éclairage !

    Répondre

  • Par claire bizingre, le 15 septembre 2015 à 13h19.

    Re !

    Comme outils, j’utilise aussi l’extension Firefox WCAG Contrast Checker même pour les maquettes.

    Je charge une image dans Firefox et j’utilise les pipettes de l’extension pour récupérer les couleurs du texte et du fond comme dans Color Contrat Analyser qui parfois fonctionne mal sur mon PC Windows 8.

    Répondre

    • Par Johan Ramon, le 21 septembre 2015 à 16h42.

      Bonjour Claire,

      Merci pour ce partage d’expérience.

      Nous venons d’ajouter l’extension Firefox « WCAG Contrast Checker » dans l’encart « Aller plus loin » de la fiche.

      Johan

      Répondre

  • Par Johan Ramon, le 14 mars 2016 à 11h16.

    Ajout de l’outil « A11y Color Palette » dans l’encart « Astuces ».

    Modification effectuée le 14/03/2016.

    Répondre

  • Par sophie drouvroy, le 25 juillet 2016 à 10h02.

    Il y a aussi l’outil tota11y qui permet de localiser rapidement les couleurs qui ne sont pas contrastées comme il le faudrait, entre autres.

    http://khan.github.io/tota11y/

    ;-)

    Répondre

  • Par Johan Ramon, le 2 mars 2017 à 15h45.

    Remplacement de « Tanaguru contrast finder » par « Contrast Finder » dans l’encart « Astuces ».

    Modification effectuée le 02/03/2017.

    Répondre

Ajouter un commentaire

Les champs avec astérisque (*) sont obligatoires.

Haut de page