Accessibilité : comprendre le rapport de contraste

Accessibilité web : W3C, WAI, WCAG, RGAA

L’accessibilité web consiste à rendre les contenus et services web accessibles au plus grand nombre d’utilisateurs.

Cela se traduit principalement par la considération de nombreux handicaps visuels, auditifs, moteurs et cognitifs.

Plus globalement, l’accessibilité web vise également à faciliter l’accès au web :

• Via des appareils variés (tailles variables, différents modes de saisie…)
• Aux personnes âgées (diminution des capacités liées à l’âge)
• Selon l’environnement (être en plein soleil, impossibilité d’activer le son…)
• Selon la connexion internet

Quand on parle d’accessibilité, on est souvent confronté à de nombreux acronymes. Il est important d’en comprendre les principaux :

• W3C (World Wide Web Consortium) : Il s’agit de l’organisme international et indépendant régissant les standards du web. Il travaille notamment activement sur les évolutions du HTML et du CSS.
• WAI (Web Accessibility Initiative) : Il s’agit d’un sous-groupe de travail de la W3C spécialisé sur l’accessibilité web.
• WCAG (Web Content Accessibility Guidelines) : Il s’agit d’un ensemble de directives conçues afin de rendre le web plus accessible. Cette norme est conçue par le WAI.
• RGAA (Référentiel Général d’Amélioration de l’Accessibilité) : Il s’agit du référentiel adaptant la norme WCAG pour les sites web du service public français. Elle comporte de nombreux critères et tests de respect de ces critères.

Le contraste

Le contraste définit une opposition marquée entre la luminosité d’une couleur de premier plan et d’une couleur d’arrière-plan.

En accessibilité web, ce contraste doit être suffisamment marqué afin de rendre la lecture d’un texte la plus aisée possible. Pour le mesurer, on utilise le rapport de contraste.

La RGAA définit des tests et références liés au rapport de contraste des éléments sur une page web dans ses rubriques 3.2 et 3.3.

Le rapport de contraste

Comprendre le rapport de contraste

Le rapport de contraste est obtenu en calculant la différence de luminance (intensité de la lumière émise) entre deux couleurs voisines.

La plupart du temps, ces couleurs sont superposées.

Ce rapport retourne un résultat compris entre 1 et 21 :

• 1 : illisible (couleur de fond et de texte identiques)
• ]1, 21[ : plus le nombre est grand, plus le contraste est élevé.
• 21 : contraste maximal (noir sur blanc / blanc sur noir)

Niveaux de validité : AA et AAA

Afin de valider les contrastes exploités sur une interface, le WCAG préconise d’atteindre au moins le niveau AA (minimal) et idéalement le niveau AAA (amélioré).

Ces niveaux définissent un rapport de contraste à atteindre, en fonction de la taille et de la graisse du texte.

Voici un tableau résumant les exigences de rapport de contraste requises par les niveaux AA et AAA :

Des outils pour calculer le rapport de contraste

Il existe de nombreux outils pour calculer simplement le rapport de contraste entre deux couleurs. Je vous en propose deux avec des approches complémentaires : une interface graphique et une API.

• coolors.co (interface graphique) Coolors est un incontournable site dédié à la génération de palettes de couleurs. Il propose également un calculateur de rapport de contraste très bien conçu.
• webaim.org (API) WebAIM propose une API très utile pour intégrer le calcul du rapport de contraste dans vos projets de développement. https://webaim.org/resources/contrastchecker/?fcolor=ffffff&bcolor=4d35e7&api Cette API nécessite 3 paramètres GET :
  • fcolor : code hexadécimal de la couleur de premier plan
  • bcolor : code hexadécimal de la couleur d’arrière plan
  • api : sa seule présence (sans valeur) spécifie que l’on souhaite consommer l’API Elle retourne un fichier .json à la structure suivante :

{
	"ratio": "7.05",
	"AA": "pass",
	"AALarge": "pass",
	"AAA": "pass",
	"AAALarge": "pass"
}

7.05 est ici le contrast ratio. La chaîne de caractères "pass" indique que le niveau de validité est atteint.