Discussion :

[Cypselos]

Bonjour.

J'ai une zone de texte. La couleur de l'arrière-plan de cette zone peut être choisie par l'utilisateur. J'aimerais que le texte qui s'y trouve soit toujours lisible, qu'elle que soit la couleur d'arrière-plan. J'aurais donc besoin de pouvoir déterminer une couleur qui contraste bien avec une autre, dont j'ai forcément le code couleur.

J'ai pas forcément besoin de quelque chose de compliqué, mais d'un résultat acceptable.

Merci d'avance.

[pseudocode]

J'ai pas forcément besoin de quelque chose de compliqué, mais d'un résultat acceptable.

Soit R,G,B les 3 composantes de la couleur de fond (entre 0 et 255)

si ((R+G+B)/3)<128 alors texte=BLANC sinon texte=NOIR

[Cypselos]

Soit R,G,B les 3 composantes de la couleur de fond (entre 0 et 255)

si ((R+G+B)/3)<128 alors texte=BLANC sinon texte=NOIR

Merci, cela me convient parfaitement.

[rebel64]

La perception de chaque couleur de base n'est pas la même :
Le bleu parait plus sombre que le rouge et le rouge plus sombre que le vert.

Formule pour calculer le niveau de gris d'une couleur:

0.11 * B + 0.30 * R + 0.59 * G

Tu peux utiliser une formule approximative plus simple:

(B + 2 * R + 4 * G) / 7

[Cypselos]

La perception de chaque couleur de base n'est pas la même :
Le bleu parait plus sombre que le rouge et le rouge plus sombre que le vert.

Formule pour calculer le niveau de gris d'une couleur:

0.11 * B + 0.30 * R + 0.59 * G

Tu peux utiliser une formule approximative plus simple:

(B + 2 * R + 4 * G) / 7

Très intéressant. Merci!

[Heirem]

Bonsoir !
Au départ je me suis basé sur la formule indiqué ici et qui fonctionnait bien ... sauf pour certaines couleurs. Pour lesquelles le rouge et le vert étaient trop sombre et donnait une couleur de contraste innadaptée.

Alors j'ai essayé d'appliquer un coef de pondération mais alors là ... il a fallut sortir les aspirines !

Finalement c'est sur le site du W3c ici que j'ai trouvé la formule idéale.

Alors pour ceux qui comme moi passerait par ici la voilà :

SI ((Red value X 299) + (Green value X 587) + (Blue value X 114)) / 1000 < 125 ALORS AFFICHER DU BLANC (#FFF) SINON du NOIR (#000)

Heirem
http://heirem.fr

[Mac LAK]

Tu peux aussi tenter de toujours écrire dans la couleur complémentaire de celle du fond. Tant que tu n'est pas dans des gris moyens (vu qu'ils sont quasiment leurs propres complémentaire), c'est en général bien lisible.
Afficher en mode XOR produit également souvent de bons résultats sur un fond uni (c'est nettement plus dégueu sur une image).

[dverdin]

Bonsoir !
Finalement c'est sur le site du W3c ici que j'ai trouvé la formule idéale.

Alors pour ceux qui comme moi passerait par ici la voilà :

SI ((Red value X 299) + (Green value X 587) + (Blue value X 114)) / 1000 < 125 ALORS AFFICHER DU BLANC (#FFF) SINON du NOIR (#000)

Heirem
http://heirem.fr

Cette formule marche comme un charme, merci beaucoup !

[ijk-ref]

Soit R,G,B les 3 composantes de la couleur de fond (entre 0 et 255)

si ((R+G+B)/3)<128 alors texte=BLANC sinon texte=NOIR

L'algo le plus logique (je trouve) pour maximiser encore plus le contraste serait d'effectuer ceci sur chaque canal couleur (RGB) indépendamment.

Ainsi :

if(background.R<128) text.R=255; else text.R=0;
if(background.G<128) text.G=255; else text.G=0;
if(background.B<128) text.B=255; else text.B=0;

[pseudocode]

L'algo le plus logique (je trouve) pour maximiser encore plus le contraste serait d'effectuer ceci sur chaque canal couleur (RGB) indépendamment.

Si tu aimes écrire en Vert sur fond Mauve, effectivement.

Fond = {255,0,255} ==> Text = {0,255,0}

[ijk-ref]

Nan je préfère écrire en jaune sur fond bleu !

Juste pour la forme et le plaisir de donner une autre solution, j'ai donné un algo qui maximise encore plus le contraste... ensuite les goûts et le couleurs...

Edit : à non en fait c'est faux ce que je dis ! Dans ton cas "vert/mauve" par exemple on se retrouve avec un fond et un texte de luminosité très voisine. Donc mon algo il est nul... et moche !

[pseudocode]

Edit : à non en fait c'est faux ce que je dis ! Dans ton cas "vert/mauve" par exemple on se retrouve avec un fond et un texte de luminosité très voisine. Donc mon algo il est nul... et moche !

Quand on parle de "contraste", on fait effectivement référence aux variations d'intensité lumineuse. D'où le fait que dans les posts précédents nous proposons tous des formules à base de calcul de luminosité.