Libellés texte et couleur de fond – La gestion des couleurs dans les XPages

palette_couleur

 

L'accessibilité du contenu est une norme de plus en plus importante, et elle passe notamment par la lisibilité du texte sur son fond. Je vous propose dans cet article de découvrir la gestion des couleurs dans les XPages, à travers un exemple basé sur un système d'étiquettes qui vous montrera comment optimiser la couleur de votre texte en fonction de la couleur du fond sur laquelle il est retranscrit.

Supposons une application de traitement de dossiers (messagerie ou autre) dans laquelle on souhaite mettre en place un système d'étiquettes.

Supposons également que l'on souhaite personnaliser les étiquettes avec un code couleur. Nous obtenons l'écran suivant :

XPages_Art_Gestion_Couleur_000

Afin de permettre aux utilisateurs de gérer leurs étiquettes, il suffit de proposer un écran comme suit :

XPages_Art_Gestion_Couleur_001

Jusqu'ici c'est simple. Le libellé est écrit en noir sur un fond de couleur, choisi par l'utilisateur. Par contre que se passe-t-il si l'utilisateur choisit une couleur plus foncée ?

La lisibilité est plus problématique.
XPages_Art_Gestion_Couleur_002

Le libellé devrait être plutôt écrit en blanc
XPages_Art_Gestion_Couleur_003

L'accord entre la couleur du texte et la couleur de fond doit donc être géré de manière automatique. Comment déterminer la couleur du texte à utiliser ?

Tout d'abord un peu de théorie

La recommandation du W3C sur l’accessibilité du contenu est d'avoir un contraste entre le texte et la couleur de fond entre 1  : 1 et 21:1.

La luminosité d'une couleur est calculée comme suit

Une couleur est définie comme claire si la luminosité est > 186.

Donc pour savoir si on doit afficher le texte en noir ou en blanc il suffit d'appliquer la formule suivante:


Revenons à notre écran il suffit de coder le calcul précédent dans la fonction suivante :

On applique donc la fonction de couleur de texte à notre étiquette

XPages_Art_Gestion_Couleur_004

La fonction étant générique, elle peut donc être appliquée pour tout type d'affichage (barre de progression, graphique etc ....)

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Captcha *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.