Question

I am exploring an idea I had the other day.

What if I would allow the registered users on a website to pick their own colors for their comments and posts? This way the manifestation of their presence and personality would be stronger, and also it would be easier to spot (and ignore/ban) trouble-makers (#900 characters on #000 background). 😉

How could I still guarantee that their posts are still readable? Can you recommend relevant algorithms?

I am primarily looking for JavaScript and PHP solutions but other approaches could be useful as well.

Answer 1

Very very nice formula for calculating the perceived brightness of a color. In order to ensure sufficient contrast make sure the difference in contrast values is above a certain threshold.

Calculating the Perceived Brightness of a Color

Example in C# (I know the original poster wanted a JavaScript solution – which I’m currently not very familiar with):

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