18041 sujets

Questions générales et questions de débutants

[Résolu] Couleur du texte en fonction de la couleur d'arrière-plan

Bonjour,

j'ai un léger problème de couleurs et je ne sais pas comment le régler... j'ai cherché sur le net (peut-être mal) ainsi que sur le forum mais je n'ai pas réussi à trouver mon bonheur.

J'ai des données qui sont associées à une couleur (pour un affichage visuel sous forme de calendrier).
J'utilise donc cette couleur comme arrière-plan d'un bloc quelconque dans lequel j'affiche du texte.
Pour que ce texte soit visible, j'avais donc fait une comparaison toute simple de chaine de caractères :
- si la couleur d'arrière plan est < à #777777, alors j'affiche le texte en blanc, sinon en noir. bien sûr cette solution trop simple ne marche pas à tous les coups : il arrive que certaines couleurs soit trop claires et que le texte s'affiche en blanc. ou inversement.

Je ne sais pas comment ni quoi calculer pour pouvoir faire un affichage suivant la couleur de fond.... Smiley decu

Quelqu'un aurait-il une idée ou des liens, ne serait-ce qu'une piste pour que je puisse démarrer.

PS : en farfouillant sur le forum, j'ai trouvé l'outil
colordb et j'ai vu qu'on pouvait calculer une couleur complémentaire neutre qui donne des nuances de gris (sauf pour le gris bien sur Smiley decu )... mais je n'ai pas trouvé son mode de calcul....

Merci d'avance Smiley smile
salut,

si tu travailles sur un système calendaire, je ne pense pas qu'il soit nécessaire de se casser autant la tête. En tout et pour tout, tu ne dois travailler qu'avec une dizaine d'alternances de couleur.

Vu que tu effectues un check, je suppose que tu travailles avec PHP ou un de ses potes (voire même javascript). A priori, le moins cass-tête et le plus sûr serait de créer des tableaux de couleur associés.

Histoire que je me gourre pas, ça aurait été sympa de mettre ton code avec le message.

PS : je suis nouveau ici mais je crois que t'as pas mis ton message dans la bonne rubrique.
salut merci pour la réponse
En fait je ne savais pas dans quelle rubrique le mettre ... c'est pour ça que du coup je l'ai mis dans la catégorie "fourre-tout"... Smiley decu
En fait le gros inconvénient, c'est que c'est l'utilisateur qui choisit la couleur associée.. on va dire que ce sont des matières. donc chaque matière est associée à une couleur et l'utilisateur à la possibilité d'ajouter de nouvelles matières... donc je ne peux pas figer la couleur... je dois donc jongler en fonction de la couleur d'arrière-plan.... je travaille avec un de ses potes comme tu dis... en ASP donc je peux faire le calcul avant d'afficher la page à l'utilisateur...

pour le code je ne sais pas quel code est illustratif ici puisque pour le moment le "calcul" se résume à un simple if et une comparaison plus que bourrine, comme dit précédemment :

If strComp("#777777",matiere.get_couleur(),vbTextCompare) <=0 Then
    Response.write "style =""color:#ffffff;background-color:" & matiere.get_couleur() & ";"""
Else
    Response.write "style =""color:#000000;background-color:" & matiere.get_couleur() & ";"""
End If


Smiley decu
Modifié par nelero (16 Jun 2006 - 15:34)
Cette solution, fournie par le webmaster de pourpre.com (merci beaucoup pour cette réponse détaillée) fonctionne parfaitement.
Je cite donc le message :
a écrit :
Concernant votre problématique, la complémentaire neutre ne vous satisfera pas toujours, car pour les teintes de luminosité moyenne, la complémentaire neutre sera un gris également moyen donc peu visible sur votre fond. De plus, plus on s'approche de ces valeurs moyennes, plus le contraste est faible avec la complémentaire neutre.

Je vous conseille plutôt de vous contenter de noir et de blanc et de choisir le meilleur d'entre eux selon la couleur de fond.

Pour ce faire, calculer d'abord la luminosité de votre couleur:
(notons r, v et b les niveaux de rouge, vert et bleu entre 0 et 100)

lum = (r+v+b) / 3;

C'est une formule approximative (en réalité, le canal vert par exemple, a une plus grande amplitude de luminosité que le canal bleu).

Ensuite, en fonction de votre valeur de lum, choisissez d'afficher votre texte en noir ou en blanc, en gardant à l'esprit que la valeur médiane de 50 n'est pas optimale pour le changement de couleur.

Par exemple:
si (lum < 30) => affichage en blanc
si (lum >=30) => affichage en noir

Bien sûr, vous pouvez affiner ceci en ajoutant un ou deux niveaux de gris,
mais je ne suis pas sûr que ce soit bien utile.

Si vous avez des problèmes sur cetaines couleurs, ce sera dû à l'approximation du calcul de la luminosité de votre couleur.

Utilisez alors la formule suivante, plus exacte:

lum = (0.2125 * r) + (0.7154 * v) + (0.0721 * b)

Modifié par nelero (07 Jul 2006 - 10:32)
Sujet clos
Aller à