¿Cómo asegurar con colores definidos por el usuario los comentarios son todavía legible?

Question

Estoy explorando una idea que tuve el otro día.

¿Qué pasa si permitiría que los usuarios registrados en un sitio web para recoger sus propios colores para sus comentarios y mensajes? De esta manera la manifestación de su presencia y personalidad sería más fuerte, y también sería más fácil de detectar (e ignorar / prohibición) alborotadores (# 900 caracteres de fondo # 000). ;)

¿Cómo podría yo todavía garantiza que sus mensajes están siendo legible? ¿Me puede recomendar algoritmos relevantes?

Estoy principalmente en busca de soluciones de JavaScript y PHP, pero otros enfoques podrían ser útiles también.

Answer 1

fórmula muy muy agradable para calcular el brillo percibido de un color. Con el fin de asegurar una buena marca de contraste de que la diferencia en los valores de contraste está por encima de un umbral determinado.

Cálculo del brillo percibido de un color

Ejemplo en C # (sé que el cartel original quería una solución JavaScript - que actualmente no estoy muy familiarizado con):

    bool ValidateContrast(Color foreColor, Color backColor)
    {
        double foreBrightness = CalcBrightness(foreColor), 
               backBrightness = CalcBrightness(backColor);
        double threshold = 70; // Just a value, test this.
        bool enoughContrast = Math.Abs(foreBrightness - backBrightness) > threshold;
        return enoughContrast;
    }

    private double CalcBrightness(Color color)
    {
        double r = color.R, g = color.G, b = color.B;
        double brightness = Math.Sqrt(.241 * r * r + .691 * g * g + .068 * b * b);
        return brightness;
    }

Answer 2

Se podría calcular el color complementario que pregunté de un enfoque de JS tan recientemente. Esto no le dará una lectura óptima, algunos complementos son bastante malo para leer. Pero aún así siempre es fácil de leer, y evita que la gente poner el texto sobre un fondo #0000001 #000000.

Estoy interesado en ver si alguno de los algoritmos vienen proporcionando óptima o próxima al óptimo contraste.

Answer 3

Se podría dar a los usuarios un conjunto limitado de colores para elegir. Tal vez sólo permiten blanca o colores pálidos como fondos, y sólo dará colores oscuros o negro como color del texto. O simplemente no les permiten elegir un color de fondo en absoluto (que podría hacer que su sitio bastante repulsivo si cada comentario tiene un color de fondo diferente).

Answer 4

Sólo calcular el color inverso para el fondo y el primer plano:

function contrastingColor (color) { // color specified in #xxxxxx notation
    var rgb = color.match(/(\d{2})/g);
    for (var i=0;i<3;i++) {
        rgb[i] = parseInt(rgb[i],16);
        var new_color = 255-rgb[i];
        // if the color is too similar then shift to white (or black, your choice):
        if (Math.abs(rgb[i]-new_color) < 20) {
            new_color = 255;
        }
        rgb[i] = new_color.toString(16);
    }
    return '#'+rgb.join();
}

// usage:
contrastingColor('#123456');