271 votes

Déterminer la couleur de police basée sur la couleur d’arrière-plan

Étant donné un système (un site Web par exemple) qui permet à un utilisateur de personnaliser la couleur d'arrière-plan pour certaines sections mais pas la couleur de la police (pour limiter le nombre d'options), existe-t-il un moyen de déterminer sombre "la couleur de la police est nécessaire?

Je suis sûr qu'il existe un algorithme, mais je n'en connais pas assez sur les couleurs, la luminosité, etc.

480voto

Gacek Points 3649

J'ai rencontré le même problème. J'ai dû trouver une bonne méthode de sélection des contrastive de la couleur de la police pour l'affichage des étiquettes de texte sur colorscales/cartes de chaleur. Il devait être une méthode universelle et a généré la couleur devait être "beau", ce qui signifie que la simple génération de couleur complémentaire n'était pas la bonne solution - parfois, il a généré étrange, de très forte intensité de couleurs qui ont été dur à regarder et à lire.

Après de longues heures de test et d'essayer de résoudre ce problème, j'ai trouvé que la meilleure solution est de sélectionner la police blanche pour "dark" des couleurs, et en noir, la police pour "bright" les couleurs.

Voici un exemple de fonction j'utilise en C#:

Color ContrastColor(Color color)
{
    int d = 0;

    // Counting the perceptive luminance - human eye favors green color... 
    double a = 1 - ( 0.299 * color.R + 0.587 * color.G + 0.114 * color.B)/255;

    if (a < 0.5)
       d = 0; // bright colors - black font
    else
       d = 255; // dark colors - white font

    return  Color.FromArgb(d, d, d);
}

Cela a été testé pour beaucoup de différents colorscales (arc-en-ciel, niveaux de gris, la chaleur, la glace, et bien d'autres) est la seule "méthode universelle" j'ai trouvé.

Modifier
Changé la formule de comptage a "perceptif " luminance" - il semble vraiment mieux! Déjà mis en œuvre dans mon logiciel, lui ressemble beaucoup.

0voto

Cruachan Points 11749

Si vous êtes à la manipulation des espaces de couleurs pour des effets visuels, il est généralement plus facile de travailler dans le TSL (Teinte, Saturation et Luminosité) que RVB. Le déplacement des couleurs en RVB pour donner naturellement un bel effet a tendance à être assez conceptuellement difficile, tandis que la conversion en HSL, la manipulation de là, puis de les convertir à nouveau est plus intuitive du concept et de la invariablement donne de meilleurs résultats de recherche.

Wikipedia est une bonne introduction à la LGV et de la étroitement liée à HSV. Et il est libre de code sur le net pour faire la conversion (par exemple , ici, est un javascript de mise en œuvre)

Ce que précise la transformation que vous utilisez est une question de goût, mais personnellement, j'aurais pensé à inverser la Teinte et la luminosité des composants serait certain de générer un bon contraste élevé de couleurs, dans une première approximation, mais vous pouvez facilement passer pour des effets plus subtils.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X