À quoi ressemble une mise en conformité RGAA

Un audit d'accessibilité ne produit pas une liste de reproches : il produit une liste de gestes. Voici un exemple réel, mené sur ce site même. Cinquante éléments signalés se ramènent à dix-huit couples de couleurs — chacun se corrige une fois, dans la palette, et la correction vaut pour toutes ses occurrences. Les couleurs proposées gardent la teinte et la saturation d'origine : seule la luminosité bouge, du minimum nécessaire pour franchir le seuil. L'identité visuelle est préservée.

  • 50 éléments en défaut
  • 18 couples de couleurs
  • 5 pages
  • 50 corrigés par ces changements

Comment lire le seuil. Le rapport de contraste exigé dépend de la taille du texte : 4,5:1 pour du texte courant, 3:1 seulement à partir de 18,5 pt en gras ou 24 pt en normal. C'est pourquoi certains titres passent avec un écart plus faible. Les valeurs ci-dessous sont mesurées sur le rendu réel des pages, aux couleurs effectivement calculées par le navigateur, et non sur la palette théorique.

13

« En particulier »

accueil · seuil exigé 4,5:1 · on change le fond

Échantillon avant correction : « En particulier » en #ffffff sur fond #8da7b4.

#ffffff sur #8da7b4

2,52:1 insuffisant

Échantillon après correction : « En particulier » en #ffffff sur fond #5c7b8b.

#ffffff sur #5c7b8b

4,51:1 conforme

9

Texte courant vert sur blanc

solution · seuil exigé 4,5:1 · on change la couleur du texte

Échantillon avant correction : « Que représente exactement une carte… » en #3c8c6e sur fond #ffffff.

#3c8c6e sur #ffffff

4,06:1 insuffisant

Échantillon après correction : « Que représente exactement une carte… » en #388367 sur fond #ffffff.

#388367 sur #ffffff

4,55:1 conforme

5

Bleu de lien et d'intertitre

prestations, solution · seuil exigé 4,5:1 · on change la couleur du texte

Échantillon avant correction : « ACMEÉ » en #0099cc sur fond #ffffff.

#0099cc sur #ffffff

3,27:1 insuffisant

Échantillon après correction : « ACMEÉ » en #007faa sur fond #ffffff.

#007faa sur #ffffff

4,55:1 conforme

3

Rose pâle sur blanc

solution · seuil exigé 4,5:1 · on change la couleur du texte

Échantillon avant correction : « Méga-application » en #ff94e5 sur fond #ffffff.

#ff94e5 sur #ffffff

1,98:1 insuffisant

Échantillon après correction : « Méga-application » en #dd00a8 sur fond #ffffff.

#dd00a8 sur #ffffff

4,53:1 conforme

3

Bandeau vert olive

prestations · seuil exigé 4,5:1 · on change le fond

Échantillon avant correction : « La nouvelle version de l'application… » en #ffffff sur fond #b1b978.

#ffffff sur #b1b978

2,08:1 insuffisant

Échantillon après correction : « La nouvelle version de l'application… » en #ffffff sur fond #747b40.

#ffffff sur #747b40

4,52:1 conforme

3

Bandeau bleu ciel

prestations · seuil exigé 4,5:1 · on change le fond

Échantillon avant correction : « Nouvelle approche dédiée à la… » en #ffffff sur fond #78c7dd.

#ffffff sur #78c7dd

1,91:1 insuffisant

Échantillon après correction : « Nouvelle approche dédiée à la… » en #ffffff sur fond #278099.

#ffffff sur #278099

4,53:1 conforme

2

Grand titre turquoise

cartographie · seuil exigé 3:1 · on change la couleur du texte

Échantillon avant correction : « CARTOGRAPHIE » en #33cccc sur fond #ffffff.

#33cccc sur #ffffff

1,97:1 insuffisant

Échantillon après correction : « CARTOGRAPHIE » en #29a4a4 sur fond #ffffff.

#29a4a4 sur #ffffff

3,03:1 conforme

2

Jaune olive sur blanc

cartographie · seuil exigé 4,5:1 · on change la couleur du texte

Échantillon avant correction : « Mettre en évidence une concentration… » en #a8a817 sur fond #ffffff.

#a8a817 sur #ffffff

2,54:1 insuffisant

Échantillon après correction : « Mettre en évidence une concentration… » en #7a7a11 sur fond #ffffff.

#7a7a11 sur #ffffff

4,55:1 conforme

1

Vert fluo sur blanc

cartographie · seuil exigé 3:1 · on change la couleur du texte

Échantillon avant correction : « USAGES » en #00ff00 sur fond #ffffff.

#00ff00 sur #ffffff

1,37:1 insuffisant

Échantillon après correction : « USAGES » en #00ad00 sur fond #ffffff.

#00ad00 sur #ffffff

3,01:1 conforme

1

Bouton d'envoi du formulaire

contact · seuil exigé 4,5:1 · on change le fond

Échantillon avant correction : « Envoyer » en #ffffff sur fond #6b9e19.

#ffffff sur #6b9e19

3,22:1 insuffisant

Échantillon après correction : « Envoyer » en #ffffff sur fond #588215.

#ffffff sur #588215

4,55:1 conforme

Les dix-huit couples suivent la même logique ; les dix montrés ici couvrent quarante des cinquante éléments signalés. Mesures faites avec axe-core sur les référentiels WCAG 2.1 niveaux A et AA, dont le RGAA est la déclinaison française. Les couples sont classés par nombre d'occurrences : les premiers rapportent le plus.