Picto thématique

Règle n° 177 - Les contenus sont présentés avec un contraste suffisant par rapport à leur arrière-plan.

À première vue (sic), il s’agit d’une règle destinée uniquement aux utilisateurs handicapés, daltoniens ou malvoyants. Mais détrompez-vous : une page web avec des contrastes suffisants est plus agréable pour tout le monde.

#Basics #Accessibilité #Conception #Présentation

Objectif

  • Permettre une bonne lisibilité des contenus.
  • Limiter la charge mentale lors de la consultation.
  • Améliorer l’accessibilité des contenus aux personnes handicapées

Mise en œuvre

Veiller à conserver un ratio de contraste minimal de 3:1 entre le texte et son arrière-plan, tel qu'il peut être mesuré via l'algorithme WCAG2.0.

Contrôle

Dans l'ensemble des pages :

  • Repérer les contenus dont la différence de contraste/luminosité avec leur arrière-plan est potentiellement insuffisante
  • Utiliser un outil du type Colour Contrast Analyzer pour calculer le ratio de contraste : cliquer sur Luminosité et relever la couleur du premier plan puis celle du second plan dans les champs dédiés ;
  • Vérifier que le ratio de contraste relevé est supérieur ou égal à 3:1

Dans le cas de textes placés sur un arrière-plan en dégradé, en motif ou photographique, la mesure de couleur de l'arrière-plan est prise au point le plus défavorable jouxtant le texte (pour un texte noir, le pixel le plus sombre). Il est conseillé de tenir également compte de l'agrandissement éventuel de la taille de caractère par l'utilisateur (Zoom texte seulement), qui peut entraîner un changement dans la superposition texte/arrière-plan.

Auteur Opquast - Consulter la licence


Découvrez la certification Opquast

  • Une formation et une certification 100% en ligne
  • 14 heures en ligne en autonomie, disponible 24h/24, 7j/7
  • guide de 200 pages, des quiz, un glossaire, des examens blancs, des articles des videos
  • Pour tous les professionnels du Web : marketing, commerciaux, UX, chefs de projet, designers, développeurs, ingénieurs informatiques.
  • Une approche multidisciplinaire : SEO, accessibilité, sécurité, écoconception… pour tous les professionnels, débutants comme confirmés.

Module de sensibilisation
Inscription gratuite