Dot.Blog

C#, XAML, Xamarin, UWP/Android/iOS

Quick tip : quelle couleur de fond pour une couleur d’avant plan ?

[new:30/03/2015]Lorsqu’une couleur d’avant-plan peut être librement choisie par l’utilisateur comment choisir un fond qui en permette à coup sûr la lecture ?

Vive les couleurs libres !

Dans certaines applications, desktop ou mobiles, il peut être intéressant de laisser l’utilisateur choisir la couleur d’affichage de certains messages.

Bien entendu il est tout aussi possible de laisser libre le choix du fond et c’est à l’utilisateur de se débrouiller pour la lisibilité !

Mais cela réclame un paramètre de plus à gérer, à stocker, à afficher, etc. Or une bonne application est une application qui laisse suffisamment de liberté à l’utilisateur pour qu’il se sente à l’aise (un peu de liberté) mais pas perdu (principe KISS). Cela est d’autant plus vrai sur unités mobiles où il faut à tout prix rester simple, facile à comprendre et assez léger puisque les UI ne peuvent pas avoir la densité et la complexité d’un affichage desktop.

Donc supposons que l’utilisateur ne peut choisir librement que la couleur d’avant-plan pour certains messages affichés par l’application.

Une question se pose alors : comment s’assurer que quelque soit le choix le texte sera lisible ?

Calculer la luminance

Une approche très simple consiste à calculer la luminance de la couleur choisie et à placer soit un fond très foncé (le noir en général) soit un fond très clair (le blanc) pour que le contraste entre avant-plan et arrière-plan soit toujours suffisant pour assurer la lecture du message.

Le calcul standard de la luminance ressemble à cela :

double luminance = (0.30 * color.R * (1.0/255.0)) +
                               (0.59 * (color.G * (1.0/255.0)) +
                               (0.11 * color.B * (1.0/255.0));

L'espace des couleurs dont la valeur varie de 0 à 255 doit être "compressé" dans un espace 0.0-1.0 afin que la somme des trois multiplication soit égale au maximum à 1.0. 

Rien de bien savant il faut juste le savoir, d’où le titre de ce billet “quick tip” (astuce rapide).

Ensuite choisir un fond noir ou blanc est ultra simple :

backgroundColor = luminance > 0.5 ? Color.Black : Color.White;

 

On peut mettre tout cela dans une méthode pour simplifier les choses bien entendu (à condition de l’utiliser plusieurs fois dans un même code sinon cela n’a pas d’intérêt).

Conclusion

Quick c’est quick ! Donc c’est tout Sourire

Une astuce à connaître et qui peut sortir d’une impasse visuelle dans certain cas.

Stay Tuned !

blog comments powered by Disqus