Elija programáticamente los colores de alto contraste

Question

Esta debería ser una pregunta simple, pero no he podido encontrar una manera de hacer que funcione.

Esencialmente, tengo una página localhost tonta que uso en mi desarrollo web. Cuando navego entre nuestro servidor de desarrollo y mi versión local del código C # (redirigido desde la url dev a través del archivo host), a veces se me olvida lo que apunta 'dev.foo.com' - local o servidor.

Así que creé una página que se ejecutará localmente como la página predeterminada de mi página web predeterminada, para poder identificar fácilmente mi host local desde el servidor.

Esta página hace muchas cosas al azar (incluida la generación de estadísticas de inicio de un personaje para D & amp; D), incluida la configuración de un color de fondo aleatorio. Lo hago generando 3 números aleatorios entre 0 y 255, y configurándolos como el valor RGB para el color de fondo del cuerpo en CSS.

Dados los 3 ints R, G y B, ¿cómo puedo determinar R2, G2 y B2 de modo que el segundo color tenga un alto contraste con el primero? Me gusta que la página tenga colores de fondo aleatorios (me impide acostumbrarme al aspecto de la página de destino) pero también me gusta poder leer el texto.

Answer 1

Necesitas una diferencia en el brillo para que el texto sea legible, ya que la visión del color en sí tiene una resolución demasiado baja.

Entonces, como un algoritmo, sugeriría lo siguiente:

• Selecciona un color de fondo aleatorio.

• Luego decide si es un color claro u oscuro. Por ejemplo, podría verificar si el promedio de los tres colores primarios es mayor o igual a 128.

• Para un color claro, use texto negro, para un texto en blanco oscuro.

Answer 2

" Contraste " es una palabra cargada Si solo te importa poder leer el texto, una manera fácil es trabajar en un espacio de color basado en luminancia como HSL, y elegir colores de primer plano y de fondo con grandes diferencias de luminancia.

La conversión entre HSL y RGB es conocida; consulte Wikipedia para obtener más detalles.

Si estás hablando de contraste de color real, no es tan simple como es (hay muchos factores perceptivos que, por lo que sé, no se han reducido a un solo espacio de colores), pero sospecho que no necesitas ese nivel de sofisticación.

Answer 3

Echa un vistazo a esta solución de PHP: Cálculo del contraste de color con PHP por Andreas Gohr. Puede ser portado a cualquier idioma, por supuesto.

También tiene una muy buena demostración de su analizador de contraste donde puedes encontrar algunos niveles de contraste mínimos con los que trabajar.

Answer 4

Puede usar el método GetBrightness () en la clase Color . Devuelve un valor flotante de 0.0 (brillo de negro) a 1.0 (blanco). Una solución simple sería:

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

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

Answer 5

Hice algo como esto en una aplicación Palm OS. Esto es lo que se me ocurrió. No le da " alto contraste " colores, pero le da un color de fondo que es lo suficientemente diferente del color del texto para que sea bastante legible:

  // 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);
  }

Es posible que no necesite usar el negro como un estuche especial para sus propósitos: el manejo del color de Palm es un poco raro (color de 16 bits).

Answer 6

Hay algunos buenos recursos (y algoritmos) para tratar esto en http://juicystudio.com/ article / luminositycontrastratioalgorithm.php

Answer 7

Estas respuestas sugieren más o menos que se use una de las dos o tres opciones de color en función de si el color es brillante u oscuro.

Utilizo un enfoque un poco diferente y funcionó elegantemente en mi caso. Aquí está la implementación.

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

Es simple y maravilloso.

Answer 8

Si volteas todos los bits, obtendrás el " opuesto a " color que sería bastante buen contraste.

Creo que es el operador ~ en C #:

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

Answer 9

Para un mejor contraste use este código

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))));
}

El método anterior (AVG (rojo, verde, azul) > 128) no es realmente bueno.

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

¡Gracias a @starblue !

Aquí está el código C # que uso

 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);
        }