Choisissez par programme les couleurs à contraste élevé

Question

Cela devrait être une question simple, mais je n’ai pas réussi à trouver un moyen de la faire fonctionner.

En gros, j’utilise une page d’hôte local stupide que j’utilise dans mon développement Web. Lorsque je surfe entre notre serveur de développement et ma version locale du code C # (redirigé de l'URL de la dev via un fichier hôte), il a parfois été fait oublier ce que 'dev.foo.com' désigne - local ou serveur.

J'ai donc créé une page qui s'exécutera localement comme page par défaut de ma page Web par défaut, afin que je puisse facilement identifier mon hôte local à partir du serveur.

Cette page effectue beaucoup de choses de manière aléatoire (notamment la génération des statistiques de départ d'un personnage pour D & D), notamment la définition d'une couleur d'arrière-plan aléatoire. Je le fais en générant 3 nombres aléatoires, compris entre 0 et 255, et en les définissant comme valeur RVB pour la couleur de fond du corps dans CSS.

Étant donné les 3 ints R, G et B, comment puis-je déterminer R2, G2 et B2 de sorte que la deuxième couleur présente un contraste élevé avec la première? J'aime que la page ait des couleurs d'arrière-plan aléatoires (cela m'empêche de m'habituer à l'aspect de la page de destination), mais j'aime aussi pouvoir lire le texte.

Answer 1

Vous avez besoin d'une différence de luminosité pour que le texte soit lisible, car la vision des couleurs a une résolution trop basse.

Donc, comme algorithme, je suggérerais ce qui suit:

• Choisissez une couleur d'arrière-plan aléatoire.

• Ensuite, décidez s'il s'agit d'une couleur claire ou sombre. Par exemple, vous pouvez vérifier si la moyenne des trois couleurs primaires est supérieure ou égale à 128.

• Pour une couleur claire, utilisez un texte en noir, pour un texte en noir et blanc.

Answer 2

"Contraste" est un mot chargé. Si vous souhaitez simplement pouvoir lire le texte, un moyen simple consiste à travailler dans un espace colorimétrique basé sur la luminance tel que HSL et à sélectionner les couleurs d’avant-plan et d’arrière-plan avec de grandes différences de luminance.

La conversion entre HSL et RGB est bien connue - voir Wikipedia pour les détails.

Si vous parlez de contraste de couleur réel, il n’est pas aussi sobre (il existe de nombreux facteurs de perception qui, à ma connaissance, n’ont pas été réduits à un seul espace de couleur), mais je soupçonne que vous n'avez pas besoin de ce niveau de sophistication.

Answer 3

Découvrez cette solution PHP: Calcul du contraste des couleurs avec PHP par Andreas Gohr. Il peut bien sûr être porté dans n’importe quelle langue.

Il a également fait une très belle démonstration de son analyseur de contraste, dans lequel vous pouvez trouver des niveaux de contraste minimaux.

Answer 4

Vous pouvez utiliser la méthode GetBrightness () sur la classe Color . Il renvoie une valeur flottante de 0,0 (luminosité du noir) à 1,0 (blanc). Une solution simple serait:

var color1 = new Color.FromArgb(r1, g1, b1);
var brightness = color1.GetBrightness();

var color2 = brightness > 0.5 ? Color.Black : Color.White;

Answer 5

J'ai fait quelque chose comme ça dans une application Palm OS. C'est ce que je suis venu avec. Cela ne vous donne pas un "contraste élevé". couleurs, mais cela vous donne une couleur de fond assez différente de la couleur du texte pour être assez lisible:

  // Black background is a special case.  It's fairly likely to occur and 
  // the default color shift we do isn't very noticeable with very dark colors.
  if (backColor.r < 0x20 && backColor.g < 0x20 && backColor.b < 0x20)
  {
      textColor.r = backColor.r + 0x20;
      textColor.g = backColor.g + 0x20;
      textColor.b = backColor.b + 0x20;
  }
  else
  {
      textColor.r = backColor.r + ((backColor.r < 128) ? 0x10 : -0x10);
      textColor.g = backColor.g + ((backColor.g < 128) ? 0x10 : -0x10);
      textColor.b = backColor.b + ((backColor.b < 128) ? 0x10 : -0x10);
  }

Vous n’avez peut-être pas besoin de faire du noir en tant que cas particulier, le traitement des couleurs de Palm est un peu génial (couleur 16 bits).

Answer 6

Il existe quelques bonnes ressources (et algorithmes) pour résoudre ce problème à l'adresse http://juicystudio.com/ article / luminositycontrastratioalgorithm.php

Answer 7

Ces réponses suggèrent plus ou moins l’utilisation de l’un des deux ou trois choix de couleurs selon que la couleur est claire ou sombre.

J'utilise une approche légèrement différente et cela a fonctionné avec élégance dans mon cas. Voici la mise en œuvre.

 int color = your_color;
 contrastColor = Color.rgb(255-(color >> 16)&0xFF, 255-(color >> 8)&0xFF, 255- color&0xFF);

C’est simple et merveilleux.

Answer 8

Si vous inversez tous les bits, vous obtiendrez le "ci-contre". couleur qui serait assez bon contraste.

Je crois que c'est l'opérateur ~ en C #:

R2 = ~R1;
G2 = ~G1;
B2 = ~B1;

Answer 9

Pour un meilleur contraste, utilisez ce code

function lumdiff($R1,$G1,$B1,$R2,$G2,$B2){

    $L1 = 0.2126 * pow($R1/255, 2.2) +
          0.7152 * pow($G1/255, 2.2) +
          0.0722 * pow($B1/255, 2.2);

    $L2 = 0.2126 * pow($R2/255, 2.2) +
          0.7152 * pow($G2/255, 2.2) +
          0.0722 * pow($B2/255, 2.2);

    if($L1 > $L2){
        return ($L1+0.05) / ($L2+0.05);
    }else{
        return ($L2+0.05) / ($L1+0.05);
    }
}

function get_the_contrast($c1, $c2) {
    return (lumdiff(hexdec(substr($c1,0,2)),
        hexdec(substr($c1,2,2)),hexdec(substr($c1,4,2)),
        hexdec(substr($c2,0,2)),hexdec(substr($c2,2,2)),
        hexdec(substr($c2,4,2))));
}

La méthode ci-dessus (AVG (rouge, vert, bleu)> 128) n’est pas vraiment satisfaisante.

Answer 10

private Color GetContrastingColor(Color color)
{
    int r = color.R > 0 ? 256 - color.R : 255;
    int g = color.G > 0 ? 256 - color.G : 255;
    int b = color.B > 0 ? 256 - color.B : 255;
    return System.Drawing.Color.FromArgb(r, g, b);
}

Answer 11

Merci à @starblue !

Voici le code C # que j'utilise

 public static string GetContrastBlackOrWhiteColorAsHtmlColorCode(Color c)
        {
            System.Drawing.Color color = System.Drawing.ColorTranslator.FromHtml("transparent");

            try
            {
                if (c.R >= 128 && c.G >= 128 && c.B >= 128)
                {
                    return System.Drawing.ColorTranslator.ToHtml(Color.Black);
                }
                else
                {
                    return System.Drawing.ColorTranslator.ToHtml(Color.White);
                }
            }
            catch (Exception)
            {
            }

            return System.Drawing.ColorTranslator.ToHtml(color);
        }